Ajuda da Adobe” Dreamweaver” CC 


Alguns links podem direcioná-lo a conteúdo em inglês. 


Junho de 2014 


Novidades 


Resumo de novos recursos 


Dreamweaver CC versão 2014 


A nova versão 2014 do Dreamweaver CC inclui vários aprimoramentos para a Visualização dinâmica e o CSS Designer para ajudar a criar e a 
atualizar facilmente o conteúdo para a Web e dispositivos móveis. O novo recurso Exibição rápida do elemento ajuda a visualizar, navegar e 
editar rapidamente o markup HTML. 


Este artigo apresenta esses novos recursos e vários outros aprimoramentos, além de fornecer links para outros recursos de ajuda e aprendizado. 


O que há de novo e o que foi alterado 


Exibição rápida do elemento 

Novos recursos de edição na Visualização dinâmica 

Inserção dinâmica 

Aprimoramentos do CSS Designer 

Suporte para conexões SFTP usando o arquivo de identidade 
Desfazer/Refazer aprimoramentos 

Alterações no fluxo de trabalho do Business Catalyst e do PhoneGap Build 
Alterações em extensões de acesso para Dreamweaver 

Alterações para sincronizar configurações 

Envio de errosisolicitação de recursos diretamente do Dreamweaver 
Help Center 

Alterações no menu Ajuda 


Para o início 


Exibição rápida do elemento 


Revise a marcação no documento usando o novo recurso Exibição rápida do elemento, que processa uma árvore de HTML interativa para os 
conteúdos estático e dinâmico. Modifique a estrutura estática do conteúdo direto na árvore HTML. 


pe 
body 


div > .gridContainer.clearfix 


div .dialogueOverlay 

div, fluid.dialogueContent 

header , fluid.siteHeader 

section , fluid.hero.homeHero 

section , fluid.categories 

section , fluid.featuredProducts 

section , fluid.adventureSports 

section , fluid.app 

section , fluid.advert 

section , fluid.blog 

footer, fluid.siteFooter 

section , fluid.siteCopyrightinfo 
script 


div, «ui-dialog.ui-widget.ui-widget-conten 


body .gridContainer.dearfix 


Exibição rápida do elemento 


A Exibição rápida do elemento (Exibir > Exibição rápida do elemento) foi criada para ajudar a acelerar o processo de desenvolvimento. Em 


versões anteriores do Dreamweaver, seria necessário destacar os elementos HTML na Visualização dinâmica, alternar para a Visualização de 
código e editar os elementos. Depois da edição, seria necessário voltar novamente para a Visualização dinâmica a fim de visualizar as 
alterações. Agora, com a Exibição rápida do elemento, você pode visualizar todos os elementos da página em uma exibição única e fácil de ler e 
editar o conteúdo estático. 


Para obter mais informações, consulte Exibição rápida do elemento. 


E ia a 5 =” ALAS Para o início 
Novos recursos de edição na Visualização dinâmica 


Inspecione e altere qualquer um dos direitos de propriedades de elementos HTML na Visualização dinâmica e veja como fica sua aparência sem 
precisar atualizar tudo. 

* Inspetor de propriedades rápido 

* Exibição do elemento 

* Edição de texto dinâmico 

* Inspetor de propriedades da visualização dinâmica 


Inspetor de propriedades rápido 
A visualização dinâmica agora exibe o Inspetor de propriedades rápido para elementos HTML em suas páginas. Com base no elemento HTML 
selecionado, o Inspetor de propriedades rápido permite editar atributos ou texto diretamente na Visualização dinâmica. 


E: .blogArtideMedia 


src : |images/blog-girl,png & 


title ; 
alt; Girlin a sleeping bag 


link : & 


Inspetor de propriedades rápido para editar atributos de imagem 


HUGE BACKPACK SALE—$99! 
O 
AU styles, now on sale! Shop our colletri B/ 7 ghi y packs designed 


to accompany you on any adventure —idjulday Trips to extended 
excursions, and more. 


SHOP NOW mp 


Inspetor de propriedades rápido para formatar texto 


Para obter mais informações, consulte Inspetor de propriedades da visualização dinâmica. 


Exibição do elemento 
Com a nova Exibição do elemento, agora é possível associar elementos HTML a classes e IDs diretamente na Visualização dinâmica. A Exibição 
do elemento indica as classes e IDs disponíveis para ajudá-lo a visualizar e escolher a opção requerida rapidamente. 


HUGE BACKPACK SALE — $99! 


All styles, now on sale! Shop our collection of quality packs designed 
to accompany you on any adventure—from day trips to extended 


excursions, and more. 


SHOP NOW =p 


Exibição do elemento para editar classes e IDs 


Para obter mais informações, consulte Associar elementos HTML a classes e IDs. 


Edição de texto dinâmico 


Agora, você pode editar texto diretamente na Visualização dinâmica e visualizar as alterações sem precisar alternar entre visualizações 
diferentes. 


Clique duas vezes no elemento de texto na Visualização dinâmica para entrar no modo de edição. Para obter mais informações, consulte Editar 
texto diretamente na Visualização dinâmica. 


HUGE BACKPACK SALE —$99! 


AI styles, now on sale! Shop our collection of quality packs designed 
to accompany you on any adventure—from day trips to extended 


excursions, and more. 


SHOP NOW mp 


Editar texto diretamente na Visualização dinâmica 


Inspetor de propriedades da visualização dinâmica 
O Inspetor de propriedades está agora disponível na Visualização dinâmica de forma que você pode editar a sua página rapidamente sem 
alternar para a Visualização de código ou de design. 


Para obter mais informações, consulte Inspetor de propriedades da visualização dinâmica. 
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Inspetor de propriedades da visualização dinâmica 


Para o início 


Inserção dinâmica 


Nessa versão, você pode inserir elementos HTML diretamente na Visualização dinâmica usando o painel Inserir. Os elementos são inseridos em 
tempo real sem a necessidade de alternar os modos. Também é possível visualizar as alterações imediatamente. 


Para obter mais informações, consulte Inserir elementos diretamente na Visualização dinâmica. 


R / O Your Desi Destination 


CRECELIEIEE 


Free Home Delivery 


[se 
[E 
[rem] ode [ori 0] imo: termos 


— 
“= LX 


Arrastar e soltar na Visualização dinâmica do painel Inserir 


Aprimoramentos do CSS Designer 


Interface de usuário aprimorada para controle de bordas 

Um controle com guias que ajuda a configurar as quatro propriedades de bordas de maneira fácil e intuitiva. 
e Controle com guias para evitar que todos os valores sejam exibidos de uma vez, reduzindo a confusão. 
e Ícones intuitivos e fáceis de usar, que qualquer iniciante pode acompanhar. 
e Dois conjuntos de ícones para indicar os estados não definido/excluído e desativado. 
* Uma guia “Todos os lados” única para definir as propriedades de todas as bordas de uma vez. 
e Linha computada que direciona você até a guia mais adequada durante a inspeção. 


1 Borda 


border-collapse los 


border-spacing 1 Jox Oox 
border-color : [A undefined 
border -top- j anta fina 
cobr : [4] undefineo 
bor der -right- o 
color , Pd uNnderneo 
bor der -bottom- PR 
cobr : IA undefined 
border-left-color : [4] undefined 
border-width : medium 

bor der -top- ENSIA 

width + AMORA 

bor der -right- oa 

width ps HE 

bor der -bottom- madi im 

width medi 

bor der -left- Espe 

width dd 
border-style : none 
border-top-style 1 none 

bor der -right- Dn 

style AMRS 

bor der -bottom- nuno 

stye cido 
border-left-style 1 none 


Propriedades de controle de bordas antes do Dreamweaver CC 2014 


Para o início 


[O Borda 


border 


o] 


width * medium 
style + none 


color : LL] undefined 


Propriedades de controle de bordas no Dreamweaver CC 2014 


Para obter mais informações, consulte Definição das propriedades de borda. 


Copiar e colar estilos 
Agora é possível copiar estilos de um seletor e colá-lo em outro. Você pode copiar todos os estilos ou copiar apenas a categoria de estilos 
específica como Layout, Texto e Borda. 


Clique com o botão direito no mouse em um seletor e escolha entre as opções disponíveis: 


Seletores 


FRrar regras CSS border-colapse 


COMPUTADO border-spacing 


[a F 


Ir para código == 
Sm background-color a a 


Copiar todos estilos voa 

Copiar estilos Copiar estilos de layout 
Colar estilos Copiar estilos de texto 

Duplicar Copiar estilos de borda 
Duplicar na consulta de mídia Copiar estilos de fundo 


«mobideSidePadding Copiar estilos de animação/transição 
mobileSidePadding Copiar outros estilos 


Copiar estilos usando o CSS Designer 


e Se um seletor não tiver estilos, as opções Copiar e Copiar todos os estilos estarão desabilitadas. 


e A opção Colar estilos fica desabilitada para sites remotos que não podem ser editados. Mas a opção Copiar e Copiar todos os estilos 
fica disponível. 

« É possível colar estilos já existentes parcialmente em um seletor (sobreposição). A união 
de todos os seletores é colada. 


* Também é possível usar Copiar e colar estilos para diferentes integrações de arquivos do CSS — Estilos de importação, link e inline. 


Caixas de texto de edição rápida 

O Dreamweaver agora inclui caixas de texto de edição rápida, onde você pode especificar o código abreviado para propriedades como margem, 
preenchimento, borda e raio da borda. Essa alteração foi feita para os usuários que preferem especificar o código em vez de usar o mouse ou o 
teclado para especificar propriedades. 


margin : 1 15px 20px 


20 px é) 20 px 


padding 


30em 
30em e) 30em 
30em 
position : ati 
idsdtadindddddsica es 
left: right: 
auto auto 


Aprimoramentos no fluxo de trabalho personalizado de propriedades 


Antes, você precisava clicar em + no painel Propriedades do CSS Designer para adicionar propriedades 'Other' (ou personalizadas). Agora, um 
grupo de caixas de texto - nome e valor da propriedade - torna-se prontamente disponível no final da lista Propriedades. Essas caixas de texto 
permitem digitar diretamente o nome da propriedade e seu valor sem precisar clicar em +. 


Para adicionar linhas de propriedades personalizadas adicionais, pressione Tab. 


O nome do grupo de propriedades 'other' é alterado para 'Custom'. 


Dome O Exibs conj. 


abciorar entr 


Atalhos do teclado 


Agora, você pode adicionar ou excluir seletores e propriedades CSS usando atalhos de teclado. Também é possível navegar entre os grupos de 
propriedades no painel Propriedades. 


Atalho Fluxo de trabalho 
CTRL + Alt +[Shift =] Adiciona Seletor (se o controle estiver na seção de seletor) 


Adiciona Seletor (se o controle estiver em qualquer lugar no 


CTRL + Al+ S Ria 
aplicativo) 


CTRL + Alt +[Shift =] Adiciona Propriedade (se o controle estiver na seção de 


propriedade) 

CTRL + Alt P Adiciona Propriedade (se o controle estiver em qualquer lugar no 
aplicativo) 

Select + Delete Exclui o seletor, se ele estiver selecionado 

CTRL + Alt + (PgUp/PgDn) Salta entre seções - enquanto estiver no subpainel propriedades 


Seletores mais específicosimenos específicos 
Com essa versão, o Dreamweaver oferece até três (ou menos) sugestões de regra ao adicionar um seletor. Você pode torná-lo mais ou menos 
específico usando as teclas de seta para cima/para baixo. 


«wsideshowe 
«Gwslideshove .slide 
«Owslideshow .side, active 


Use ? cu 1 para tornar o seletor menos/mais específico. 


Seletores mais específicos/menos específicos 


Rolar para a categoria 


Antes, quando você clicava na categoria Fundo ou Outro na parte superior do painel Propriedades do Designer CSS, essas categorias tornavam- 
se 'visible' no painel. As categorias não eram exibidas na parte superior do painel. 


Agora, as categorias Fundo e Outro (renomeadas para Personalizado) são exibidas na parte superior do painel quando você clica nelas. 


Propriedades + 
im Õ Em [E DJ Eb. conj 


a 


eu Fundo 
background-color PA 
background-image 


um 


gradient [4] 


background-postion 
background-sze 
background-chp 
background-repoat 
background-origin 
background- 
attachment 


box-shadow 


A 
es 


Para o início 


Suporte para conexões SFTP usando o arquivo de identidade 


Agora é possível autenticar conexões para um servidor SFTP com base na “Identity Key' (com ou sem um frase secreta). 
Nota: o Dreamweaver oferece suporte apenas aos arquivos chave OpenSSH. 


Para obter mais informações, consulte Conexões SFTP. 


- Para o início 
DesfazerlRefazer aprimoramentos 
Até aqui, para desfazer/refazer uma operação executada no painel do CSS Designer, era necessário clicar no arquivo CSS (em arquivos 
relacionados) e, em seguida, desfazer/refazer a operação. 


Com os aprimoramentos no recurso Desfazer/Refazer, você pode desfazer/refazer uma operação diretamente da Visualização dinâmica de um 
documento no painel do CSS Designer. Essas alterações serão refletidas automaticamente no arquivo CSS associado. Para informar a você que 
o arquivo relacionado foi alterado, a guia do arquivo afetado é destacada por um tempo (aproximadamente 8 segundos). 


e Quando você desfaz/refaz uma ação no painel do CSS Designer, a Visualização dinâmica é atualizada automaticamente. 
e Ao editar o documento, usando o código-fonte, e desfazer as alterações na Visualização dinâmica, a exibição muda para Visualização 
dividida e o código fonte relacionado é colocado em foco. 


Todas as ações de desfazer/refazer são registradas no nível do arquivo HTML. Isso significa que todas as alterações manuais realizadas em um 
arquivo CSS podem ser desfeitas de QUALQUER arquivo relacionado. Por exemplo, considere que o style1.css e o style2.css estão relacionados 
ao index.html. Se você adicionar estilos ao .h1 em stylei.css e, em seguida, os desfizer no style2.css, os estilos adicionados ao .h1 serão 
excluídos do stylet.css. 


Nota: para desfazer/refazer alterações em arquivos JavaScript, é necessário alternar para o respectivo arquivo JS e desfazer/refazer. 


Para o início 


Alterações no fluxo de trabalho do Business Catalyst e do PhoneGap Build 


O Business Catalyst e o PhoneGap Build são disponibilizados como complementos do Dreamweaver. É necessário instalar primeiro o Business 
Catalyst e o PhoneGap Build como extensões e, em seguida, usar esses serviços como antes. 


Para instalar as extensões do Business Catalyst e do PhoneGap Build, vá para Gerenciar > Buscar complementos, procure as extensões e 
instale-as. 


Consulte também: 
e Dreamweaver - Fluxo do trabalho do Business Catalyst 


e Compactação de aplicativos para dispositivos móveis 
» m” Para o início 
Alterações em extensões de acesso para Dreamweaver 


Agora é possível exibir e instalar extensões do Dreamweaver usando a Adobe Creative Cloud. Agora, as extensões são denominadas 
“Complementos”. 


Para procurar complementos na Adobe Creative Cloud, clique em Janela > Buscar complementos no Dreamweaver. A página Complementos da 
Adobe Creative Cloud é exibida. 


Ajuda 
V  Insenr Ctrl+F2 
/ Propriedades Ctrl+F3 
CSS Designer Shift +FLL 
Transições do CSS 
Business Catalyst Ctrl + Shift + B 
| Y Arquivos Fg 
Ativos 
Smppets Shuft+F9 


Amostras do jQuery Mobile 


Comportamentos Shuft+F4 
Histonco Shift +F LO 
Inspetor de codigo Fio 
Resultados » 


Gerenciar extensões... 


Layout do espaço de trabalho » 


Ocultar paineis F4 


Em cascata 
Empilhar 
Lado a lado 


Janela > Extensões no Dreamweaver CC 13.0 


[Janela | njuda 


| W Inserir CtrlsF2 
Y Propriedades Ctl+F3 
W  €SSDesigner Shift +FLL 
Transições do CSS 
Euisimess Catalyst Cole Shuft+B 
Arquivos Fg 
Ativos 
Smppets Shuft+F9 


Amostras do jQuery Mobile 


Comportamentos Shift + F4 
Historico Shut +F 10 
Inspetor de codigo Fio 
Resultados + 
Layout do espaço de trabalho + 
Ocultar pamess F4 
Em cascata 

Empilhar 

Lado a lado 


Janela > Buscar complementos no Dreamweaver CC 2014 


Para obter mais informações sobre como instalar os complementos, consulte Complementos. 
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Para o início 


Alterações para sincronizar configurações 


O recurso Sincronizar configurações no Dreamweaver permite manter as configurações sincronizadas com instâncias do Dreamweaver em seus 
computadores e na Creative Cloud. O Dreamweaver CC 2014 detecta automaticamente se você ativou o recurso Sincronizar configurações na 
versão anterior do Dreamweaver e permite importar as configurações da Creative Cloud. 


Quando você inicia o Dreamweaver CC 2014 pela primeira vez após a instalação, a seguinte caixa de diálogo é exibida: 


As configurações da versão anterior do Dreamweaver são sincronizadas com 
a Creative Cloud. Importe-as ou sincronize as configurações locais com a 


[] Sempre sincronizar configurações automaticamente 


Importar configurações de sincronização 


e Para importar as configurações que são armazenadas na Creative Cloud, clique em Importar config. sincr. 
Observação: essa opção não estará disponível posteriormente. 


e Para sincronizar as configurações na instância atual do Dreamweaver com a Creative Cloud, clique em Sincronização local. 


e Para sincronizar automaticamente as configurações desse ponto em diante, selecione Sempre sincronizar configurações 
automaticamente. 


e Para exibir as opções avançadas de configurações de sincronização, clique em Avançado. 


Artigo relacionado: 
e Sincronização de configurações do Dreamweaver com a Creative Cloud 


ã ru e E P iníci 
Envio de erros/solicitação de recursos diretamente do Dreamweaver RPA 


Agora é possível acessar diretamente ao formulário de Wishlist e de relatório de erro no Dreamweaver (Ajuda > Enviar solicitação de erro/recurso. 


Novidades no Dreamweaver 


Videos de novos recursos 


Mais sobre o Dreamweaver 


Ajuda e suporte b 
Enviar bug/solicitação de recurso 
Gerenciar minha conta 


Sair (SMITHAVOADOBE.COM) 


Atualizações... 


Sobre o Dreamweaver 


Enviar solicitação de erro/recurso no menu Ajuda 


Para o início 


Help Center 
Aprenda a usar novos recursos e como abordar tarefas comuns do Dreamweaver com o novo Help Center. 


Ao contrário das versões anteriores, agora você pode descobrir novos recursos e fluxos de trabalho eficazes ao iniciar o Dreamweaver pela 
primeira vez. É possível ignorar o tour do recurso novo ou desativar a mensagem de ajuda no aplicativo quando desejar. Se necessário, você 
pode ativá-los novamente. 

e Procedimento de novos recursos 

e Mensagens no aplicativo 

* Mensagens no produto 

e Desativar ou redefinir mensagens no aplicativo e no produto 
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Procedimento para novos recursos 

O Dreamweaver agora inclui um minitour dos novos recursos que são fornecidos na versão mais recente. 
Além de apresentar os novos recursos, o tour também direciona você até uma galeria de vídeos, 

onde você pode ver os novos recursos em ação. 


O procedimento para novos recursos ou a opção de minitour são exibidos assim que você 
inicia o Dreamweaver. Você também tem a opção de ignorar o tour e ir para a 
Tela de boas-vindas e continuar trabalhando. 


Observação: o procedimento para novos recursos é exibido durante a instalação ou atualização do 
Dreamweaver ou quando você exclui preferências e reinicia o Dreamweaver. 


Olá, Casey 


Bem-vindo à Dreamweaver CC. 
Criamos um rápido tour pelos novos recursos desta versão. 


Você conhece a Dreamweaver CC? 


| Não. Sou iniciante. | 


Tour de novos recursos 


Veja um resumo do que é exibido no procedimento para novos recursos: 
* Mensagem de boas-vindas. Você também é solicitado a especificar se usou o Dreamweaver CC anteriormente para que a experiência 
possa ser personalizada adequadamente. 
* Introdução recurso por recurso e uma breve descrição (com uma opção para ignorar o tour). 
e Galeria de vídeos contendo os vídeos relacionados aos novos recursos. 


Galeria de vídeos 


Ao final do procedimento para novos recursos, a galeria de vídeos é exibida com vídeos 
relacionados aos novos recursos. Quando você passa o mouse sobre as miniaturas, uma breve 
descrição do vídeo é exibida. 
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Introdução 


body homepage 
div aneader 


section , afirse man 


Uso da CSS 


Extração de PSOs Uso do Typekit 


Béhance DISCOVER 


Creative Cloud Files 


Uso do arm 


Galeria de vídeos 


Nota: você pode acessar o procedimento para novos recursos e a galeria de vídeos a qualquer momento 
enquanto usa o Dreamweaver. Para fazer isso, vá para o menu Ajuda ou a tela Bem-vindo e clique na opção necessária. 


Mensagens no aplicativo 


O Dreamweaver agora apresenta dicas para aumentar a produtividade enquanto você trabalha 
em seus projetos. O objetivo dessas dicas é ajudar você a executar de forma mais eficiente a tarefa 
que está realizando. 


As dicas são baseadas em 'triggers' específicos. Por exemplo, quando você clica nos seletores Tag 

em qualquer exibição ou clica com o botão direito do mouse em um elemento para inspecioná-lo, o prompt para a 
Visualização rápida de elemento é exibido. A Visualização rápida de elemento é um recurso novo que ajuda a visualizar 
e editar a marcação HTML de forma mais fácil do que a de outros métodos que você já experimentou (acionadores). 


Depois que você tiver utilizado as sugestões apresentadas, o prompt no aplicativo não será exibido novamente 
para o mesmo acionador. Porém, o prompt será exibido novamente para os outros 
triggers identificados. 


É possível desativar a exibição de mensagens no aplicativo em Preferências. Para obter 
mais informações, consulte Desativar ou redefinir mensagens no aplicativo e no produto. 


Exemplos de mensagens no aplicativo: 


Exibição rápida do elemento 
Acionadores: 


e Os seletores de tags (todas as exibições) são clicados 


e Dinâmico + Inspecionar ou clique com o botão direito do mouse + Inspecionar sobre um elemento 


Mensagem: 


Use a Visualização rápida de elemento p/ 
exibir, editar e organizar elementos HTML 


Formato | Parágrafo |w 


Em rece | am 


Manhimiat - 1 
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Inspetor de propriedades da visualização dinâmica para classes e IDs 
Acionadores: 


e Editar ID usando PI em Visualização de design 


Mensagem: 


x Untitled-1* 


Mensagens no produto 


O Dreamweaver integra-se perfeitamente com muitos outros aplicativos da Creative Cloud 
e as mensagens no produto apresentam esses fluxos de trabalho de integração. Usando esses 
fluxos de trabalho, você pode utilizar a Adobe Creative Cloud e suas ofertas de uma maneira melhor. 


As mensagens no produto são exibidas com base nos 'triggers' identificados. Por exemplo, ao 
tentar usar as Transições do CSS, o fluxo de trabalho do 'Edge Animate' é sugerido por meio da 
mensagem no produto. 


Uma mensagem no produto contém uma breve descrição do 

fluxo de trabalho alternativo (ou melhor) que você pode usar em um cenário específico. Ela também inclui uma miniatura de vídeo em que você 
pode clicar para ver um vídeo que explica o fluxo de trabalho. O botão Mais informações vincula você 

a um item/blog que fornece mais informações. 


As mensagens no produto são exibidas somente uma vez quando o acionador identificado ocorre. 


Nota: para ver as mensagens novamente, redefina a configuração de ajuda no aplicativo em Preferências 
Para obter mais informações, consulte Desativar ou redefinir mensagens no aplicativo e no produto. 


Exemplos de mensagens no produto:: 


Edge Animate 
Acionador: 


e Clique em Transição do CSS e depois em + 


Mensagem: 


e seus projetos 


Mais informações 


Parfait 
Acionador: 


e Inserir imagem > Editar configurações da imagem 


Mensagem: 


14 


Do PSD para o Dreamweaver num 
instante 


Mais informações 


Desativar ou redefinir mensagens no aplicativo e no produto 
Vá para a caixa de diálogo Preferências > Acessibilidade e faça o seguinte: 


e Para desativar as mensagens, desmarque a caixa de seleção Mostrar ajuda no aplicativo. 


Se você reativá-las, as mensagens 
exibidas anteriormente não serão exibidas. Serão exibidas apenas as mensagens 
que não foram exibidas antes. 


e Para ver as mensagens exibidas antes, clique em Redefinir. 


Categoria Acessibilidade 


Geral 

Codificação DOT ONE Mostrar os atributos ne inserção 

Comparar arquivos 1! Mídia 

Copiartcolar 

pos o eras, is Manter foco no painel so abrir 

Eis css * Processamento fora da tela (desativar ao usar letores de tela) 
ntes 

Formato do código 

Novo documento 

Reske 

Regravação da códgo 

Sincrongar configurações 

site 

Tamanhos de janela 

Tipos de arquivos editores 

Validador W3C 

Visualizar no navegador 


F7 Ajuda no apl. 


[ada] (apar) [ Fechar] 


Preferências para desativar ou redefinir a ajuda no aplicativo 


Para o início 


Alterações no menu Ajuda 


Agora, o menu Ajuda está reorganizado para fornecer acesso rápido ao procedimento de novos recursos, à galeria de vídeo, aos recursos de 
ajuda e aprendizagem e ao formulário de envio de solicitação de erro/recurso. 
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Ajuda do Dreamweaver FL 
Central de suporte do Dreamweaver 


Dreamweaver Exchange 
Foruns online da Adobe 


Conchur/Atualizar perfil da ID da Adobe... 

Sair (CASEVDADORE.COM) 

Atualizações... 

Programa de aprimoramento de produtos da Adobe... 


Sobre o Dreamweaver 


Menu Ajuda antes do Dreamweaver CC 2014 


Novidades no Dreamweaver 
Videos de novos recursos 
Mais sobre o Dreamweaver 
Ajuda e suporte b 


Enviar bug/'solicitação de recurso 


Gerenciar minha conta 
Sair (CASEYOADOBE.COM) 
Atualizações... 


Sobre o Dreamweaver 


Menu Ajuda do Dreamweaver CC 2014 


As publicações do Twitter?” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Área de trabalho e fluxo de trabalho 


Fluxo e área de trabalho do Dreamweaver 


Visão geral do fluxo de trabalho do Dreamweaver 
Visão geral do layout da área de trabalho 

Visão geral dos elementos da área de trabalho 
Visão geral da janela Documento 

Visão geral da barra de ferramentas Documento 
Visão geral da barra de ferramentas Padrão 
Visão geral da barra de ferramentas Navegação do navegador 
Visão geral da barra de ferramentas Codificação 
Visão geral da barra Status 

Visão geral do Inspetor de propriedades 

Visão geral do painel Inserir 

Visão geral do painel Arquivos 

Css Designer 

Visão geral das guias visuais 


Para o início 


Visão geral do fluxo de trabalho do Dreamweaver 
Você pode usar várias abordagens para criar um site. Entre elas: 
Planejar e configurar seu site 


Determine para onde os arquivos são direcionados e examine os requisitos do site, os perfis do público-alvo e as metas do site. Além disso, 
avalie os requisitos técnicos, como acesso do usuário, além de restrições de navegador, plug-in e download. Depois de organizar suas 
informações e determinar uma estrutura, você pode começar a criar seu site. (Consulte Sobre os sites do Dreamweaver.) 


Organizar e gerenciar os arquivos do seu site 


No painel Arquivos, você pode adicionar, excluir e renomear arquivos e pastas com facilidade para alterar a organização conforme necessário. O 
painel Arquivos também tem muitas ferramentas de gerenciamento de site, transferência de arquivos de e para um servidor remoto, configuração 
de um processo de Check-in/Check-out para impedir a substituição e a sincronização dos arquivos em sites locais e remotos. No painel Ativos, 
você pode organizar facilmente os ativos em um site; é possível arrastar a maioria dos ativos diretamente do painel Ativos para um documento do 
Dreamweaver. É possível também usar o Dreamweaver para gerenciar os aspectos dos seus sites do Adobe? Contribute?. (Consulte 
Gerenciamento de arquivos e pastas e Gerenciamento de ativos e bibliotecas.) 


Fazer o layout das páginas da Web 


Selecione a técnica de layout mais adequada para você ou use as opções de layout do Dreamweaver em conjunto para criar a aparência do seu 
site. É possível usar layouts de grade fluida do Dreamweaver ou modelos padrão para começar. Você pode criar páginas novas baseadas no 
modelo do Dreamweaver e atualizar o layout dessas páginas automaticamente quando o modelo for alterado. Se desejar exibir vários elementos 
ao mesmo tempo em um navegador, você pode usar quadros para criar o layout de documentos. (Consulte Criação de páginas com o CSS e 
Aplicação de layout às páginas com HTML.) 


Adicionar conteúdo a páginas 


Adicione ativos e elementos de design como texto, imagens, imagens de sobreposição, mapas de imagem, cores, filmes, sons, links HTML, 
menus de salto e muito mais. Para esses elementos, você pode usar recursos integrados de criação de página, como títulos e planos de fundo, 
digitar diretamente na página ou importar conteúdo de outros documentos. O Dreamweaver também fornece ferramentas para maximizar o 
desempenho do site e testar páginas para garantir a compatibilidade com diferentes navegadores da Web. (Consulte Adição de conteúdo às 
páginas.) 


Criar páginas com programação manual 


A programação manual de páginas da Web é outra abordagem de criação de páginas. O Dreamweaver fornece ferramentas fáceis de usar de 
edição visual, mas também oferece um ambiente de programação sofisticado; você pode usar qualquer uma das abordagens ou as duas para 
criar e editar páginas. (Consulte Trabalho com código de página.) 


Configurar um aplicativo da Web para conteúdo dinâmico 


Muitos sites contêm páginas dinâmicas que permitem aos visitantes visualizar as informações armazenadas nos bancos de dados e que, 
normalmente, permitem que alguns visitantes adicionem novas informações e editem as informações nos bancos de dados. Para criar tais 
páginas, você precisa primeiro configurar um servidor da Web e um servidor de aplicativo, criar ou modificar um site do Dreamweaver e conectar- 
se a um banco de dados. (Consulte Preparação para criar sites dinâmicos.) 
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Criar páginas dinâmicas 


No Dreamweaver, você pode definir uma variedade de fontes de conteúdo dinâmico, incluindo conjuntos de registros extraídos de bancos de 
dados, parâmetros de formulário e componentes JavaBeans. Para adicionar o conteúdo dinâmico a uma página, basta arrastá-lo até a página. 


Você pode definir a página para exibir um ou vários registros de uma vez, exibir mais de uma página de registros, adicionar links especiais para 
passar de uma página de registros para a próxima (e vice-versa) e criar contadores de registro para ajudar os usuários a rastrearem os registros. 
(Consulte Tornar as páginas dinâmicas.) 


Testar e publicar 


O teste das páginas é um processo contínuo que acontece durante todo o ciclo de desenvolvimento. No final do ciclo, o site é publicado em um 
servidor. Muitos desenvolvedores também incluem uma manutenção periódica para assegurar que os sites permaneçam atualizados e funcionais. 
(Consulte Envio e recebimento de arquivos do servidor.) 


Para o início 


Visão geral do layout da área de trabalho 


A área de trabalho do Dreamweaver permite visualizar documentos e propriedades de objetos. A área de trabalho também coloca muitas 
operações comuns em barras de ferramentas para que você possa fazer alterações rapidamente em seus documentos. 


Dw Jesus Edita Eli Dreesie Modelo Formutar Comendus Sha lerelo Aguda 
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Área de trabalho do Dreamweaver 
A. Barra de ferramentas Documento B. Barra de aplicativos C. Janela do documento D. Alternador da área de trabalho E. Grupos de painéis F. 
Painel Arquivos G. Inspetor de propriedades H. Seletor de tags 


Para o início 


Visão geral dos elementos da área de trabalho 
A área de trabalho inclui os seguintes elementos: 
Nota: o Dreamweaver fornece muitos outros painéis, inspetores e janelas. Para abrir os painéis, os inspetores e as janelas, use o menu Janela. 


A tela de boas-vindas Permite abrir um documento recente ou criar um novo documento. Na tela de Boas-vindas, você também pode saber 
mais sobre o Dreamweaver fazendo um tour do produto ou acessando o conteúdo da ajuda e de aprendizagem. 


A barra de aplicativos Localizada na parte superior da janela do aplicativo, contém o alternador da área de trabalho, os menus (apenas no 
Windows) e outros controles do aplicativo. 


A barra de ferramentas de documento Contém botões que oferecem opções para as diferentes visualizações da janela Documento (como a 
Visualização de design e a Visualização de código), várias opções de visualização e algumas operações comuns, como visualização em um 
navegador. 


A barra de ferramentas Padrão Para exibir a barra de ferramentas Padrão, selecione Visualizar > Barras de ferramentas > Padrão. A barra de 
ferramentas contém botões para operações comuns nos menus Arquivo e Editar: Novo, Abrir, Navegar no Bridge, Salvar, Salvar tudo, Imprimir 
código, Cortar, Copiar, Colar, Desfazer e Refazer. 
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A barra de ferramentas de codificação (exibida somente na Visualização de código) Contém botões que permitem executar muitas operações 
padrão de codificação. 


A janela do documento Exibe o documento atual à medida que é criado e editado. 


O Inspetor de propriedades Permite visualizar e alterar diversas propriedades do objeto ou texto selecionado. Cada objeto tem propriedades 
diferentes. 


O seletor de tags Localizado na barra Status na parte inferior da janela Documento. Mostra a hierarquia de tags em torno da seleção atual. 
Clique em qualquer tag da hierarquia para selecionar a tag e todo seu conteúdo. 


Painéis Ajuda a monitorar e modificar seu trabalho. Os exemplos incluem o painel Inserir, o painel CSS Designer e o painel Arquivos. Para 
expandir um painel, clique duas vezes na guia correspondente. 


O painel Inserir Contém botões para inserir vários tipos de objetos em um documento, como imagens, tabelas e elementos de mídia. Cada 
objeto é uma parte do código HTML que permite definir vários atributos à medida que são inseridos. Por exemplo, você pode inserir uma tabela 
clicando no botão Tabela no painel Inserir. Se você preferir, pode inserir objetos usando o menu Inserir em vez do painel Inserir. 


O painel Arquivos Permite gerenciar arquivos e pastas, sejam eles parte de um site do Dreamweaver ou de um servidor remoto. O Painel 
Arquivos também permite acesso a todos os arquivos no seu disco local. 


a « P, iníci 
Visão geral da janela Documento india 


A janela Documento mostra o documento atual. Para acessar um documento, clique na guia correspondente. 


É possível selecionar qualquer uma das seguintes visualizações: 


Visualização de design (Visualizar > Design) Um ambiente de design para o layout visual da página, a edição visual e o desenvolvimento rápido 
do aplicativo. Nessa visualização, o Dreamweaver exibe uma representação visual totalmente editável do documento, semelhante ao que você 
veria ao exibir a página no navegador. 


Visualização de código (Visualizar > Código) Um ambiente com codificação manual para gravação e edição em HTML, JavaScript e qualquer 
outro tipo de código. 


Visualização Dividir código (Visualizar > Dividir código) Uma versão dividida da Visualização de código que possibilita rolar pelo trabalho em 
diferentes seções do documento ao mesmo tempo. 


Visualização de código e de design (Visualizar > Código e Design) Permite ver as Visualizações de código e de Design para o mesmo 
documento em uma única janela. 


Visualização dinâmica (Visualizar > Visualização dinâmica) De modo semelhante à Visualização de design, a Visualização dinâmica exibe uma 
representação mais realista de como seu documento será exibido em um navegador, e permite que você interaja com o documento exatamente 
da maneira como faria em um navegador. Você pode editar elementos HTML diretamente na Visualização dinâmica e visualizar imediatamente as 
alterações na mesma exibição. Para obter mais informações sobre a edição na Visualização dinâmica, consulte Editar elementos HTML na 
Visualização dinâmica. 


Visualização dinâmica de código (Visualizar > Código dinâmico) Disponível somente ao visualizar um documento na Visualização dinâmica. A 
Visualização dinâmica de código exibe o código real que o navegador usa para executar a página, e pode alterar dinamicamente à medida que 
você interagir com a página na Visualização dinâmica. A Visualização dinâmica de código não é editável. 

Quando a janela Documento é maximizada (o padrão), as guias aparecem na parte superior da janela Documento mostrando os nomes de 


arquivos de todos os documentos abertos. O Dreamweaver mostrará um asterisco após o nome de arquivo se você tiver feito alterações que 
ainda não tinham sido salvas. 


O Dreamweaver também exibe a barra de ferramentas Arquivos relacionados abaixo da aba do documento (ou abaixo da barra de título do 
documento, se você estiver exibindo documentos em janelas distintas). Os documentos relacionados estão associados ao arquivo atual, como 
arquivos CSS ou JavaScript. Para abrir um desses arquivos relacionados na janela Documento, clique no seu nome de arquivo na barra de 
ferramentas Arquivos relacionados. 


ao Para o início 
Visão geral da barra de ferramentas Documento 
A barra de ferramentas Documento contém botões que permitem alternar entre diferentes visualizações do seu documento rapidamente. A barra 
de ferramentas também contém alguns comandos comuns e opções relacionadas à visualização do documento e à sua transferência entre sites 
locais e remotos. 


== | == [ E == Tito: Documento pe apre 4 


Barra de ferramentas Documento 
A. Mostrar visualização de código B. Mostrar visualização de código e de design C. Mostrar visualização de design D. Visualização dinâmica E. 
Visualizar/depurar no navegador F. Título do documento G. Gerenciamento de arquivos 
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Barra de ferramentas Documentos com layout de Grade fluida 
A. Mostrar visualização de código B. Mostrar visualização de código e de design C. Mostrar visualização de design D. Visualização dinâmica E. 
Visualizar/depurar no navegador F. Título do documento G. Gerenciamento de arquivos H. Mostrar/ocultar grades fluidas 


As opções seguintes aparecem na barra de ferramentas Documento: 


Mostrar visualização de código Exibe somente a Visualização de código na janela Documento. 


Mostrar visualizações de código e de design Divide a janela Documento entre as Visualizações de código e de design. Ao selecionar essa 
visualização combinada, a opção Visualização de design na parte superior torna-se disponível no menu Opções de visualização. 


Mostrar Visualização de design Exibe somente a Visualização de design na janela Documento. 


Nota: se você estiver trabalhando com XML, JavaScript, CSS ou outros tipos de arquivo baseado em código, não será possível visualizar os 
arquivos na Visualização de design e os botões Design e Dividir estarão esmaecidos. 


Visualização dinâmica Exibe uma visualização do documento baseada no navegador e interativa. Você também pode editar elementos HTML 
na Visualização dinâmica. 


Visualizar/depurar no navegador Permite visualizar ou depurar o documento em um navegador. Selecione um navegador no menu pop-up. 
Gerenciamento de arquivos Exibe o menu pop-up Gerenciamento de arquivos. 


Título do documento Permite inserir um título para o documento, a ser exibido na barra de título do navegador. Se o documento já tiver um 
título, esse título será exibido nesse campo. 


a . Ra 
Visão geral da barra de ferramentas Padrão PRA 


A barra de ferramentas Padrão contém botões para operações comuns nos menus Arquivo e Editar: Novo, Abrir, Navegar no Bridge, Salvar, 
Salvar tudo, Imprimir código, Cortar, Copiar, Colar, Desfazer e Refazer. Use esses botões do mesmo modo como utilizaria os comandos de menu 
equivalentes. 


o . UERR 
Visão geral da barra de ferramentas Navegação do navegador dor e oca 


A barra de ferramentas Navegação do navegador torna-se ativa na Visualização dinâmica e mostra o endereço da página que você está vendo 


na janela Documento. A Visualização dinâmica age como um navegador comum, desta forma, mesmo que você navegue até um site externo ao 
seu site local (por exemplo, http:/Awvww.adobe.com/br), o Dreamweaver carregará a página na janela Documento. 


CE http:fflocalhost/wordpressl | fa 


A B c 


Barra de ferramentas de navegação do navegador 
A. Controles do navegador B. Caixa de endereço C. Opções de visualização dinâmica 


Por padrão, os links não estão ativos na Visualização dinâmica. Os links não ativos permitem que você selecione ou clique no texto de link na 
janela Documento sem ser levado à outra página. Para testar links na Visualização dinâmica, você pode ativar o clique único ou o clique 
contínuo. Basta selecionar Seguir links ou Seguir links continuamente no menu de opções Visualizar à direita da caixa de endereço. 


a, er] js P, iníci 
Visão geral da barra de ferramentas Codificação PR 


A barra de ferramentas Codificação contém botões que permitem realizar operações de codificação padrão, como contrair e expandir seleções de 
código, realçar código inválido, aplicar e remover comentários, recuar código e inserir snippets de código usados recentemente. A barra de 
ferramentas Codificação aparece verticalmente no lado esquerdo da janela Documento e é visível apenas quando a Visualização de código é 
exibida. 
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Barra de ferramentas Codificação (CC) 


Não é possível desencaixar ou mover a barra de ferramentas Codificação, mas você pode ocultá-la (Visualizar > Barras de ferramentas > 
Codificação). 


Você também pode editar a barra de ferramentas Codificação para exibir mais botões (como Quebra automática de palavra, Mostrar caracteres 
ocultos e Recuar automaticamente) ou ocultar botões que não deseja usar. No entanto, para fazer isso, você deve editar o arquivo XML que gera 
a barra de ferramentas. Para obter mais informações, consulte Extensão do Dreamweaver. 


E = ás P. iníci 
Visão geral da barra Status REA 


A barra Status na parte inferior da janela Documento fornece informações adicionais sobre o documento que você está criando. 


A B cÇ [] j 
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Barra de status 
A. Seletor de tags B. Tamanho de dispositivo móvel C. Tamanho de digitalizador D. Tamanho de desktop E. Tamanho da janela 


Seletor de tags 


Mostra a hierarquia de tags em torno da seleção atual. Clique em qualquer tag da hierarquia para selecionar a tag e todo seu conteúdo. Clique 
em <body> para selecionar o corpo inteiro do documento. Para definir os atributos class ou ID de uma tag no seletor de tags, clique com o 
botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na tag e selecione uma classe ou ID no menu de contexto. 
Tamanho de dispositivo móvel 


Mostra uma visualização do documento no tamanho do dispositivo móvel - 480 x 800 por padrão. Para alterar o tamanho padrão, clique no menu 
pop-up Tamanho da janela > Editar tamanhos. 


Tamanho de digitalizador 


Mostra uma visualização do documento no tamanho do digitalizador - 768 x 1024 por padrão. Para alterar o tamanho padrão, clique no menu 
pop-up Tamanho da janela > Editar tamanhos. 


Tamanho de desktop 


Mostra uma visualização do documento no tamanho de desktop - largura 1000 px por padrão. Para alterar o tamanho padrão, clique no menu 
pop-up Tamanho da janela > Editar tamanhos. 


Menu pop-up Tamanho da janela 


(Não disponível na Visualização de código.) Permite redimensionar a janela Documento para dimensões pré-determinadas ou personalizadas. 
Quando você altera o tamanho da visualização de uma página na visualização de design ou dinâmica, somente as dimensões da visualização 
são modificadas. O tamanho do documento permanece inalterado. 
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Além de tamanhos predeterminados e personalizados, o Dreamweaver também enumera os tamanhos especificados em uma consulta de mídia. 
Quando você seleciona um tamanho que corresponde a uma consulta de mídia, o Dreamweaver usa a consulta de mídia para exibir a página. 
Você também pode alterar a orientação de página para visualizar a página de dispositivos móveis onde o layout da página é alterado com base 
na orientação do dispositivo. 


Para o início 


Visão geral do Inspetor de propriedades 


O Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento selecionado de página atual, como texto ou um 
objeto inserido. O conteúdo do Inspetor de propriedades varia dependendo do elemento selecionado. Por exemplo, se você selecionar uma 
imagem na sua página, o Inspetor de propriedades mudará para mostrar as propriedades da imagem (como o caminho do arquivo para a imagem, 
a largura e a altura da imagem, a borda ao redor da imagem, se houver, etc.). 
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Inspetor de propriedades 


O Inspetor de propriedades está na borda inferior da área de trabalho por padrão, mas você pode desencaixá-lo e torná-lo um painel flutuante na 
área de trabalho. 


E ia a E P, iníci 
Visão geral do painel Inserir cics, 


O painel Inserir contém botões para criação e inserção de objetos, como tabelas, imagens e links. Os botões são organizados em várias 
categorias, que podem ser alternadas pela seleção da categoria desejada na lista suspensa na parte superior. 


Inserir 


Comum Y 

Div 

HTMLS video 
Tela de desenho 
Imagens 

Tabela 

Head 

Script 

Hyperlink 


Link do email 


Lobo dE 


Régua horizontal 


Data 


E] El 


IFrame 


ER] v Caractere 


RC 
Painel Inserir 


Algumas categorias têm botões com menus pop-up. Ao selecionar uma opção em um menu pop-up, essa opção se transforma na ação padrão 
do botão. Por exemplo, se você selecionar Alocador de espaço de imagem no menu pop-up do botão Imagem, na próxima vez em que clicar no 
botão Imagem, o Dreamweaver inserirá um alocador de espaço de imagem. Sempre que você seleciona uma nova opção no menu pop-up, a 
ação padrão do botão muda. 


O painel Inserir está organizado nas seguintes categorias: 


Comum Permite criar e inserir elementos usados com mais frequência como as tags div e objetos, como imagens e tabelas. 
Estrutura Permite inserir elementos estruturais como as tags div, títulos, listas, parágrafos, cabeçalhos e rodapés. 


Mídia Permite inserir elementos de mídia como uma composição do Edge Animate, áudio e vídeo HTMLS5 e áudio e vídeo Flash. 
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Formulário Contém botões para criar formulários e inserir elementos de formulário, como pesquisa, mês e senha. 
jQuery Mobile Contém botões para construir sites que usem o jQuery Mobile. 
UI do jQuery Permite inserir elementos de UI do jQuery Mobile como acordeão, controles deslizantes e botões. 


Modelos Permite salvar o documento como um modelo e marcar áreas específicas como editáveis, opcionais, repetitivas ou áreas opcionais 
editáveis. 


Favoritos Permite agrupar e organizar os botões do painel Inserir que você mais utiliza em um lugar comum. 


Para o início 


Visão geral do painel Arquivos 


Use o painel Arquivos para visualizar e gerenciar os arquivos no seu site do Dreamweaver. 


ue cjmmtos  JHO|* tivtas 


5 - Site - pluralist (C:l1.. 13/05/2014 01:09 - 
animateAssets 13/05/2014 01:08 - 
images 13/05/2014 01:08 - 
iQueryássets 13/05/2014 01:08 - 
vídeo 13/05/2014 01:08 - 
bollerplate.css 10KB Documento de folha de estilos em cascata 01/03/2013 03:33 
camping.hkml 11KB Documento HTML 01/03/2013 03:33 
index-Form, html 16KB Documento HTML 01/03/2013 03:33 
umento HTML 
indext html 17KB Documento HTML 01/03/2013 03:33 
products.htrmi 13KB Documento HTML 01/03/2013 03:33 
respond.min.js “KB Arquivo de script do JScript 01/03/2013 03:33 
screen.css 34KB Documento de folha de estilos em cascata 01/03/2013 03:33 
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Litens locais selecionados, totalizando 17204 bytes. 


Ao exibir os sites, os arquivos ou as pastas no painel Arquivos, você pode alterar o tamanho da área de visualização e expandir ou contrair o 
painel Arquivos. Quando o painel Arquivos está contraído, ele exibe os conteúdos do site local, do site remoto, do servidor de teste ou do 
repositório SVN como uma lista de arquivos. Quando expandido, ele exibe o site local e o site remoto, o servidor de teste ou o repositório SVN. 


Para os sites do Dreamweaver, é possível também personalizar o painel Arquivos alterando a visualização do site local ou do site remoto que 
aparece no painel contraído, por padrão. 


As pastas no painel Arquivos são exibidas em cores diferentes baseadas na visualização - local, remota ou teste. 


Exibição Local 


Local Files [ 
El mB Site -SiteName... 
-)... (0 images 
Bm demo 
[=| arrow.gif 


Windows 


w € sSite-SiteName... 
Db EM images 
fã] | index.html 


Mac 


Exibição Servidor remoto 
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Windows 


vo 
b D3 images 
TB) index.htm! 


IServer! 


Mac 


Exibição Servidor de teste 


v O JServer/ 


b DS images 
fB] | index.html 
Windows 


v 
b DS images 
fã] index.html 


IServer/ 


Mac 


Exibição Repositório 


Windows 


Repository Files 
v É JServer/ 
b DD images 
f] | index.html 


Mac 


O painel Arquivos interage com o servidor em intervalos regulares para atualizar o conteúdo. Uma mensagem de erro será exibida se você tentar 
realizar alguma ação no painel Arquivos quando essas atualizações automáticas estiverem sendo executadas. Para desativar as atualizações 
automáticas, abra o menu de opções do painel Arquivos e desmarque Atualização automática no menu Visualizar. 


Para atualizar os conteúdos do painel automaticamente, use o botão Atualizar no painel. No entanto, o status de check-out atual dos arquivos é 
atualizado apenas quando as atualizações automáticas estão ativadas. 


Para o início 


CSS Designer 


Painel do CSS Designer (Janela > CSS Designer) é um Inspetor de propriedade do CSS que permite criar “visualmente” estilos e arquivos do 
CSS e definir propriedades, junto com consultas de mídia. 
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TODAS AS ORIGENS 
boilerplate.css 


DiMicia : GLOBAL 


Seletores 


article, aside, details, figcaption, figure, footer, h... 
audio, canvas, vídeo 
audio:not([controls]) 
[hidden] 


Propriedades 


a O =) 


width 

height 

min-vidth 
min-height 
max-wicdth 
max-height 
margin 


Painel CSS Designer 


O painel CSS Designer consiste nos seguintes painéis: 


Origens Lista todas as folhas de estilo do CSS associadas ao documento. Com esse painel, você pode criar e anexar um CSS ao documento ou 
definir estilos no documento. 


(OMídia Lista todas as consultas de mídia na origem selecionada no painel Origens. Se você não selecionar um CSS específico, esse painel 
exibirá todas as consultas de mídia associadas ao documento. 


Seletores Lista todos os seletores na origem selecionada no painel Origens. Se você também selecionar uma consulta de mídia, esse painel 
reduzirá a lista de seletores da consulta de mídia em questão. Se nenhum CSS ou consulta de mídia forem selecionados, esse painel exibirá 
todos os seletores no documento. 


Quando você seleciona Global no painel (QMídia, todos os seletores não incluídos em uma consulta de mídia da fonte selecionada são exibidos. 


Propriedades Exibe as propriedades que você pode definir para o seletor especificado. Para obter mais informações, consulte Definição de 
propriedades. 


O CSS Designer é sensível ao contexto. Isso significa que, para qualquer contexto fornecido ou elemento de página selecionado, você pode exibir 
as propriedades e os seletores associados. Caso contrário, quando você selecionar um seletor no CSS Designer, as consultas de mídia e origem 
associadas serão realçadas nos respectivos painéis. 


Para obter mais informações, consulte painel CSS Designer. 
ada ; ” à Para o início 
Visão geral das guias visuais 


O Dreamweaver fornece vários tipos de guias visuais para ajudar você a projetar documentos e a prever sua aparência nos navegadores. Você 
pode executar qualquer um dos seguintes procedimentos: 
e Ajuste imediatamente a janela Documento para um tamanho de janela desejado e veja como os elementos se ajustam na página. 


* Use uma imagem de decalque como fundo da página para ajudar a duplicar um projeto criado em um aplicativo de ilustração ou edição de 
imagens, como o Adobeê Photoshop9 ou o AdobeO FireworksO. 


e Use réguas e guias para fornecer uma pista visual do posicionamento preciso e do redimensionamento dos elementos de página. 
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* Use a grade para posicionamento e redimensionamento preciso dos elementos absolutamente posicionados (elementos PA). 


As marcas de grade na página ajudam a alinhar os elementos PA e, quando o encaixe está ativado, os elementos PA se encaixam 
automaticamente no ponto de grade mais próximo ao serem movidos ou redimensionados. (Outros objetos, como imagens e parágrafos, não 
se encaixam na grade.) O encaixe funciona independentemente da visibilidade da grade. 


e Trabalho na janela Documento 

e Sobre a Visualização dinâmica 

e Informações gerais sobre a codificação no Dreamweaver 
e Visualização de páginas na Visualização dinâmica 

e Configurações das preferências de codificação 

e Visualizar e editar o conteúdo do cabeçalho 

e Uso de auxílios visuais para layout 

* Visualização de páginas no Dreamweaver 

e Inserir código com a Barra de ferramentas de codificação 
e Definir o tamanho da janela e a velocidade da conexão 

e Mais zoom e Menos zoom 

e Redimensionar a janela Documento 

e Definir o tempo de download e as preferências de tamanho 
e Gerenciar janelas e painéis 

e Usar Inspetor de propriedades 

e Uso do painel Inserir 

e Trabalhar com arquivos no painel Arquivos 

e Uso de auxílios visuais para layout 


As publicações do Twitter?” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Personalização da área de trabalho do Dreamweaver 


Gerenciamento de janelas e painéis 

Salvamento e alternância de espaços de trabalho 

Exibir documentos com abas (Dreamweaver Macintosh) 

Ativação de ícones coloridos 

Ocultar e exibir a tela de boas-vindas do Dreamweaver 

Sobre a personalização do Dreamweaver em sistemas de vários usuários 
Definir preferências gerais do Dreamweaver 

Definir as preferências de Fontes do Dreamweaver 

Personalizar cores de realce do Dreamweaver 

Restaurar preferências padrão 


E 7 ER Para o início 
Gerenciamento de janelas e painéis 


É possível criar um espaço de trabalho personalizado movendo e manipulando janelas de Documento e painéis. Também é possível salvar 
espaços de trabalho e alternar entre eles. No Fireworks, renomear áreas de trabalho personalizadas pode levar a um comportamento inesperado. 


Nota: os exemplos a seguir usam o Photoshop para fins demonstrativos. A área de trabalho funciona da mesma forma em todos os produtos. 


Reorganizar, encaixar e flutuar as janelas de documentos 
Quando você abre mais que um arquivo, as janelas de Documento são tabuladas. 


e Para reorganizar a ordem das janelas de Documento tabuladas, arraste uma guia de janela para o novo local no grupo. 
e Para desencaixar (flutuar ou separar a guia) uma janela de documento de um grupo de janelas, arraste a guia da janela para fora do grupo. 


Nota: No Photoshop você também pode selecionar Janela > Organizar > Flutuar na janela para flutuar uma única janela de documento ou 
Janela > Organizar > Flutuar tudo nas janelas para flutuar tudo das janelas de documento de uma vez. Consulte as notas técnicas 
kb405298 para obter mais informações. 

Nota: o Dreamweaver não oferece suporte a encaixe e desencaixe de janelas de Documento. Use o botão Minimizar da janela do 
documento para criar janelas flutuantes (Windows) ou selecione Janela > Lado a Lado Verticalmente para criar janelas de documentos lado 
a lado. Pesquise “Lado a Lado Verticalmente” no Ajuda do Dreamweaver para obter mais informações sobre este tópico. O fluxo de trabalho 
para os usuários Macintosh difere ligeiramente. 


e Para encaixar uma janela de Documento em um grupo separado de janelas de Documento, arraste a janela para o grupo. 


e Para criar grupos de documentos empilhados ou lado a lado, arraste a janela para uma das zonas de destino nas partes superior, inferior ou 
laterais de qualquer janela. Você também pode selecionar um layout para o grupo usando o botão Layout na barra de aplicativos. 


Nota: alguns produtos não têm suporte para essa funcionalidade. No entanto, seu produto pode conter os comandos Cascata ou Lado a 
lado no menu Janela para ajudá-lo na exibição de documentos. 


e Para alternar para outro documento em um grupo tabulado, arraste a seleção sobre a guia do documento por alguns instantes. 


Nota: alguns produtos não têm suporte para essa funcionalidade. 


Encaixe e desencaixe de painéis 
Um encaixe é um conjunto de painéis ou grupos de painéis exibidos juntos, geralmente em uma orientação vertical. Encaixe e desencaixe painéis 
movendo-os para dentro e para fora de um encaixe. 


e Para encaixar um painel, arraste-o pela guia para dentro do encaixe, na parte superior, na parte inferior ou entre outros painéis. 
e Para encaixar um grupo de painéis, arraste-o pela barra de título (a barra sólida vazia acima das guias) para dentro do encaixe. 


* Para remover um painel ou grupo de painéis, arraste-o para fora do encaixe pela guia ou barra de título. É possível arrastá-lo para dentro 
de outro encaixe ou deixá-lo flutuando livremente. 


Movimentação de painéis 

Ao mover painéis, você visualizará zonas para soltar realçadas em azul, que são áreas nas quais é possível mover o painel. Por exemplo, é 
possível mover um painel para cima ou para baixo em um encaixe arrastando-o para a zona para soltar azul estreita, acima ou abaixo de outro 
painel. Se for arrastado para uma área que não é uma zona para soltar, o painel flutuará livremente na área de trabalho. 

Nota: A posição do mouse (ao invés da posição do painel), ativa a área de destino. Se não puder visualizar a área de destino, tente arrastar o 
mouse para o lugar onde ela deveria estar. 
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e Para mover um painel, arraste-o pela guia. 


* Para mover um grupo de painéis , arraste a barra de título (a área acima das guias). 


| Camadas x E 
Normal 


Blog: E] 4 + & 


A zona para soltar azul estreita indica que o painel Cor será encaixado acima do grupo de painéis Camadas. 
A. Barra de título B. Guia C. Zona para soltar 


Pressione Ctrl (Windows) ou Command (Mac OS) enquanto estiver movendo um painel para não encaixá-lo. Pressione Esc enquanto estiver 
movendo o painel para cancelar a operação. 


Adição e remoção de painéis 
Se todos os painéis forem removidos de um encaixe, ele desaparecerá. É possível criar um encaixe movendo os painéis para a borda direita do 
espaço de trabalho até uma zona de destino aparecer. 


* Para remover um painel, clique com o botão direito e selecione Fechar (Windows) ou, com a tecla Control pressionada, selecione Fechar 
(Mac), ou desmarque-o do menu de Janela. 


e Para adicionar um painel, selecione-o no menu Janela e encaixe-o no local que desejado. 


Manipulação de grupos de painéis 


* Para mover um painel em um grupo, arraste a guia do painel para a zona para soltar realçada no grupo. 


Histograma 


Adição de um painel a um grupo de painéis 
e Para reorganizar painéis em um grupo, arraste a guia do painel para um novo local no grupo. 
e Para remover um painel de um grupo para que ele flutue livremente, arraste o painel pela guia para fora do grupo. 


* Para mover um grupo, arraste a barra de título (a área acima das guias). 


Empilhamento de painéis flutuantes 


Se for arrastado para um painel fora de seu encaixe mas não em uma zona para soltar, o painel flutuará livremente. O painel flutuante permite 
posicioná-lo em qualquer lugar no espaço de trabalho. É possível empilhar painéis flutuantes ou grupos de painéis para que eles sejam movidos 
como uma unidade quando a barra de título superior for arrastada. 


Painéis empilhados de livre flutuação 


e Para empilhar painéis flutuantes, arraste um painel pela guia para a zona para soltar na parte inferior de outro painel. 
e Para alterar a ordem de empilhamento, arraste um painel para cima ou para baixo pela guia. 


Nota: solte a guia sobre a zona para soltar azul estreita entre os painéis, em vez de sobre a zona para soltar abrangente em uma barra de 
título. 


e Para remover um painel ou grupo de painéis da pilha para que ele flutue sozinho, arraste-o para fora pela guia ou pela barra de título. 
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Redimensionamento de painéis 


e Para minimizar ou maximizar um painel, grupo de painéis ou pilha de painéis, clique duas vezes na guia. Você também pode clicar duas 
vezes na área da guia (no espaço vazio próximo às guias). 


e Para redimensionar um painel, arraste qualquer lado do painel. Alguns painéis, como o painel Cor no Photoshop, não podem ser 
redimensionados arrastando-os. 


Contrair e expandir ícones do painel 
É possível contrair painéis em ícones para reduzir a desordem no espaço de trabalho. Em alguns casos, os painéis são contraídos em ícones no 
espaço de trabalho padrão. 


Histograma 


Informações 


Painéis recolhidos em ícones 


RGB Ctri+2 


Vermelho Ctri+3 


Ctri+á 


Painéis expandidos de ícones 


e Para contrair ou expandir todos os ícones de painéis numa coluna, clique na seta dupla na parte superior do encaixe. 
e Para expandir um único ícone do painel, clique nesse ícone. 


e Se quiser redimensionar ícones de painéis para que você só veja os ícones (e não os rótulos), ajuste a largura do encaixe até o texto 
desaparecer. Para exibir um texto de ícone novamente, alargue o encaixe. 


e Para contrair um painel estendido de volta ao ícone, clique na guia, no ícone ou na seta dupla na barra de título do painel. 


Em alguns produtos, se você selecionar Contrair painéis de ícone automaticamente nas preferências de Interface ou Opções de interface 
do usuário, um ícone de painel expandido será contraído automaticamente quando você clicar fora dele. 


e Para adicionar um painel flutuante ou grupo de painéis em um encaixe de ícones, arraste-o por sua guia ou barra de título. (Os painéis são 
contraídos automaticamente em ícones ao serem adicionados a um encaixe de ícones.) 


* Para mover um ícone de painel (ou grupo de ícones de painéis), arraste o ícone. Você pode arrastar ícones do painel para cima e para 
baixo no encaixe para outros encaixes (onde aparecem no estilo de painel desse encaixe), ou para fora do encaixe (onde aparecem como 
ícones flutuantes). 


Para o início 


Salvamento e alternância de espaços de trabalho 


Salvando o tamanho e a posição atuais dos painéis como uma área de trabalho nomeado, é possível restaurar essa área de trabalho, caso você 
mova ou feche um painel. Os nomes dos espaços de trabalho salvos aparecem no alternador de espaços de trabalho na Barra de aplicativos. 


Salvamento de uma área de trabalho personalizada 
1. Com a área de trabalho na configuração que você deseja salvar, siga um destes procedimentos: 
(Illustrator) Escolha Janela > Área de Trabalho > Salvar Área de Trabalho. 


* (Photoshop, InDesign, InCopy) Escolha Janela > Área de Trabalho > Nova Área de Trabalho. 
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* (Dreamweaver) Escolha Janela > Layout da Área de Trabalho > Nova Área de Trabalho. 
* (Flash) Escolha Nova Área de Trabalho no alternador de áreas de trabalho na Barra de aplicativos. 
e (Fireworks) Escolha Salvar atual no alternador de áreas de trabalho na Barra de aplicativos. 
2. Digite um nome para a área de trabalho. 
3. (Photoshop, InDesign) Em Capturar, selecione uma ou mais opções: 
Localizações do painel Salva as localizações atuais do painel. (somente no InDesign) 
Atalhos de teclado Salva o conjunto atual de atalhos do teclado (somente para Photoshop). 


Menus ou Personalização do menu Salva o conjunto atual de menus. 


Exibição ou alternância entre espaços de trabalho 
* Selecione um espaço de trabalho no alternador de espaços de trabalho na Barra de aplicativos. 


No Photoshop, é possível atribuir atalhos de teclado para cada área de trabalho para navegar entre elas rapidamente. 


Exclusão de uma área de trabalho personalizada 


e Selecione Gerenciar áreas de trabalho no alternador de áreas de trabalho na Barra de aplicativos, selecione a área de trabalho e, em 
seguida, clique em Excluir. (A opção não está disponível no Fireworks.) 


* (Photoshop, InDesign, InCopy) Selecione Excluir área de trabalho no alternador de áreas de trabalho. 
« (Illustrator) Escolha Janela > Área de trabalho > Gerenciar áreas de trabalho, selecione a área de trabalho e clique no ícone Excluir. 


* (Photoshop, InDesign) Escolha Janela > Área de trabalho > Excluir áreas de trabalho, selecione a área de trabalho e clique no ícone Excluir. 


Restauração do espaço de trabalho padrão 


1. Selecione a área de trabalho Padrão ou Fundamentos no alternador de área de trabalho na barra de aplicativos. Para Fireworks, consulte o 
artigo http:/Avww.adobe/devnet/fireworks/articles/workspace manager panel.html. 


Nota: No Dreamweaver, Designer é a área de trabalho padrão. 


2. Para Fireworks (Windows), exclua estas pastas: 
Windows Vista NUsuáriosi<nome de usuário>lAppDatalRoamingiAdobelFireworks CS4 


Windows XP NDocuments and Settingsi<nome de usuário>lApplication DatalAdobelFireworks CS4 


3. (Photoshop, InDesign, InCopy) Selecione Janela > Espaço de trabalho > Redefinir [Nome do espaço de trabalho]. 


(Photoshop) Restauração de uma organização de área de trabalho salva 
No Photoshop, as áreas de trabalho aparecem automaticamente conforme você as organizou da última vez, mas é possível restaurar a 
organização de painéis original e salva. 


* Para restaurar uma área de trabalho individual, selecione Janela > Área de Trabalho > Redefinir Nome da área de trabalho. 


e Para restaurar todas as áreas de trabalho instaladas com o Photoshop, clique em Restaurar áreas de trabalho padrão nas preferências da 
interface. 


Para reorganizar a ordem das áreas de trabalho na barra de aplicativos, arraste-as. 


dita E P, iníci 
Exibir documentos com abas (Dreamweaver Macintosh) RPE 


Você pode visualizar vários documentos em uma única janela usando abas para identificar cada um. Você também pode exibi-los como parte de 
uma área de trabalho flutuante, na qual cada documento aparece em sua própria janela. 


Abrir um documento com abas em uma janela separada 
*& Clique com a tecla Control pressionada na aba e selecione Mover para a nova janela, no menu de contexto. 


Combinar documentos separados em janelas com abas 
*& Selecione Janela > Combinar como abas. 


Alterar a configuração padrão do documento com abas 
1. Selecione Dreamweaver > Preferências e, em seguida, selecione a categoria Geral. 
2. Marque ou desmarque Abrir documentos em abas e clique em OK. 


O Dreamweaver não muda a exibição dos documentos que estão atualmente abertos quando as preferências são alteradas. No entanto, os 
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documentos abertos depois da seleção de uma nova preferência são exibidos de acordo com a preferência selecionada. 


E cú z x Para o início 
Ativação de ícones coloridos Sã 


Por padrão, o Dreamweaver CS4 e posterior usa ícones em preto e branco que se tornam coloridos quando você passa o mouse sobre eles. 
Você pode deixar os ícones coloridos ativados de modo permanente, para que não seja necessário passar o mouse sobre eles. 


* Siga um destes procedimentos: 
e Selecione Exibir > Ícones coloridos. 
e Alterne para a área de trabalho Clássico ou Codificador. 


Para desativar novamente os ícones coloridos, desmarque Ícones coloridos no menu Exibir ou alterne para uma área de trabalho diferente. 


ssa Para o início 
Ocultar e exibir a tela de boas-vindas do Dreamweaver 
A tela de boas-vindas aparece quando você inicia o Dreamweaver e a qualquer momento quando não há nenhum documento aberto. Você pode 
optar por ocultar a tela de boas-vindas e exibi-la novamente mais tarde. Quando a tela de boas-vindas está oculta e nenhum documento está 
aberto, a janela Documento fica em branco. 


Ocultar a tela de boas-vindas 
*& Na tela de boas-vindas, selecione a opção Não mostrar novamente. 


Exibir a tela de boas-vindas 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
2. Na categoria Geral, selecione a opção Mostrar tela de boas-vindas. 


E ” E Eae a Para o início 
Sobre a personalização do Dreamweaver em sistemas de vários usuários 
Você pode personalizar o Dreamweaver de acordo com suas necessidades, mesmo em um sistema operacional de vários usuários como o 
Windows XP ou o Mac OS X. 


O Dreamweaver impede que a configuração personalizada de um usuário afete a configuração personalizada de outro usuário. Para fazer isso, na 
primeira vez em que é executado em um dos sistemas operacionais de vários usuários compatíveis, o Dreamweaver cria cópias de diversos 
arquivos de configuração. Esses arquivos de configuração de usuário são armazenados em uma pasta que pertence a você. 


Por exemplo, no Windows XP, eles são armazenados em C:Documents and Settingsinome de usuáriolDados de 
aplicativolAdobelDreamweavenpt BRiConfiguration, que está oculta por padrão. Para exibir arquivos e pastas ocultos, selecione Ferramentas > 
Opções de pasta no Windows Explorer, clique na aba Exibir e selecione a opção Mostrar arquivos e pastas. 


No Windows Vista, eles são armazenados em C:AUsersinome de usuárioiAppDatalRoamingiAdobelDreamweaver Ipt BRiConfiguration, pasta que 
fica oculta por padrão. Para exibir arquivos e pastas ocultos, selecione Ferramentas > Opções de pasta no Windows Explorer, clique na aba 
Exibir e selecione a opção Mostrar arquivos e pastas. 


No Mac OS X, eles são armazenados na pasta Home; especificamente, em Users/nome de usuário/Library/Application 
Support/Adobe/Dreamweaver 9/Configuration. 


Se o Dreamweaver for reinstalado ou atualizado, o Dreamweaver fará cópias de backup automaticamente dos arquivos de configuração de 
usuário existente, de modo que se esses arquivos tiverem sido personalizados manualmente, você ainda terá acesso às alterações feitas. 


aa A , a Para o início 
Definir preferências gerais do Dreamweaver 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Defina uma das seguintes opções: 
Abrir documentos em abas Abre todos os documentos em uma única janela com abas que permitem alternar entre os documentos 
(somente Macintosh). 


Mostrar tela de boas-vindas Exibe a tela de boas-vindas do Dreamweaver quando você inicia o Dreamweaver ou quando não há nenhum 
documento aberto. 


Reabrir documentos ao inicializar Abre todos os documentos que estavam abertos quando o Dreamweaver foi fechado. Se essa opção 
não for selecionada, o Dreamweaver exibirá a tela de boas-vindas ou uma tela em branco ao inicializar (dependendo da configuração de 
Mostrar tela de boas-vindas). 


Avisar ao abrir arquivos somente leitura Avisa quando um arquivo somente leitura (bloqueado) é aberto. Escolha para 
desbloquear/retirar, visualizar ou cancelar o arquivo. 


Ativar arquivos relacionados Permite ver quais arquivos estão conectados ao documento atual (por exemplo, arquivos CSS ou 
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JavaScript). O Dreamweaver exibe um botão para cada arquivo relacionado na parte superior do documento e abre o arquivo quando se 
clica no botão. 


Identificar Arquivos rel. dinamicamente Permite que você selecione se os Arquivos rel. dinamicamente serão exibidos automaticamente 
na barra de ferramentas de Arquivos relacionados ou após interação manual. Também é possível desabilitar a identificação de Arquivos rel. 
dinamicamente. 


Atualizar links ao mover arquivos Determina o que acontece ao mover, renomear ou excluir um documento do seu site. Defina essa 
preferência para atualizar sempre os links automaticamente, para nunca atualizar os links ou para perguntar antes de atualizar. Consulte 
Atualizar links automaticamente. 


Mostrar caixa de diálogo ao inserir objetos Determina se o Dreamweaver deve perguntar para incluir informações adicionais ao inserir 
imagens, tabelas, filmes do Shockwave e alguns outros objetos usando o painel ou o menu Inserir. Se essa opção estiver desativada, a 
caixa de diálogo não aparecerá e você deverá usar o Inspetor de propriedades para especificar o arquivo de origem de imagens, o número 
de linhas de uma tabela, etc. Para imagens de sobreposição e HTML do Fireworks, uma caixa de diálogo sempre aparece quando você 
insere o objeto, independentemente da configuração dessa opção. Para substituir temporariamente essa configuração, clique com a tecla 
Control (Windows) ou a tecla Command (Macintosh) pressionada ao criar e inserir objetos. 


Ativar entrada inline de bytes duplos Permite inserir textos de bytes duplos diretamente na janela Documento se estiver usando um 
ambiente de desenvolvimento ou um kit de idioma que facilita os textos de bytes duplos (como os caracteres japoneses). Quando essa 
opção não está selecionada, uma janela de entrada de texto aparece para a inserção e a conversão de textos de bytes duplos; o texto é 
exibido na janela Documento depois de ser aceito. 


Alternar para parágrafo simples após cabeçalho Especifica que pressionar Enter (Windows) ou Return (Macintosh) no final de um 
parágrafo de cabeçalho na Visualização de design cria um novo parágrafo com uma tag p no início e no final. Um parágrafo de cabeçalho 
tem uma tag de cabeçalho, como h1 ou h2, no início e no final do parágrafo. Quando essa opção está desativada, pressionar Enter ou 
Return no final de um parágrafo de cabeçalho cria um novo parágrafo com a mesma tag de cabeçalho (permitindo que você digite vários 
cabeçalhos em uma linha e, em seguida, volte para preencher os detalhes). 


Permitir vários espaços consecutivos Especifica que digitar dois ou mais espaços na Visualização de design cria espaços consecutivos 
que aparecem como vários espaços no navegador. Por exemplo, você pode digitar dois espaços entre sentenças, como faria em uma 
máquina de escrever. Essa opção foi desenvolvida principalmente para pessoas que estão acostumadas a digitar em editores de texto. 
Quando essa opção está desativada, vários espaços são tratados como um único espaço (porque os navegadores tratam vários espaços 
como espaços únicos). 


Usar <strong> e <em> em vez de <b> e <i> Especifica que o Dreamweaver aplica a tag strong sempre que você executa uma ação que 
normalmente aplicaria a tag b e aplica a tag em sempre que você executa uma ação que normalmente aplicaria a tag i. Essas ações 
incluem o clique nos botões Negrito ou Itálico no Inspetor de propriedades de texto, no modo HTML, e a seleção de Formatar > Estilo > 
Negrito ou Formatar > Estilo > Itálico. Para usar as tags b e i nos documentos, desmarque essa opção. 

Nota: O World Wide Web Consortium não recomenda o uso das tags be i; as tags strong e em fornecem informações mais semânticas do 
que as tags b ei. 


Avisar ao incluir regiões editáveis entre tags <p> ou <h1> - <h6> Especifica se uma mensagem de aviso deve ser exibida sempre que 
um modelo do Dreamweaver com uma região editável em uma tag de parágrafo ou de cabeçalho for salvo. A mensagem informa que os 
usuários não poderão criar mais parágrafos na região. A opção está ativada por padrão. 


Centralização Especifica se você deseja centralizar elementos usando a tag divalign="center" ou center ao clicar no botão Alinhar ao 
centro, no Inspetor de propriedades. 

Nota: Esses dois métodos de centralização foram oficialmente reprovados na especificação do HTML 4.01; você deve usar estilos CSS 
para centralizar textos. Os dois métodos ainda são tecnicamente válidos de acordo com a especificação do XHTML 1.0 Transitional, mas 
não são mais válidos na especificação do XHTML 1.0 Strict. 


Número máximo de etapas do histórico Determina o número de etapas que o painel Histórico preserva e mostra. (O valor padrão deve 
ser suficiente para a maioria dos usuários.) Se você ultrapassar o número definido de etapas no painel Histórico, as etapas mais antigas 
serão descartadas. 


Para obter mais informações, consulte Automação de tarefa. 


Dicionário de ortografia Lista os dicionários de ortografia disponíveis. Se um dicionário tiver vários dialetos ou convenções de ortografia 
(como inglês americano e inglês britânico), os dialetos serão listados separadamente no menu pop-up Dicionário. 


| A é P iníci 
Definir as preferências de Fontes do Dreamweaver RR 


A codificação de um documento determina sua aparência no navegador. As preferências de fonte do Dreamweaver permitem visualizar uma 
determinada codificação na fonte e no tamanho que você preferir. Entretanto, as fontes que você selecionar na caixa de diálogo Preferências de 
fontes afetam somente a forma que as fontes aparecem no Dreamweaver; elas não afetam a forma que o documento aparece no navegador de 
um visitante. Para alterar a forma que as fontes aparecem em um navegador, você precisa alterar o texto usando o Inspetor de propriedades ou 
aplicando uma regra de CSS. 


Para obter informações sobre a configuração de uma codificação padrão de novos documentos, consulte Criação e abertura de documentos. 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
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2. Na lista Categoria à esquerda, selecione Fontes. 


3. Selecione um tipo de codificação (como Europeu Ocidental ou Japonês) na lista Configurações de fontes. 
Nota: Para exibir um idioma asiático, você deve usar um sistema operacional que suporte fontes de bytes duplos. 


4. Selecione uma fonte e o tamanho a serem usados para cada categoria da codificação selecionada. 
Nota: Para aparecer nos menus pop-up, a fonte deve estar instalada no computador. Por exemplo, para ver um texto em japonês, você 
deve ter uma fonte japonesa instalada. 
Fonte proporcional A fonte usada pelo Dreamweaver para exibir textos normais (por exemplo, textos de parágrafos, cabeçalhos e 
tabelas). O padrão depende das fontes instaladas no seu sistema. Na maioria dos sistemas dos EUA, o padrão é a fonte Times New 
Roman tamanho 12. (Médio) no Windows e Times 12 pt. no Mac OS. 


Fonte fixa A fonte usada pelo Dreamweaver para exibir textos entre as tags pre, code e tt. O padrão depende das fontes instaladas no seu 
sistema. Na maioria dos sistemas dos EUA, o padrão é a fonte Courier New 10 pt. (Pequeno) no Windows e Monaco 12 pt. no Mac OS. 


Visualização de código A fonte usada para todos os textos que aparecem na Visualização de código e no Inspetor de código. O padrão 
depende das fontes instaladas no seu sistema. 


. ENC 
Personalizar cores de realce do Dreamweaver Edi cg 


Use as preferências de realce para personalizar as cores que identificam regiões de modelo, itens de biblioteca, tags de terceiros, elementos de 
layout e códigos no Dreamweaver. 


Alterar uma cor de realce 
1. Selecione Editar > Preferências e selecione a categoria Realce. 


2. Ao lado do objeto do qual deseja alterar a cor de realce, clique na caixa Cor e use o seletor de cores para selecionar uma nova cor ou 
inserir um valor hexadecimal. 


Ativar ou desativar o realce de um objeto 
1. Selecione Editar > Preferências e selecione a categoria Realce. 
2. Ao lado do objeto para o qual deseja ativar ou desativar a cor de realce, marque ou desmarque a opção Mostrar. 


A - ai Para o início 
Restaurar preferências padrão 


Para saber os procedimentos para restaurar as preferências padrão do Dreamweaver, consulte Tech Note 83912. 


Mais tópicos da Ajuda 
Visão geral do layout da área de trabalho 


(69) ex-ne-sa ] 
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Trabalho na janela Documento 


Alternar entre visualizações na janela Documento 
Janelas de documento em cascata ou lado a lado 
Redimensionar a janela Documento 

Definir o tamanho da janela e a velocidade da conexão 
Relatórios no Dreamweaver 


é E as a P, iníci 
Alternar entre visualizações na janela Documento sd 


Você pode visualizar um documento na janela Documento da Visualização de código, da Visualização Dividir código, da Visualização de design, 
das Visualizações de código e de design (visualização dividida) ou na Visualização dinâmica. Você também tem a opção de exibir a visualização 
Dividir código ou as visualizações de código e de design na horizontal ou na vertical. (A exibição horizontal é o padrão.) 


Passar para a Visualização de código 
* Siga um destes procedimentos: 


e Selecione Exibir > Código. 
e Na barra de ferramentas Documento, clique no botão Mostrar visualização de código. 


Código | 


Alternar para a visualização Dividir código 
A visualização Dividir código divide o documento em dois, assim você pode trabalhar nas duas seções de código de uma vez só. 


“& Selecione Exibir > Dividir código. 
Passar para a Visualização de design 
*& Siga um destes procedimentos: 
e Selecione Exibir > Design. 
e Na barra de ferramentas Documento, clique no botão Mostrar visualização de design. 


| Design 


Mostrar visualizações de código e de design 
*& Siga um destes procedimentos: 


e Selecione Exibir > Código e design. 
e Na barra de ferramentas Documento, clique no botão Mostrar visualizações de código e design. 
| Dividir | 


Por padrão, a Visualização de código aparece na parte superior e a Visualização de design aparece na parte inferior da janela Documento. Para 
exibir a Visualização de design na parte superior, selecione Exibir > Visualização de design na parte superior. 


Alternar entre as visualizações de código e de design 

“& Pressione Control + crase (). 

Se as duas visualizações forem exibidas na janela Documento, esse atalho de teclado mudará o foco do teclado de uma visualização para a 
outra. 


Dividir verticalmente as visualizações 
Esta opção está disponível somente na visualização Dividir código e nas visualizações de código e de design (Dividir visualização). Está 
desabilitado para a Visualização de código e para a Visualização de design. 
1. Certifique-se de estar na visualização Dividir código (Exibir > Dividir código) ou nas visualizações de código e de design (Exibir > Código e 
design). 
2. Selecione Exibir > Dividir verticalmente. 
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Se você estiver nas visualizações de código e design, tem a opção de exibir a Visualização de design à esquerda (Exibir > Visualização de 
design à esquerda). 


Para o início 


Janelas de documento em cascata ou lado a lado 


Se houver muitos documentos abertos ao mesmo tempo, você pode organizá-los em cascata ou lado a lado. 


Janelas de documento em cascata 
“+ Selecione Janela > Em cascata. 


Janelas de documento lado a lado 
e (Windows) Selecione Janela > Lado a lado horizontalmente ou Janela > Lado a lado verticalmente. 
e (Macintosh) Selecione Janela > Lado a lado. 


E - Para o início 
Redimensionar a janela Documento 
A barra de status exibe as dimensões atuais da janela Documento (em pixels). Para projetar uma página cuja aparência fica melhor em um 
tamanho específico, você pode ajustar a janela Documento para qualquer tamanho predefinido, editar esses tamanhos predefinidos ou criar 
novos tamanhos. 


Quando você altera o tamanho da visualização de uma página na visualização de design ou dinâmica, somente as dimensões da visualização 
são modificadas. O tamanho do documento permanece inalterado. 


Além de tamanhos predeterminados e personalizados, o Dreamweaver também enumera os tamanhos especificados em uma consulta de mídia. 
Quando você seleciona um tamanho que corresponde a uma consulta de mídia, o Dreamweaver usa a consulta de mídia para exibir a página. 
Você também pode alterar a orientação de página para visualizar a página de dispositivos móveis onde o layout da página é alterado com base 
em como o dispositivo é segurado. 


Redimensionar a janela Documento para um tamanho predefinido 
* Selecione um dos tamanhos do menu pop-up Tamanho da janela, na parte inferior da janela Documento. Dreamweaver CS5.5 e posterior 


oferece uma longa lista de opções, incluindo opções de dispositivos móveis comuns (como exemplificado abaixo). 


“<body> Do Q T100% 683 APA O Anti? cam lilica omannam 
- sa 592w 


536 x 196 (640 x 480, Default 
600 300 (640 x 480 Maamized) 
760 x 420 (800600 Maamized) 


795 x 470 (832x624 Maamized) 
955 x 600 (1024 x 758, Maamized) 


Editar Tamanhos .. 


O tamanho da janela mostrado reflete as dimensões internas da janela do navegador, sem as bordas; o tamanho do monitor ou o dispositivo 
móvel é listado entre parênteses. 


Para um redimensionamento menos preciso, use os métodos padrão de redimensionamento de janelas do seu sistema operacional, como 
arrastar o canto inferior direito de uma janela. 


Nota: (Apenas Windows) Documentos na janela Documento são, por padrão, maximizados, e você não pode redimensionar um documento 
quando ele está maximizado. Para restaurar abaixo o documento, clique no botão Restaurar abaixo EB no canto superior direito do documento. 


Alterar os valores listados no menu pop-up Tamanho da janela 
1. Selecione Editar tamanhos no menu pop-up Tamanho da janela. 
2. Clique em qualquer valor de largura ou altura na lista Tamanhos de janela e digite um novo valor. 


Para ajustar a janela Documento somente a uma largura específica (sem alterar a altura), selecione um valor de altura e exclua-o. 


3. Clique na caixa Descrição para inserir um texto descritivo sobre um tamanho específico. 


Adicionar um novo tamanho ao menu pop-up Tamanho da janela 
1. Selecione Editar tamanhos no menu pop-up Tamanho da janela. 
2. Clique no espaço em branco abaixo do último valor da coluna Largura. 
3. Insira valores para Largura e Altura. 


Para definir somente a Largura ou a Altura, deixe um campo em branco. 
4. Clique no campo Descrição para inserir um texto descritivo sobre o tamanho adicionado. 


Por exemplo, você pode digitar SVGA ou PC médio próximo a uma entrada de um monitor de 800 x 600 pixels e Mac de 17 pol. próximo a 
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uma entrada de um monitor de 832 x 624 pixels. A maioria dos monitores pode ser ajustada para diversas dimensões de pixel. 


ga ” E a Para o início 
Definir o tamanho da janela e a velocidade da conexão ii 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
2. Selecione a Barra de status (CS5) ou Tamanhos de janela (CS5.5 e posterior) da lista Categoria à esquerda. 


3. Defina uma das seguintes opções: 
Tamanhos de janela Permite personalizar os tamanhos de janela que aparecem no menu pop-up da barra de status. 


Velocidade de conexão Determina a velocidade de conexão (em quilobits por segundo) usada para calcular o tamanho do download. O 
tamanho do download da página é exibido na barra de status. Quando uma imagem é selecionada na janela Documento, o tamanho de 
download da imagem é exibido no Inspetor de propriedades. 

Nota: A velocidade de conexão foi removida no Dreamweaver CC e posterior. 


Zu Para o início 
Relatórios no Dreamweaver 
Você pode executar relatórios no Dreamweaver para localizar conteúdos, solucionar problemas ou testar conteúdos. Você pode gerar os 
seguintes tipos de relatórios: 


Pesquisa Permite procurar tags, atributos e textos específicos em tags. 

Referência Permite que você procure informações de referência úteis. 

Validação Permite verificar erros de código ou de sintaxe. 

Compatibilidade de navegador Permite testar o HTML dos documentos para verificar se alguma tag ou atributo não é suportado pelos 
navegadores de destino. 

Verificador de links Permite encontrar e corrigir links rompidos, externos e órfãos 

Relatórios do site Permite melhorar o fluxo de trabalho e testar os atributos HTML no site. Os relatórios de fluxo de trabalho incluem Design 
Notes verificadas e modificadas recentemente; os relatórios HTML incluem tags de fonte aninhadas que podem ser combinadas, acessibilidade, 
textos alternativos ausentes, tags aninhadas redundantes, tags vazias removíveis e documentos sem título. 

Registro de FTP Permite visualizar toda a atividade de transferência de arquivos via FTP. 

Depuração de servidor Permite visualizar informações para depurar um aplicativo Adobe& ColdFusionB. 

Nota: O suporte para o ColdFusion foi removido no Dreamweaver CC e posterior. 

Mais tópicos da Ajuda 

Visão geral da janela Documento 


ERES 
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Uso de barras de ferramentas, inspetores e menus de contexto 


Exibir barras de ferramentas 
Usar o Inspetor de propriedades 
Usar menus de contexto 


Es e 
Exibir barras de ferramentas ii ii 


Use as barras de ferramentas Documento e Padrão para realizar operações relacionadas a documentos e de edição padrão, a barra de 
ferramentas de codificação para inserir o código rapidamente e a barra de ferramentas Processamento do estilo para exibir a página exatamente 
como apareceria em tipos de mídia diferentes. Você pode exibir ou ocultar as barras de ferramentas conforme necessário. 


e Selecione Exibir > Barras de ferramentas e, em seguida, selecione a barra de ferramentas. 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer uma das barras de 
ferramentas e selecione-a no menu de contexto. 
Nota: Para exibir ou ocultar a barra de ferramentas de codificação no Inspetor de código (Janela > Inspetor de código), selecione Barra de 
ferramentas de codificação no menu pop-up Opções de visualização, na parte superior do inspetor. 


Para o início 


Usar o Inspetor de propriedades 


O Inspetor de propriedades permite examinar e editar as propriedades mais comuns do elemento de página selecionado atualmente, como texto 
ou um objeto inserido. O conteúdo do Inspetor de propriedades varia de acordo com o(s) elemento(s) selecionado(s). 


Para acessar a Ajuda de um Inspetor de propriedades, clique no botão da Ajuda no canto superior direito do Inspetor de propriedades ou 
selecione Ajuda no menu Opções de um Inspetor de propriedades. 


Nota: Use o Inspetor de tags para visualizar e editar todos os atributos associados às propriedades de uma determinada tag. 


Mostrar ou ocultar o Inspetor de propriedades 
* Selecione Janela > Propriedades. 


Expandir ou reduzir o Inspetor de propriedades 
*& Clique na seta de expansão no canto inferior direito do Inspetor de propriedades. 


Visualizar e alterar propriedades para um elemento de página 
1. Selecione o elemento de página na janela Documento. 


Talvez seja necessário expandir o Inspetor de propriedades para visualizar todas as propriedades do elemento selecionado. 


2. Altere qualquer propriedade no Inspetor de propriedades. 
Nota: Para obter informações sobre propriedades específicas, selecione um elemento na janela Documento e clique no ícone de Ajuda no 
canto superior direito do Inspetor de propriedades. 


3. Se as alterações não forem aplicadas imediatamente na janela Documento, siga um destes procedimentos para aplicá-las: 
e Clique fora dos campos de texto de edição de propriedade. 
e Pressione Enter (Windows) ou Return (Macintosh). 


e Pressione Tab para passar para outra propriedade. 


Para o início 
Usar menus de contexto ii 


Os menus de contexto fornecem acesso fácil à maioria dos comandos úteis e das propriedades relacionadas ao objeto ou janela com o qual está 
trabalhando. Os menus de contexto listam somente os comandos que pertencem à seleção atual. 


1. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no objeto ou janela. 
2. Selecione um comando no menu de contexto. 
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E) ChProgram FilesvAdobe Adobe Dreanmvenver CSF Sample files! cafe townsend! contact plhp'view php QUTMLY foto fes 
GEFERTD ce towesendass 


Asquivo de origem. 
Nouveau World Cuisine Alinhor 


Estilos CSS 


Modelos 


Navegador de códigos 


Comments 
Editar tag <img> 
Remover tag <img> 


Criar link 


Otimizar. 


Editar com 


Editar original com 


Recortar 
Copiar 

Colar 

Design Notes 


Propriedades 


<body> <center> <tableêmain> <thody> <tr> <td> <a> eimg>) RJ Q 100% +/940x600w 25X 74 sec Western Europear 


Mais tópicos da Ajuda 
Visão geral da barra de ferramentas de documento 


Definir propriedades de texto no Inspetor de propriedades 
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Uso do painel Inserir 


O painel Inserir contém botões para criar e inserir objetos, tais como tabelas e imagens. Os botões são organizados em categorias. 


Ocultar ou mostrar o painel Inserir 

Mostrar os botões em uma categoria específica 

Exibir o menu pop-up para um botão 

Inserir um objeto 

Ignorar a caixa de diálogo de inserção de objeto e inserir um objeto de alocador de espaço vazio 
Modificar preferências do painel Inserir 

Adicionar, excluir ou gerenciar itens na categoria Favoritos do painel Inserir 
Inserir objetos usando botões na categoria Favoritos 

Exibir o painel Inserir como uma Barra de inserção horizontal 

Reverter a Barra de inserção horizontal para um grupo de painéis 

Mostrar categorias da Barra de inserção horizontal como abas 

Mostrar categorias da Barra de inserção horizontal como um menu 


Nota: A interface de usuário foi simplificada na Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das 
opções descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo. 


, ' Para o início 
Ocultar ou mostrar o painel Inserir 


e Selecione Janela > Inserir. 


Nota: Se você estiver trabalhando com determinados tipos de arquivo, como XML, JavaScript, Java e CSS, o painel Inserir e a opção de 
Visualização de design estarão desativados, porque não é possível inserir itens nesses arquivos de código. 


" ' gs Para o início 

Mostrar os botões em uma categoria específica 
e Selecione o nome da categoria no menu pop-up Categoria. Por exemplo, para mostrar botões da categoria Layout, selecione Layout. 

Para o início 


Exibir o menu pop-up para um botão 


e Clique na seta para baixo ao lado do ícone do botão. 


TO Draw Rectangã Hotspot 
TD Draw Oral Hotspot 
12 Draw Potyçon Motspot 
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= Roliover Image 
RE, Fireworks HTML 


Insira o painel no Dreamweaver CC 


E á Para o início 
Inserir um objeto 


1. Selecione a categoria apropriada no menu pop-up Categoria, do painel Inserir. 
2. Siga um destes procedimentos: 


e Clique no botão de um objeto ou arraste o ícone do botão na janela Documento (na Visualização de design, dinâmica ou de código). 


e Clique na seta em um botão e selecione uma opção no menu. 


Dependendo do objeto, uma caixa de diálogo de inserção de objeto correspondente pode aparecer, solicitando que você procure um 
arquivo ou especifique parâmetros para um objeto. Ou o Dreamweaver pode inserir o código no documento, ou abrir um editor de tag 
ou um painel para que você especifique informações antes do código ser inserido. 


Para alguns objetos, nenhuma caixa de diálogo será exibida se você inserir o objeto na Visualização de design, mas um editor de tag 
aparecerá se o objeto for inserido na Visualização de código. Para alguns objetos, a inserção do objeto na Visualização de design faz 
com que o Dreamweaver passe para a Visualização de código antes da inserção do objeto. 


Nota: Alguns objetos, como as âncoras nomeadas, não aparecem quando a página é visualizada na janela de um navegador. Você pode 
exibir ícones na Visualização de design que marcam a localização desses objetos invisíveis. 


à dê E iai E E E E P iníci 
Ignorar a caixa de diálogo de inserção de objeto e inserir um objeto de alocador de espaço ii 


vazio 
e Clique com a tecla Control (Windows) ou Option pressionada (Macintosh) no botão do objeto. 


Por exemplo, para inserir um alocador de espaço em uma imagem sem especificar um arquivo de imagem, clique com a tecla Control ou 
Option pressionada no botão Imagem. 


Nota: Este procedimento não ignora todas as caixas de diálogo de inserção de objetos. Muitos objetos, incluindo elementos PA e conjuntos 
de molduras, não inserem alocadores de espaço nem objetos de valor padrão. 


di E Uarê ) : Ra 
Modificar preferências do painel Inserir ara o início 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Na categoria Geral da caixa de diálogo Preferências, desmarque Mostrar caixa de diálogo ao inserir objetos para ocultar as caixas de 


diálogo ao inserir objetos como imagens, tabelas, scripts e elementos de cabeçalho ou mantenha pressionada a tecla Control (Windows) ou 
Option (Macintosh) ao criar o objeto. 


Ao inserir um objeto com essa opção desativada, os valores de atributo padrão são aplicados. Use o Inspetor de propriedades para 
alterar as propriedades de objeto depois de inserir o objeto. 


Ron E ã ã z j Ê j Para o início 
Adicionar, excluir ou gerenciar itens na categoria Favoritos do painel Inserir 


1. Selecione alguma categoria no painel Inserir. 


2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na área em que os botões são exibidos; 
em seguida, selecione Personalizar favoritos. 


3. Na caixa de diálogo Personalizar objetos favoritos, faça as alterações necessárias e clique em OK. 
* Para adicionar um objeto, selecione-o no painel Objetos disponíveis à esquerda e, em seguida, clique na seta entre os dois painéis ou 
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clique duas vezes no objeto no painel Objetos disponíveis. 


Nota: Você pode adicionar um objeto de cada vez. Você não pode selecionar o nome de uma categoria, como Comum, para adicionar 
uma categoria inteira à lista de favoritos. 


e Para excluir um objeto ou separador, selecione um objeto no painel Objetos favoritos à direita e, em seguida, clique no botão Remover 
objeto selecionado na lista Objetos favoritos, acima do painel. 


* Para mover um objeto, selecione um objeto no painel Objetos favoritos à direita e, em seguida, clique no botão de seta para cima ou 
para baixo, acima do painel. 


e Para adicionar um separador abaixo de um objeto, selecione um objeto no painel Objetos favoritos à direita e, em seguida, clique no 
botão Adicionar separador, abaixo do painel. 


4. Se você não estiver na categoria Favoritos do painel Inserir, selecione essa categoria para ver suas alterações. 


= E ai a = P, iníci 
Inserir objetos usando botões na categoria Favoritos ras 


e Selecione a categoria Favoritos, no menu pop-up Categoria, no painel Inserir, e clique no botão de algum objeto favorito que você tenha 
adicionado. 


Er a a E é, E P. iníci 
Exibir o painel Inserir como uma Barra de inserção horizontal did 


Diferente dos outros painéis do Dreamweaver, você pode arrastar o painel Inserir para fora de sua posição de encaixe padrão e soltá-lo em uma 
posição horizontal na parte superior da janela Documento. Ao fazer isso, ele se altera de um painel para uma barra de ferramentas (embora você 
não possa ocultá-lo e exibi-lo assim como faz com as outras barras de ferramentas). 


1. Clique na aba do painel Inserir e arraste-a para a parte superior da janela Documento. 


DW file Edit View Insert Modiy Format Commé 


2. Quando você visualizar uma linha azul horizontal na parte superior da janela Documento, solte o painel Inserir na posição. 


Nota: A Barra de inserção horizontal, por padrão, também faz parte da área de trabalho Clássica. Para alternar para a área de trabalho Clássica, 
selecione Clássica, no alternador de área de trabalho da Barra de aplicativos. 


Para o início 


Reverter a Barra de inserção horizontal para um grupo de painéis 


1. Clique na alça da Barra de inserção horizontal (na parte esquerda da Barra de inserção) e arraste-a para o local onde os seus painéis estão 
encaixados. 
2. Posicione o painel Inserir e solte-o. Uma linha azul indica onde você pode soltar o painel. 


a a = « P. iníci 
Mostrar categorias da Barra de inserção horizontal como abas dat 


e Clique na seta ao lado do nome da categoria, na extremidade esquerda da Barra de inserção horizontal, e selecione Mostrar como abas. 


Para o início 
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Mostrar categorias da Barra de inserção horizontal como um menu 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na aba de uma categoria da Barra de 
inserção horizontal e, em seguida, selecione Mostrar como menus. 


A Adobe também recomenda 
e Visão geral do painel Inserir 


(ec As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Painel CSS Designer 


Painel da CSS Designer (Janela > CSS Designer) é um Inspetor de propriedade da CSS que permite criar “visualmente” estilos e arquivos da 
CSS e definir propriedades, junto com consultas de mídia. 


ALL SOURCES 


noto e 


ê Im Layout 
boilerplate.css Hm c=you 

a width : auto 
à ' E height : auto 
jquery.ui.core.min.css 
Ê . A min-width : 0px 
jquery-ui-1.10.1.custom.mi... 
) NR k min-height : 0 px 
jquery.ui.dialog.min.css j 
. RU É max-width : none 


A max-height : none 
display : inline 
SHANIA: box-sizing : content-box 
print 
margin : Set Shorthand 


only screen and ( min-width :. 
only screen and ( min-wi 


Selectors dio 0 px 
[Prece 
COMPUTED 
-deskRightPadding 
«mobileSidePadding, table... 
«mobileSidePadding 
.mobileSidePadding 
blogaArticle 

blogaArticle 

blogArticle 

fluid 

article, aside, details, figc... 


padding : Set Shorthand 


Painel CSS Designer 


Nota: você pode usar Ctrl/Cmd+ Z para desfazer ou Ctrl/Cmd + Y para refazer todas as ações executadas na CSS Designer. As alterações são 
automaticamente refletidas na Visualização dinâmica, e o arquivo relevante da CSS também é atualizado. Para informar a você que o arquivo 
relacionado foi alterado, a guia do arquivo afetado é destacada por um tempo (aproximadamente 8 segundos). 


Criação e anexação de folhas de estilo 

Definição de consultas de mídia 

Definição dos seletores da CSS 
Cópia e cola de estilos 

Definição de propriedades do CSS 
Definição de margens, preenchimento e posição 
Definição de propriedades de borda 
Desativação ou exclusão de propriedades 
Atalhos do teclado 

Identificação de elementos de página associados a um Seletor CSS (13.1) 
Desativação do realce dinâmico 


Consulte também 


e Layout das páginas com CSS 
e Efeitos de transição do CSS3 
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O painel CSS Designer consiste nos seguintes painéis: 


Origens Lista todas as folhas de estilo da CSS associadas ao documento. Com esse painel, você pode criar e anexar uma CSS ao documento 
ou definir estilos no documento. 


(Mídia Lista todas as consultas de mídia na origem selecionada no painel Origens. Se você não selecionar uma CSS específica, esse painel 
exibirá todas as consultas de mídia associadas ao documento. 


Seletores Lista todos os seletores na origem selecionada no painel Origens. Se você também selecionar uma consulta de mídia, esse painel 
reduzirá a lista de seletores da consulta de mídia em questão. Se nenhuma CSS ou consulta de mídia for selecionada, esse painel exibirá todos 
os seletores no documento. 

Quando você seleciona Global no painel (QMídia, todos os seletores não incluídos em uma consulta de mídia da fonte selecionada são exibidos. 


Propriedades Exibe as propriedades que você pode definir para o seletor especificado. Para obter mais informações, consulte Definição de 
propriedades. 

O CSS Designer é sensível ao contexto. Isso significa que, para qualquer contexto fornecido ou elemento de página selecionado, você pode exibir 
as propriedades e os seletores associados. Caso contrário, quando você selecionar um seletor no CSS Designer, as consultas de mídia e origem 
associadas serão realçadas nos respectivos painéis. 


Tutorial de vídeo 
e Adicionar estilo a páginas da Web com o painel CSS Designer 


atentos 
Emo  ineçiseos morenim meus mera t 10 som riso pues d + 3) 
Gude | gg | Conçr | úrco | | doveat met MD, O OD ici Mona rata radataa Tonia! 


The posstion vianao 
pLURALIST e 


for 


ADVENTURE 2 K 


E dese DK gr oeteroeemtm os C) fg Gem fuidherobomelero - MH = o 
» ve om “ me =|] +<< 
n 
get - at nIL, “ 
Sora ca 


Dw Do Et fes Jum Mid Fmest Commenda Du fóncico bote 


dentes x | 
ES  ienros soros marques meat O sc ricos puuerpusd + 3» 
Code | at | Cor Duro | TM] recado test O, O O esiciim um nintendo EPPPE SS Som sa | 


CSS Designer mostrando as propriedades do cabeçalho selecionado na visualização dinâmica 
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Nota: quando você seleciona um elemento de página, “Computado” é selecionado no painel Seletores. Clique em um seletor para exibir a 
origem, a consulta de mídia ou as propriedades associadas. 


Para exibir todos os seletores, selecione Todas as origens no painel Origens. Para exibir os seletores que não pertencem a consultas de mídia na 


fonte selecionada, clique em Global no painel OMídia. 


Tutorial de vídeo 
e Usando o painel CSS Designer 


O, = E Para o início 
Criação e anexação de folhas de estilo ai 


1. No painel Origens do painel CSS Designer, clique em kd e em uma das seguintes opções: 


e Criar um novo arquivo CSS: para criar e anexar um novo arquivo CSS ao documento 
e Anexar arquivo CSS existente: para anexar um arquivo CSS existente ao documento 


e Definir na página: para definir uma CSS no documento 
Com base na opção selecionada, as caixas de diálogo Criar um novo arquivo CSS ou Anexar arquivo CSS existente são exibidas. 
2. Clique em Procurar para especificar o nome do arquivo CSS e, se você estiver criando uma CSS, o local para salvar o novo arquivo. 


3. Siga um destes procedimentos: 


e Clique em Vincular para vincular o documento do Dreamweaver ao arquivo CSS. 


e Clique em Importar para importar o arquivo CSS no documento. 


4. (Opcional) Clique em Uso condicional e especifique a consulta de mídia que deseja associar ao arquivo CSS. 


e RD já sedã Para o início 
Definição de consultas de mídia 


1. No painel CSS Designer, clique em uma origem CSS no painel Origens. 


2. Clique em kd no painel (QMídia para adicionar uma nova consulta de mídia. 
A caixa de diálogo Defina a consulta de mídia aparece e relaciona todas as condições de consulta de mídia compatíveis com o 
Dreamweaver. 

3. Selecione as Condições conforme desejar. Para obter informações detalhadas sobre consultas de mídia, consulte este artigo. 
Verifique se você especificou valores válidos para todas as condições selecionadas. Caso contrário, as consultas de mídia correspondentes 
não serão criadas com sucesso. 
Nota: no momento, somente a operação “e” está disponível para várias condições. 


Se você adicionar as condições de consulta de mídia pelo código, apenas as condições permitidas serão preenchidas na caixa de diálogo Definir 
consulta de mídia. A caixa de texto Código na caixa de diálogo, entretanto, mostra o código completo (incluindo condições não permitidas). 


Se você clicar em uma consulta de mídia na visualização dinâmica/de design, a janela de visualização é alterada para corresponder à consulta 
de mídia selecionada. Para exibir o tamanho total da janela de visualização, clique em Global no painel (OMídia. 


Definição dos seletores da CSS Para o início 


1. No CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mídia no painel QMídia. 


2. No painel Seletores, clique em E3. com base no elemento selecionado no documento, a CSS Designer identifica de forma inteligente e 
solicita o seletor relevante (até três regras). 


Execute um ou mais destes procedimentos: 


e Use as teclas de seta para cima ou para baixo para tornar o seletor sugerido mais ou menos específico. 


e Exclua a regra sugerida e digite o seletor obrigatório. Certifique-se de digitar o nome do seletor junto com o identificador do Tipo de 
seletor. Por exemplo, se você estiver especificando uma ID, o nome do seletor deverá ter o prefixo “*”. 


e Para pesquisar um seletor específico, use a caixa de pesquisa na parte superior do painel. 
* Para renomear um seletor, clique no seletor e digite o nome necessário. 
* Para reorganizar os seletores, arraste-os até a posição desejada. 


46 


Para mover um seletor de uma origem para outra, arraste-o até a origem necessária no painel Origem. 

* Para duplicar um seletor na origem selecionada, clique com o botão direito do mouse no seletor e clique em Duplicar. 

e Para duplicar um seletor e adicioná-lo a uma consulta de mídia, clique com o botão direito do mouse no seletor, passe o mouse sobre 
Duplicar na consulta de mídia e escolha a consulta de mídia. 


Nota: a opção Duplicar na consulta de mídia está disponível somente quando a fonte do seletor selecionado contém consultas de 
mídia. Não é possível duplicar um seletor de uma fonte em uma consulta de mídia de outra fonte. 


Cópia e cola de estilos 
Agora é possível copiar estilos de um seletor e colá-lo em outro. Você pode copiar todos os estilos ou copiar apenas a categoria de estilos 
específica como Layout, Texto e Borda. 


Clique com o botão direito no mouse em um seletor e escolha entre as opções disponíveis: 


Selectors 


Filter CSS Rules | border-coliapse 
COMPUTED border-spadng 


a Background 


Go to Code background-color . 


Copy all Styles 

Copy Styles Copy Layout Styles 

Paste Styles Copy Text Styles 

Duplicate Copy Border Styles 

Duplicate into media query Copy Background Styles 
-mobileSidePadding Copy Animation/Transition Styles 
.mobileSidePadding Copy Other Styles 


Copiar estilos usando a CSS Designer 


* Se um seletor não tiver estilos, as opções Copiar e Copiar todos os estilos estarão desabilitadas. 


e A opção Colar estilos fica desabilitada para sites remotos que não podem ser editados. Mas a opção Copiar e Copiar todos os estilos 
fica disponível. 


« É possível colar estilos já existentes parcialmente em um seletor (sobreposição). A união 
de todos os seletores é colada. 


* Também é possível Copiar e colar estilos para diferentes integrações de arquivos da CSS — Estilos de importação, link e inline 


Para o início 


Definição de propriedades do CSS 


As propriedades são agrupadas nas seguintes categorias e representadas por ícones diferentes na parte superior do painel Propriedades: 


e Layout 
e Texto 
- Borda 
e Fundo 
e Outros (lista de propriedades “somente texto” e não propriedades com controles visuais) 
Nota: antes de editar as propriedades de um seletor CSS, identifique os elementos associados a ele usando a Inspeção inversa. Ao fazer isso, 


você pode avaliar se todos os elementos realçados na Inversão inversa realmente exigem alterações. Consulte o link para obter mais 
informações sobre a Inspeção inversa. 


Marque a caixa de seleção Exib. conj. para exibir apenas as propriedades de grupo. Para exibir todas as propriedades que você pode especificar 
para um seletor, desmarque a caixa de seleção Exib. conj. 
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FE Layout 


width : auto 

height : auto 

min-width : 0 px 

min-height : 0 px 

max-width : 500 px 

max-height : none 

display : inline 

box-sizing : content-box 

margin rthan 
0 px 0 px 


0 px 


Todas as propriedades 


mm E 


Im Layout 
max-width : 500 px 


(es Custom 
E 


Somente propriedades definidas 


Para definir uma propriedade, como width ou border - collapse, clique nas opções necessárias exibidas perto da propriedade no painel 
Propriedades. Para obter informações sobre como definir o plano de fundo do gradiente ou controles de caixa como margens, preenchimento e 
posição, consulte os links abaixo: 

e Definição de margens, preenchimento e posição 

e Aplicação de degradês ao fundo 

e Uso de layouts flexíveis de caixa 


As propriedades substituídas são indicadas em formato tachado. 
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Formato tachado para propriedades substituídas 


Definição de margens, preenchimento e posição 
Usando os controles de caixa no painel Propriedades da CSS Designer, é possível definir rapidamente as propriedades de margens, 


preenchimento e posição. Se preferir o código, você poderá especificar o código abreviado para margem e preenchimento nas caixas de edição 
rápida. 


margin : 14px21px 20px 30px 
14 px 
30 px Fotd 21 px 
20 px 


propriedade “margin” 


padding : 14px20px 
14 px 
20 px E) 20 px 
ES 


propriedade “padding” 


position * séabir 
RR Sida praise 
auto 
left: right 
1 px co japs 
bottom 


propriedade “position” 


Clique nos valores e digite o valor necessário. Se desejar que os quatro valores sejam iguais e alterados simultaneamente, clique no ícone de 
vínculo (*) no centro. 


A qualquer momento, você pode desativar (2) ou excluir (E) valores específicos, por exemplo, o valor da margem esquerda, e manter os valores 
das margens direita, superior e inferior. 


margin : 14px21px20px30px 
14 px 
| 
30 px Fat 21 px 
ot | 
20 px 


Ícones de desativar, excluir e vincular das margens 


Definição de propriedades de borda 
As propriedades de controle de bordas são organizadas em guias lógicas para ajudá-lo a exibir ou alterar as propriedades. 
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Se preferir o código, você poderá especificar o código abreviado para bordas e raio da borda na caixa de texto de edição rápida. 


Para especificar as propriedades de controle de bordas, defina a propriedade na guia “Todos os lados”. As outras guias são ativadas e as 
propriedades definidas na guia “Todos os lados” são refletidas nas bordas individuais. 


Ao alterar uma propriedade nas guias de borda individual, o valor da propriedade correspondente na guia “Todos os lados” muda para “indefinido” 
(valor padrão). 


No exemplo abaixo, a cor da borda estava definida como preto e foi alterada para vermelho na borda superior. 


HUGE BACKPACK SALE—$99! 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure— 


from day trips to extended excursions, and more. 


SHOP NOW mp 


border : medium solid £1D... 
o FEMEA 

width : medium 

style : solid 

color EE] ssvicrc 

border ns: medium solid £1D... 
Diolda DO 

width : medium 

style : solid 

color 2 E) ssorcic 

border : medium solid 1D... 
Oo tic 

width : medium 

style : solid 

color E E *1DICIC 


Cor da borda definida como preto em todos os lados 
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HUGE BACKPACK SALE—$99! 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure— 


from day trips to extended excursions, and more. 


SHOP NOW =p 


: Set Shorthand 


border 
O [Ev ED E 
width 
style 
color 


: medium 
: solid 


4] un 


: Set Shorthand 


| O FERERE 


border 
O 
width : medium 
style 
color 


: solid 


2 E) crime 


: medium solid... 


=p E 


border 
OD 
width : medium 
style 
color 


: solid 


BE sinicic 


O código inserido é baseado na configuração da preferência para o formato abreviado ou longo. 


Os controles de exclusão e desativação estão disponíveis para propriedades individuais como nas versões anteriores à Dreamweaver CC 2014. 
Agora é possível usar a tecla Delete ou desativar controles em nível de grupo de controle de fronteiras para aplicar essas ações a todas as 
propriedades. 


Set Shorthand 


Ola DO 


border 
[| 
width [Top [redium 
style 
color 


: solid 


EE <e02121 


border : Set Shorthand 
DÓ O dc 
width : medium 
style : solid 
color 2 JE se02121 
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Durante Inspeção, as guias são focadas com base na prioridade das guias “definidas”. A prioridade mais alta é para a guia “Todos os lados”, 


seguida por “Superior, “Direita”, “Inferior” e “Esquerda”. Por exemplo, se estiver definido um valor apenas para a borda superior, o modo 
computado direciona o foco à guia “Superior”, ignorando a guia “Todos os lados”, pois não havia um valor definido para “Todos os lados”. 


Desativação ou exclusão de propriedades 
O painel do CSS Designer permite desativar ou excluir cada propriedade. A seguinte captura de tela mostra os ícones de desativar (2) e excluir ( 
B) da propriedade width. Esses ícones ficam visíveis quando você passa o mouse na propriedade. 


traase-hesght 
mari | 


Desativar/excluir propriedade 


Atalhos do teclado 
Você pode adicionar ou excluir seletores e propriedades da CSS usando atalhos de teclado. Também é possível navegar entre os grupos de 
propriedades no painel Propriedades. 


Atalho Fluxo de trabalho 
CTRL + Alt +[Shift =] Adiciona Seletor (se o controle estiver na seção de seletor) 


Adiciona Seletor (se o controle estiver em qualquer lugar no 


CTRL + Al+ S SR 
aplicativo) 


CTRL + Alt +[Shift =] Adiciona Propriedade (se o controle estiver na seção de 


propriedade) 

CTRL + Alt P Adiciona Propriedade (se o controle estiver em qualquer lugar no 
aplicativo) 

Select + Delete Exclui o seletor, se ele estiver selecionado 


Salta entre as seções, enquanto estiver no subpainel de 


CTRL + Alt + (PgUp/PgDn) propriedades 


Para o início 


Identificação de elementos de página associados a um Seletor CSS (13.1) 


Geralmente, um único Seletor CSS é associado a vários elementos de página. Por exemplo, o texto no conteúdo principal de uma página, um 
cabeçalho, e um texto de rodapé podem ser associado ao mesmo Seletor CSS. Ao editar as propriedades do Seletor CSS, todos os elementos 
associados ao seletor serão afetados, incluindo aqueles que não serão alterados. 


Realce dinâmico ajuda a identificar todos os elementos associados a um Seletor CSS. Para alterar apenas um elemento ou alguns elementos, 
você pode criar um novo Seletor CSS para os elementos e editar as propriedades. 


Para identificar elementos de página associados a um seletor CSS, passe o mouse sobre o botão na Visualização dinâmica (com código Ativo 
“desligado”). O Dreamweaver realça os elementos associados com linhas pontilhadas. 
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8) O 


HETSETS IMCKETS CHARS 


fesuredProducts Text p 
festuredProductsText p 


HUGE BACKPACK SALE—$991 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure— 
from day trips to extended excursions, and more 


ErSuIs IaLKETS CHARS 
fosturedProductsText p 


festuredProducts Text p 


HUGE BACKPACK SALE= $091 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure — 
from day trips to extended excursions, and more 


Para remover o realce azul em torno de elementos, use o seletor novamente. 


Nota: a tabela a seguir resume as situações em que o Realce dinâmico não está disponível. 


Modo Código ativo Realce dinâmico exibido? 
Code ND ND 
Design ND ND 
aids LIGADO s 
nene (o botão está pressionado) Boo 
DESLIGADO Sim 


Desativação do realce dinâmico 
O Realce dinâmico está ativado por padrão. Para desativar o Realce dinâmico, clique nas opções de Visualização dinâmica na barra de 
ferramentas Documento, e clique em Desativar realce dinâmico. 


As publicações do Twitter! e do Facebook não são cobertas pelos termos do Creative Commons. 
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Configuração do ambiente de codificação 


Uso de áreas de trabalho orientadas a codificador 
Visualização de código 

Personalização de atalhos de teclado 

Abertura de arquivos na Visualização de código por padrão 


Z E gi Para o início 
Uso de áreas de trabalho orientadas a codificador 
Você pode adaptar o ambiente de codificação no Dreamweaver para que atenda às suas necessidades de trabalho. Por exemplo, você pode 
alterar o modo de exibição do código, configurar atalhos de teclado diferentes ou importar e usar sua biblioteca de tags favorita. 


O Dreamweaver vem com vários layouts de áreas de trabalho desenvolvidos para obter a experiência de codificação ideal. No alternador de área 
de trabalho da Barra de aplicativos, você pode selecionar as áreas de trabalho Desenvolvedor de aplicativo, Desenvolvedor de aplicativo Plus, 
Codificador e áreas de trabalho do Codificador Plus. Todas essas áreas de trabalho mostram, por padrão, a Visualização de código (na janela 
Documento inteira ou nas visualizações de código e de design) e têm painéis encaixados no lado esquerdo da tela. Todos, menos o 
Desenvolvedor de aplicativo Plus, eliminam o Inspetor de propriedades da visualização padrão. 


Se nenhuma das áreas de trabalho predefinidas oferecer exatamente o que você precisa, é possível personalizar seu próprio layout de área de 
trabalho, abrindo e encaixando painéis no local desejado e, em seguida, salvando a área de trabalho como área personalizada. 


a a ai = ds 
Visualização de código ara o início 


Você pode visualizar o código-fonte do documento atual de várias maneiras: exibindo-o na janela Documento através da ativação da Visualização 
de código, dividindo a janela Documento para exibir a página e seu código associado ou trabalhando no Inspetor de código em uma janela de 
codificação separada. O Inspetor de código funciona exatamente como a Visualização de código. Considere-o uma Visualização de código do 
documento atual que pode ser desanexada. 


Visualização de código na janela Documento 
“& Selecione Exibir > Código. 


Codificação e edição de uma página simultaneamente na janela Documento 
1. Selecione Exibir > Código e design. 


O código aparece no painel superior e a página aparece no painel inferior. 


2. Para exibir a página na parte superior, selecione Visualização de design visível, no menu Opções de visualização da barra de ferramentas 
Documento. 

3. Para ajustar o tamanho dos painéis na janela Documento, arraste a barra divisora para a posição desejada. A barra divisora está localizada 
entre os dois painéis. 


A Visualização de código é atualizada automaticamente quando você fizer alterações na Visualização de design. No entanto, após fazer 
alterações na Visualização de código, atualize manualmente o documento na Visualização de design clicando em Visualização de design ou 
pressionando F5. 


Visualização de código em uma janela separada com o Inspetor de código 
O Inspetor de código permite que você trabalhe em uma janela de codificação separada, exatamente como na Visualização de código. 


*& Selecione Janela > Inspetor de código. A barra de ferramentas inclui as seguintes opções: 

Gerenciamento de arquivos Insere ou obtém o arquivo. 

Visualizar/depurar no navegador Visualiza ou depura o documento em um navegador. 

Atualizar Visualização de design Atualiza o documento na Visualização de design para que ele reflita quaisquer alterações feitas no código. As 
alterações feitas no código só aparecerão automaticamente na Visualização de design depois que você executar determinadas ações, como 
salvar o arquivo ou clicar neste botão. 

Referência Abre o painel Referência. Consulte Uso do material de referência a linguagem. 

Navegação de código Permite mover-se rapidamente pelo código. Consulte Acessar a uma função JavaScript ou VBScript. 

Opções de visualização Permite que você determine como o código será exibido. Consulte Definição da aparência do código. 

Para usar a Barra de ferramentas de codificação na lateral esquerda da janela, consulte Inserir código com a Barra de ferramentas de 
codificação. 


54 


E Aa P, iníci 
Personalização de atalhos de teclado isca 


Você pode usar seus atalhos de teclado favoritos no Dreamweaver. Se estiver acostumado a usar atalhos de teclado específicos, por exemplo, 
Shift+Enter para adicionar uma quebra de linha ou Control+G para ir a uma posição específica no código, você poderá adicioná-los em 
Dreamweaver usando o Editor de atalhos de teclado. 


Para obter instruções, consulte Personalizar atalhos de teclado. 


E E E as do E ss P, iníci 
Abertura de arquivos na Visualização de código por padrão pias, 


Quando você abre um tipo de arquivo que normalmente não contém nenhum HTML (por exemplo, um arquivo JavaScript), o arquivo é aberto na 
Visualização de código (ou no Inspetor de código), e não na Visualização de código. É possível especificar quais tipos de arquivo serão abertos 
na Visualização de código. 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
2. Selecione Tipos de arquivos/editores na lista Categoria à esquerda. 


3. Na caixa Abrir na Visualização de código, adicione a extensão do tipo de arquivo que você deseja abrir automaticamente na Visualização 
de código. 


Digite um espaço entre as extensões de nome de arquivo. É possível adicionar quantas extensões desejar. 


Mais tópicos da Ajuda 


(9) ex-nc-sa ) 
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Configurações das preferências de codificação 


Sobre as preferências de codificação 

Definição da aparência do código 

Alteração do formato de código 

Definição das preferências de regravação de código 
Definição das cores de código 

Uso de um editor externo 


E o PET 
Sobre as preferências de codificação RA 


Você pode definir as preferências de codificação como formatação e cores de código, entre outros, para atender às suas necessidades 
específicas. 


Nota: Para definir preferências avançadas, use o Editor de bibliotecas de tags (consulte Gerenciamento de bibliotecas de tags). 


RÉ A 5 RT R iníci 
Definição da aparência do código id 


Você pode definir a quebra automática de linha, exibir números de linha para o código, realçar o código inválido, definir a cor da sintaxe dos 
elementos de código, definir o recuo e exibir caracteres ocultos no menu Exibir > Opções de visualização de código. 

1. Visualize um documento na Visualização de código ou no Inspetor de código. 

2. Siga um destes procedimentos: 


e Selecione Exibir > Opções de visualização de código 


E 


* Clique no botão Opções de visualização =. na barra de ferramentas na parte superior da Visualização de código ou no Inspetor de 
código. 


3. Marque ou desmarque qualquer uma destas opções: 
Quebra automática de palavra Quebra automaticamente a linha de código para que você possa visualizá-lo sem rolar a tela 
horizontalmente. Esta opção não insere quebras de linha; ela apenas facilita a visualização de código. 


Números de linha Exibe números de linha na lateral do código. 


Caracteres ocultos Exibe caracteres especiais no lugar do espaço em branco. Por exemplo, um ponto substitui cada espaço, uma divisa 
dupla substitui cada tabulação e um marcador de parágrafo substitui cada quebra de linha. 
Nota: As quebras de linha manuais usadas pelo Dreamweaver não são exibidas com um marcador de parágrafo. 


Realçar código inválido Faz com que o Dreamweaver realce em amarelo todo o código HTML inválido. Quando você selecionar uma tag 
inválida, o Inspetor de propriedades exibirá as informações sobre como corrigir o erro. 


Sinalização da sintaxe por cores Ativa ou desativa a codificação por cores. Para informações sobre a alteração do esquema de cores, 
consulte Definição das cores de código. 


Recuar automaticamente Faz com que o código recue automaticamente quando você pressiona Enter enquanto escreve o código. A nova 
linha de código é recuada no mesmo nível da linha anterior. Para obter informações sobre a alteração do espaçamento do recuo, consulte a 
opção Tamanho da tabulação em Alteração do formato de código. 


Alteração do formato de código di 


Você pode alterar a aparência do código especificando preferências de formatação, como recuo, tamanho da linha e uso de 
maiúsculas/minúsculas dos nomes de tag e atributo. 


Todas as opções de formatação de código, exceto a opção Ignorar maiúscula/minúscula de, serão aplicadas somente aos novos documentos ou 
às adições a documentos criadas subsequentemente. 


Para reformatar documentos HTML existentes, abra o documento e selecione Comandos > Aplicar Formatação de Origem. 
1. Selecione Editar > Preferências. 


2. Selecione Formato do Código na lista Categoria à esquerda. 


3. Defina uma das seguintes opções: 
Recuo Indica se o código gerado pelo Dreamweaver deve ser recuado (de acordo com as regras de recuo especificadas nessas 
preferências) ou não. 
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Nota: A maioria das opções de recuo nesta caixa de diálogo se aplica somente ao código gerado pelo Dreamweaver, e não ao código 
digitado. Para fazer com que cada nova linha do código digitado recue no mesmo nível da linha anterior, selecione a opção Exibir > Recuo 
automático das opções de visualização de código. Para obter mais informações, consulte Definição da aparência do código. 


Com (Caixa de texto e menu pop-up) Especifica quantos espaços ou tabulações o Dreamweaver deve usar para recuar o código gerado. 
Por exemplo, se você digitar 3 na caixa e selecionar Tabulações no menu pop-up, o código gerado pelo Dreamweaver será recuado por 
meio de três caracteres de tabulação para cada nível de recuo. 


Tamanho da tabulação Determina o tamanho de cada caractere de tabulação na Visualização de código. Por exemplo, se a opção 
Tamanho da tabulação for definida como 4, cada tabulação será exibida na Visualização de código como um espaço em branco de quatro 
caracteres. Se, além disso, a opção Recuar com for definida como 3 Tabulações, o código gerado pelo Dreamweaver será recuado usando 
três caracteres de tabulação para cada nível de recuo, que aparece na Visualização de código como um espaço em branco de doze 
caracteres. 

Nota: O Dreamweaver aplica o recuo usando espaços ou tabulações. Ele não converte uma série de espaços em uma tabulação ao inserir 
código. 


Tipo de quebra de linha Especifica o tipo de servidor remoto (Windows, Macintosh ou UNIX) que hospeda o site remoto. A escolha do tipo 
corretor de caracteres de quebra de linha garante que o código-fonte HTML aparecerá corretamente quando visualizado no servidor 
remoto. Essa configuração também será útil que você estiver trabalhando com um editor de texto externo que reconheça determinados 
tipos de quebras de linha. Por exemplo, use CR LF (Windows) se o Bloco de Notas for o editor externo e use CR (Macintosh) se o 
SimpleText for o editor externo. 

Nota: No caso dos servidores conectados através do FTP, esta opção se aplica somente ao modo de transferência binário. O modo de 
transferência ASCII do Dreamweaver ignora esta opção. Se você baixar os arquivos usando o modo ASCII, o Dreamweaver definirá as 
quebras de linha com base no sistema operacional do seu computador. Se você carregar os arquivos usando o modo ASCIlI, as quebras de 
linha serão definidas como CR LF. 


Padrão de maiúsc./minúsc. da tag e Padrão de maiúsc./minúsc. do atributo Controla o uso de maiúsculas/minúsculas dos nomes de 
tag e atributo. Estas opções se aplicam a tags e atributos inseridos ou editados na Visualização de design, mas não se aplicam a tags e 
atributos digitados diretamente na Visualização de código ou a tags e atributos já presentes em um documento quando estes são abertos (a 
menos que você também selecione uma ou ambas as opções Ignorar maiúscula/minúscula de:). 

Nota: Essas preferências se aplicam somente a páginas HTML. O Dreamweaver as ignora em páginas XHTML porque as tags e os 
atributos em maiúsculas são XHTML inválidos. 


Ignorar maiúscula/minúscula de: Tags e Atributos Especifica se as opções de maiúsculas/minúsculas especificadas serão sempre 
forçadas, inclusive quando você abrir um documento HTML existente. Quando você selecionar uma dessas opções e clicar em OK para 
ignorar a caixa de diálogo, todas as tags ou atributos do documento atual serão imediatamente convertidos no uso de 
maiúsculas/minúsculas especificado, assim como todas as tags ou atributos de cada documento que você abrir desse momento em diante 
(até você desmarcar esta opção novamente). As tags ou os atributos digitados na Visualização de código e no Quick Tag Editor também 
são convertidos no uso de maiúsculas/minúsculas, bem como as tags ou os atributos que você insere usando o painel Inserir. Por exemplo, 
se você deseja que os nomes de tag sejam sempre convertidos em minúsculas, especifique minúsculas na opção Padrão de 
maiúsc./minúsc. da tag e selecione a opção Ignorar maiúscula/minúscula de: Tags. Quando você abrir um documento que contenha nomes 
de tag em maiúsculas, o Dreamweaver os converterá em minúsculas. 

Nota: As versões antigas do HTML permitiam nomes de tag e atributo em maiúsculas ou minúsculas, mas o XHTML requer minúsculas 
nos nomes de tag e atributo. A Web está adotando XHTML; portanto, geralmente é melhor usar nomes de tag e atributo em minúsculas. 


Tag TD: Não incluir quebra de linha na tag TD Lida com um problema de processamento que ocorre em alguns navegadores antigos 
quando há espaço em branco ou quebras de linha imediatamente após uma tag <td> ou imediatamente antes de uma tag </td>. Quando 
você seleciona esta opção, o Dreamweaver não grava quebras de linha depois ou antes da tag <td>, mesmo se a formatação na Biblioteca 
de tags indicar que a quebra de linha deve existir. 


Formatação avançada Permite definir opções de formatação do código Folhas de estilo em cascata (CSS) e das tags e atributos 
individuais no Editor de biblioteca de tags. 


Caractere de espaço em branco (Apenas versão em japonês) Permite selecionar &nbsp; ou espaço Zenkaku para código HTML. O 
espaço em branco selecionado nesta opção será usado para tags vazias durante a criação de uma tabela e quando a opção “Permitir 
vários espaços consecutivos” estiver ativada nas páginas de codificação em japonês. 


E A E pe PET P. iníci 
Definição das preferências de regravação de código fic 


Use as preferências de regravação de código a fim de especificar como e se o Dreamweaver modificará o código enquanto os documentos são 
abertos, ao copiar e colar elementos de formulário, e ao digitar valores de atributo e URLs usando ferramentas como o Inspetor de propriedades. 
Essas preferência não têm efeito quando você edita HTML ou scripts na Visualização de código. 


Se você desativar as opções de regravação, os itens de markup inválidos serão exibidos na janela Documento para o HTML que seria regravado. 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Selecione Regravação de código na lista Categoria à esquerda. 


3. Defina uma das seguintes opções: 
Corrigir tags abertas e aninhadas incorretamente Regrava tags de sobreposição. Por exemplo, <b><i>texto</b></i> é regravado como 
<b><i>texto</i></b>. Esta opção também insere aspas e colchetes de fechamento caso eles estejam ausentes. 
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Renomear itens de formulário ao colar Garante que você não terá nomes duplicados de objetos de formulário. Esta opção é ativada por 
padrão. 

Nota: Diferente das outras opções nesta caixa de diálogo de preferência, esta opção não se aplica quando você abre um documento, mas 
somente quando você copia e cola um elemento de formulário. 


Remover tags de finalização adicionais Exclui tags de finalização que não possuem uma tag de abertura correspondente. 


Avisar ao corrigir ou remover tags Exibe um resumo do HTML tecnicamente inválido que o Dreamweaver tentou corrigir. O resumo 
indica o local do problema (usando números de linha e coluna) para que você possa localizar a correção e garantir que ela está sendo 
processado conforme esperado. 


Nunca regravar código: Em arquivos com extensões Impede que o Dreamweaver regrave código em arquivos com as extensões 
especificadas. Esta opção é particularmente útil para arquivos que contenham tags de terceiros. 


Codificar <, >, & e " em valores de atributo usando & Garante que os valores de atributo digitados ou editados usando ferramentas do 
Dreamweaver como o Inspetor de propriedades conterão apenas caracteres legais. Esta opção é ativada por padrão. 

Nota: Esta opção e as seguintes não se aplicam às URLs digitadas na Visualização de código. Além disso, elas não ocasionam a 
alteração do código já existente em um arquivo. 


Não codificar caracteres especiais Impede que o Dreamweaver altere URLs para que usem apenas caracteres legais. Esta opção é 
ativada por padrão. 


Codificar caracteres especiais em URLs utilizando &% Garante que, ao digitar ou editar URLs usando ferramentas do Dreamweaver 
como o Inspetor de propriedades, essas URLs conterão somente caracteres legais. 


Codificar caracteres especiais em URLs utilizando % Opera da mesma maneira que a opção anterior, mas usa um método diferente de 
codificação de caracteres especiais. Esse método de codificação (através do sinal de porcentagem) pode ser mais compatível com os 
navegadores antigos, mas não funciona bem com os caracteres de alguns idiomas. 


dd aaa 2 já P. iníci 
Definição das cores de código dd 


Use as preferências de codificação por cor a fim de especificar cores para as categorias gerais de tags e elementos de código, como tags 
relacionadas a formulário ou identificadores JavaScript. Para definir preferências de cor para uma tag específica, edite a definição da tag no 
Editor de bibliotecas de tags. 

1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 

2. Selecione Codificação por cores na lista Categoria à esquerda. 


3. Selecione um tipo de documento da lista Tipos de documentos. Quaisquer edições que você fizer às preferências de codificação por cores 
afetará todos os documentos desse tipo. 


4. Clique no botão Editar esquema de cores. 


5. Na caixa de diálogo Editar esquema de cores, selecione um elemento de código na lista Estilos para e defina a cor do texto, a cor do fundo 
e (opcional) o estilo (negrito, itálico ou sublinhado). O código de amostra no painel de visualização é alterado para que corresponda às 
novas cores e estilos. 


Clique em OK para salvar as alterações e feche a caixa de diálogo Editar esquema de cores. 


6. Faça quaisquer outras seleções necessárias nas preferências de codificação por cores e clique em OK. 
Fundo padrão define a cor de fundo padrão para a Visualização de código e o Inspetor de código. 


Caracteres ocultos define a cor dos caracteres ocultos 
Plano de fundo do Código ativo define a cor do fundo para a Visualização de código ativo. A cor padrão é amarelo. 
Alterações no Código ativo define a cor de destaque do código que é alterado na Visualização de código ativo. A cor padrão é rosa. 


Plano de fundo de somente leitura define a cor de fundo para o texto somente leitura. 


é Para o início 
Uso de um editor externo 


Você pode especificar um editor externo para a edição de arquivos com extensões específicas. Por exemplo, é possível iniciar um editor de texto 


como BBEdit, Bloco de Notas ou TextEdit no Dreamweaver a fim de editar arquivos JavaScript (JS). 


Você pode atribuir editores externos diferentes para extensões diferentes. 


Definição de um editor externo para um tipo de arquivo 
1. Selecione Editar > Preferências. 


2. Selecione Tipos de arquivos/editores na lista Categoria à esquerda, defina as opções e clique em OK. 
Abrir na Visualização de código Especifica as extensões de nome de arquivo abertas automaticamente na Visualização de código do 
Dreamweaver. 
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Editor de código externo Especifica o editor de texto a ser usado. 


Recarregar arquivos modificados Especifica o comportamento quando o Dreamweaver detecta que as alterações foram feitas 
externamente em um documento aberto no Dreamweaver. 


Salvar ao iniciar Especifica se o Dreamweaver sempre deve salvar o documento atual antes de iniciar o editor, nunca salvar o documento 
ou perguntar a você se deseja salvar cada vez que iniciar o editor externo. 


Fireworks Especifica editores para vários tipos de arquivo de mídia. 


Inicialização de um editor de código externo 
*& Selecione Editar > Editar com editor externo. 

Mais tópicos da Ajuda 

Visão geral da barra de ferramentas de codificação 


Limpar arquivos em HTML do Microsoft Word 


(9) ex-nc-sa ) 
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Recolhimento de código 


Sobre o recolhimento de código 
Recolhimento e expansão de fragmentos de código 
Colagem e movimentação de fragmentos de código recolhidos 


Sobre o recolhimento de código ni 
Você pode recolher e expandir fragmentos de código para que possa visualizar diferentes seções do documento sem precisar usar a barra de 
rolagem. Por exemplo, para ver todas as regras CSS na tag head que se aplica a uma tag div mais abaixo na página, recolha tudo o que estiver 
entre as tags head e div, a fim de que você possa ver as duas seções de código simultaneamente. Embora você possa selecionar fragmentos de 
código fazendo seleções na Visualização de design ou Visualização de código, recolha o código apenas na Visualização de código. 

Nota: Os arquivos criados nos modelos do Dreamweaver exibem todos os códigos como totalmente expandidos, mesmo se o arquivo de modelo 
(dwt) contiver fragmentos de código recolhidos. 


a sá qi Para o início 
Recolhimento e expansão de fragmentos de código 
Quando você seleciona um código, um conjunto de botões de recolhimento é exibido ao lado da seleção (símbolos de menos no Windows, 
triângulos verticais no Macintosh). Clique nos botões para recolher e expandir a seleção. Quando o código é recolhido, os botões de recolhimento 
se transformam em botão de expansão (um botão de mais no Windows; um triângulo horizontal no Macintosh). 


Às vezes, o fragmento exato do código selecionado não é recolhido. O Dreamweaver usa o “recolhimento inteligente” para recolher a seleção 
mais comum e visualmente satisfatória. Por exemplo, se você selecionou uma tag recuada e, em seguida, selecionou os espaços recuados antes 
da tag também, o Dreamweaver não recolherá os espaços recuados, pois a maioria dos usuários esperará que seus recuos sejam preservados. 
Para desativar o recolhimento inteligente e forçar o Dreamweaver a recolher exatamente o que você selecionou, mantenha pressionada a tecla 
Control antes de recolher o código. 


Além disso, um ícone de aviso nos fragmentos de código recolhidos será exibido se um fragmento contiver erros ou código incompatível com 
determinados navegadores. 


Você também pode recolher o código mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a tecla Option (Macintosh) 
enquanto clica em um dos botões de recolhimento, ou clicando no botão Recolher seleção na Barra de ferramentas de codificação. 


1. Selecione algum código. 
2. Selecione Editar > Recolhimento de código e selecione qualquer uma das opções. 


Seleção de um fragmento de código recolhido 

“& Na Visualização de código, clique no fragmento de código recolhido. 

Nota: Quando você faz uma seleção na Visualização de design que é parte de um fragmento de código recolhido, o fragmento é 
automaticamente expandido na Visualização de código. Quando você faz uma seleção na Visualização de design que é um fragmento de código 
completo, o fragmento permanece recolhido na Visualização de código. 


Visualização do código em um fragmento de código recolhido sem expandi-lo 
*& Mantenha o ponteiro do mouse sobre o fragmento de código recolhido. 


Uso de atalhos de teclado para recolher e expandir código 
“& Você também pode usar os seguintes atalhos de teclado: 


Comando Windows Macintosh 
Recolher seleção Control+Shift+C Command+Shift+C 
Recolher seleção expandida Control+Alt+C Command+Alt+C 
Expandir seleção Control+Shift+E Command+Shift+E 
Recolher tag completa Control+Shift+J Command+Shift+J 
Recolher tag completa expandida Control+Alt+J Command+Alt+J 
Expandir tudo Control+Alt+E Command+Alt+E 
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E Reale E P, iníci 
Colagem e movimentação de fragmentos de código recolhidos iss 


Você pode copiar e colar fragmentos de código recolhidos ou movê-los arrastando-os. 


Cópia e colagem de um fragmento de código recolhido 
1. Selecione o fragmento de código recolhido. 


Selecione Editar > Copiar. 
Coloque o ponto de inserção no local em que você deseja colar o código. 


Ps IN 


Selecione Editar > Colar. 
Nota: Você pode realizar a colagem em outros aplicativos, mas o recolhimento do fragmento de código não será preservado. 


Arrastar um fragmento de código recolhido 
1. Selecione o fragmento de código recolhido. 


2. Arraste a seleção para o novo local. 
Para arrastar uma cópia da seleção, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Alt (Macintosh) 
e arraste. 


Nota: Não é possível arrastar para outros documentos. 


Mais tópicos da Ajuda 
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Pesquisa de arquivos com base no conteúdo ou nome do arquivo | 
Mac OS (CC) 


Este recurso está disponível somente para Mac OS. 


Use a Pesquisa dinâmica para localizar arquivos com base nos nomes dos arquivos ou em texto presente nos arquivos. O site selecionado no 
painel Arquivos é usado para pesquisa. Se não houver nenhum site selecionado no painel, a opção de pesquisa não aparecerá. 


A Pesquisa dinâmica usa a API do Spotlight em Mac OS. Qualquer personalização que você aplicar às preferências do Spotlight também é usada 
para a Pesquisa dinâmica. O Spotlight exibe todos os arquivos no seu computador que correspondem à sua consulta de pesquisa. A Pesquisa 
dinâmica pesquisa arquivos na pasta raiz do site atualmente selecionado no painel Arquivos. 


1. Selecione Editar > Pesquisa dinâmica. Como alternativa, você também pode usar CMD+SHIFT+F. O foco é definido para a caixa de texto 
da Pesquisa dinâmica no painel Arquivos. 


2. Insira a palavra ou frase na caixa de texto. Os resultados são exibidos conforme o texto é inserido na caixa de texto. 
Arquivos correspondentes Exibe um máximo de 10 nomes de arquivos que correspondem a seus critérios de pesquisa. A mensagem 
Mais de 10 resultados encontrados será exibida se houver mais de 10 arquivos correspondentes. Refine seus critérios de pesquisa se não 


encontrar o arquivo desejado nas opções exibidas. 


Texto correspondente em Exibe um máximo de 10 arquivos que contêm o texto que corresponde à palavra ou à frase que você inseriu. 
Para mais opções, clique em Localizar todos. Os resultados são exibidos no painel Pesquisa. 


3. Quando você move o cursor do mouse sobre um resultado de pesquisa, uma dica de ferramenta com o caminho relativo à raiz do arquivo é 
exibida. Pressione Enter ou clique no item para abrir o arquivo. 


Para arquivos que contêm texto correspondente, a primeira instância do texto é destacada. Use Cmd+G para navegar a outras instâncias. 


Nota: para fechar o painel de resultados da Pesquisa dinâmica, clique fora do painel ou pressione Escape/Esc 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Mais zoom e Menos zoom 


Mais zoom ou menos zoom em uma página 

Edição de uma página após a aplicação de zoom 

Panorama de uma página após a aplicação de zoom 

Preenchimento da janela Documento com uma seleção 

Preenchimento da janela Documento com uma página inteira 
Preenchimento da janela Documento com a largura inteira de uma página 


O Dreamweaver permite aumentar a ampliação (mais zoom) na janela Documento, a fim de que você possa verificar a precisão de pixel dos 
gráficos, selecionar itens pequenos com mais facilidade, criar páginas com texto pequeno, criar páginas grandes etc. 


Nota: As ferramentas de zoom estão disponíveis somente na Visualização de design. 


E raio Para o início 
Mais zoom ou menos zoom em uma pagina 


1. Clique na ferramenta Zoom (o ícone de lupa) no canto inferior direito da janela Documento. 
2. Siga um destes procedimentos: 


e Clique no ponto da página que você deseja ampliar até obter a ampliação desejada. 

* Arraste uma caixa sobre a área da página que você deseja ampliar e libere o botão do mouse. 
e Selecione um nível de ampliação predefinido no menu pop-up Zoom. 

e Digite um nível de ampliação na caixa de texto Zoom. 


Você também pode aplicar mais zoom sem usar a ferramenta Zoom. Para isso, pressione Control+= (Windows) ou Command+= 


(Macintosh). 
3. Para aplicar menos zoom (reduzir a ampliação), selecione a ferramenta Zoom, pressione Alt (Windows) ou Option (Macintosh) e clique na 
página. 
Você também pode aplicar menos zoom sem usar a ferramenta Zoom. Para isso, pressione Control+- (Windows) ou Command+- 
(Macintosh). 


ia pol ” x a Para o início 
Edição de uma página após a aplicação de zoom 


*& Clique na ferramenta Selecionar (o ícone de ponteiro) no canto inferior direito da janela Documento e clique dentro da página. 


Za: a z a Para o início 
Panorama de uma página após a aplicação de zoom 


1. Clique na ferramenta Mão (o ícone de mão) no canto inferior direito da janela Documento. 
2. Arraste a página. 


E a 
Preenchimento da janela Documento com uma seleção PER 


1. Selecione um elemento na página. 
2. Selecione Exibir > Ajustar seleção. 


i h Za: a a P iníci 
Preenchimento da janela Documento com uma página inteira ir 


“ Selecione Exibir > Ajustar tudo. 


i ] = = , & P Edo 
Preenchimento da janela Documento com a largura inteira de uma página iba 


*& Selecione Exibir > Ajustar largura. 
Mais tópicos da Ajuda 
Visão geral da barra de status 
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Atalhos do teclado 


Criar uma folha de referência para o conjunto de atalhos atual 
Personalizar atalhos de teclado 
Sobre atalhos de teclado e teclados que não são do alfabeto inglês (EUA) 


& E" E é P iníci 
Criar uma folha de referência para o conjunto de atalhos atual PRIME 


Uma folha de referência é um registro do conjunto de atalhos atual. As informações são armazenadas em uma tabela HTML. Você pode 
visualizar a folha de referência em um navegador da Web ou imprimi-la. 

1. Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 

2. Clique no botão Exportar conjunto como HTML, que é o terceiro botão na parte superior da caixa de diálogo. 

3. Na caixa de diálogo Salvar exibida, insira o nome da folha de referência e selecione o local adequado para salvar o arquivo. 


. PER 
Personalizar atalhos de teclado SR 


Use o Editor de atalho de teclado para criar suas próprias teclas de atalho, incluindo atalhos para snippets de código. Você também pode 
remover atalhos, editar atalhos existentes e selecionar um conjunto predefinido de atalhos no Editor de atalho de teclado. 


Criar um atalho de teclado 
Crie suas próprias teclas de atalho, edite os atalhos existentes ou selecione um conjunto predefinido de atalhos. 
1. Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 


2. Selecione uma das opções a seguir e clique em OK: 
Conjunto atual Permite escolher um conjunto de atalhos predefinidos incluído no Dreamweaver ou qualquer conjunto personalizado que 
você tenha definido. Os conjuntos predefinidos estão listados na parte superior do menu. Por exemplo, se você estiver familiarizado com os 
atalhos encontrados no HomesSite ou BBEdit, poderá usar esses atalhos escolhendo o conjunto predefinido correspondente. 


Comandos Permite selecionar uma categoria de comandos para edição. Por exemplo, você pode editar comandos de menu, como o 
comando Abrir, ou comandos de edição de código, como Ajustar chaves. 
Para adicionar ou editar um atalho do teclado para um snippet de código, selecione Snippet no menu pop-up Comandos. 


Lista de comandos Exibe os comandos associados à categoria selecionada no menu pop-up Comandos, junto com os atalhos 
designados. A categoria Comandos de menu exibe essa lista como uma exibição em árvore que mostra a estrutura dos menus. As outras 
categorias listam os comandos por nome (como Sair do aplicativo), em uma lista simples. 


Atalhos Exibe todos os atalhos atribuídos ao comando selecionado. 


Adicionar item (+) Adiciona um novo atalho ao comando atual. Clique nesse botão para adicionar uma nova linha em branco a Atalhos. 
Insira uma nova combinação de teclas e clique em Alterar para adicionar um novo atalho do teclado para esse comando. Você pode atribuir 
dois atalhos diferentes para cada comando; se já houver dois atalhos atribuídos a um comando, o botão Adicionar item não terá nenhum 
efeito. 


Remover item (-) Remove o atalho selecionado da lista de atalhos. 
Pressionar tecla Exibe a combinação de teclas inserida ao adicionar ou alterar um atalho. 


Alterar Adiciona a combinação de teclas mostrada em Pressionar tecla à lista de atalhos ou altera o atalho selecionado para a combinação 
de teclas especificada. 


Conjunto duplicado Duplica o conjunto atual. Dê um nome ao novo conjunto; o nome padrão é o nome do conjunto atual com a palavra 
copy anexada. 


Renomear conjunto Renomeia o conjunto atual. 


Exportar como arquivo HTML Salva o conjunto atual em uma tabela HTML para facilitar a visualização e a impressão. Você pode abrir o 
arquivo HTML no seu navegador e imprimir os atalhos para facilitar a referência. 


Excluir conjunto Exclui um conjunto. Você não pode excluir o conjunto ativo. 


Remover um atalho de um comando 
1. Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 
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2: 
3. 
4. 


No menu pop-up Comandos, selecione uma categoria de comando. 
Na lista Comandos, selecione um comando e, em seguida, selecione um atalho. 
Clique no botão Remover item (-). 


Adicionar um atalho a um comando 


d. 
2 
3. 


Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 
No menu pop-up Comandos, selecione uma categoria de comando. 
Na lista Comandos, selecione um comando. 
Para adicionar um atalho do teclado para um snippet de código, selecione Snippet no menu pop-up Comandos. 
Os atalhos atribuídos ao comando aparecem em Atalhos. 


Prepare-se para adicionar um atalho seguindo um destes procedimentos: 


e Se houver menos de dois atalhos já atribuídos ao comando, clique no botão Adicionar item (+). Uma nova linha em branco é exibida em 
Atalhos e o ponto de inserção é movido até Pressionar tecla. 


* Se já houver dois atalhos atribuídos ao comando, selecione um deles (que será substituído pelo novo atalho). Em seguida, clique em 
Pressionar tecla. 


Pressione uma combinação de teclas. A combinação de teclas é exibida em Pressionar tecla. 
Nota: Se houver um problema com a combinação de teclas (por exemplo, se a combinação de teclas já tiver sido atribuída a outro 
comando), uma mensagem explicativa será exibida abaixo de Atalhos e você talvez não consiga adicionar ou editar o atalho. 


Clique em Alterar. A nova combinação de teclas é atribuída ao comando. 


Editar um atalho existente 


4. 


arte 


Sobre atalhos de teclado e teclados que não são do alfabeto inglês (EUA) 


Selecione Editar > Atalhos de teclado (Windows) ou Dreamweaver > Atalhos de teclado (Macintosh). 
No menu pop-up Comandos, selecione uma categoria de comando. 

Na lista Comandos, selecione um comando e, em seguida, selecione um atalho a ser alterado. 
Clique em Pressionar tecla e insira uma nova combinação de teclas. 


Clique no botão Alterar para alterar o atalho. 
Nota: Se houver um problema com a combinação de teclas (por exemplo, se a combinação de teclas já tiver sido atribuída a outro 
comando), uma mensagem explicativa será exibida abaixo do campo Atalhos e você talvez não consiga adicionar ou editar o atalho. 


Para o início 


Os atalhos de teclado padrão do Dreamweaver funcionam principalmente em teclados padrão do alfabeto inglês (EUA). Os teclados de outros 
países (incluindo os produzidos no Reino Unido) talvez não forneçam a funcionalidade necessária para utilizar esses atalhos. Se seu teclado não 
der suporte a alguns atalhos ativados pelo Dreamweaver, sua funcionalidade será desativada. 


Para personalizar atalhos do teclado que funcionam com teclados que não são padrão do alfabeto inglês (EUA), consulte “Alteração dos 
mapeamentos de atalho de teclado” em Extensão do Dreamweaver. 


Mais tópicos da Ajuda 
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Otimização da área de trabalho para desenvolvimento visual 


Exibição de painéis de desenvolvimento de aplicativo da Web 

Exibir o banco de dados dentro do Dreamweaver 

Visualização de páginas dinâmicas em um navegador 

Restringir informações de banco de dados exibidas no Dreamweaver 

Definir o Inspetor de propriedades para procedimentos armazenados do ColdFusion e comandos do ASP 
Opções de Entrada 


Para o início 


Exibição de painéis de desenvolvimento de aplicativo da Web 


Selecione a categoria Dados no menu pop-up Categoria do painel Inserir para exibir um conjunto de botões que permitem adicionar conteúdo 
dinâmico e comportamentos de servidor à sua página. 


O número e o tipo de botões exibidos variam de acordo com o tipo de documento aberto na janela Documento. Mova o mouse sobre um ícone 
para exibir uma dica de ferramenta que descreve o que o botão faz. 


O painel Inserir inclui botões para adicionar os seguintes itens à página: 
* Conjuntos de registros 
e Texto dinâmico ou tabelas 
e Barras para navegação em registros 


Caso você alterne para a Visualização de código (Exibir > Código), painéis adicionais poderão ser exibidos na própria categoria painel 
Inserir, o que permite inserir código na página. Por exemplo, caso você veja uma página do ColdFusion na Visualização de código, um 
painel CFML é disponibilizado na categoria CFML do painel Inserir. 


Vários painéis oferecem forma de criar páginas dinâmicas: 


e Selecione o painel Ligações (Janela > Ligações) a fim de definir fontes de conteúdo dinâmico para a página e adicionar o conteúdo à 
página. 


* Selecione o painel Comportamentos de servidor (Janela > Comportamentos de servidor) para adicionar lógica do servidor a páginas 
dinâmicas. 


* Selecione o painel Bancos de dados (Janela >Bancos de dados) para explorar bancos de dados ou criar conexões de banco de dados. 


e Selecione o painel Componentes (Janela > Componentes) para inspecionar, adicionar ou modificar os códigos dos componentes do 
ColdFusion. 


Nota: O painel Componentes só é ativado quando se abre uma página do ColdFusion. 


Um comportamento de servidor é o conjunto de instruções inserido em uma página dinâmica durante o design e executado no servidor 
durante o runtime. 


Para obter um tutorial sobre a configuração da área de trabalho de desenvolvimento, consulte www.adobe.com/go/vid0144 br. 


ias ais 
Exibir o banco de dados dentro do Dreamweaver Eeunicio 


Depois de se conectar ao banco de dados, você pode exibir a estrutura e os dados dentro do Dreamweaver. 
1. Abra o painel Bancos de dados (Janela > Bancos de dados). 


O painel Bancos de dados exibe todos os bancos de dados para os quais você criou conexões. Caso você esteja desenvolvendo um site 
do ColdFusion, o painel exibe todos os bancos de dados que têm fontes de dados definidas no Administrador do ColdFusion. 


Nota: O Dreamweaver procura o site atual no servidor do ColdFusion que você definiu. 
Caso nenhum banco de dados seja exibido no painel, você deve criar uma conexão de banco de dados. 


2. Para exibir as tabelas, os procedimentos armazenados e as visualizações no banco de dados, clique no sinal de adição (+) ao lado de uma 
conexão na lista. 


3. Para exibir as colunas da tabela, clique no nome de uma tabela. 
Os ícones da coluna refletem o tipo de dados e indicam a chave primária da tabela. 


4. Para exibir os dados de uma tabela, clique com o botão direito do mouse (Windows) ou clique mantendo a tecla Control pressionada 
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(Macintosh) no nome da tabela na lista e selecione Exibir dados no menu pop-up. 


. E a ia d E a Para o início 
Visualização de páginas dinâmicas em um navegador 
Os desenvolvedores de aplicativo da Web costumam depurar as páginas clicando nelas normalmente em um navegador da Web. Você pode 
exibir rapidamente páginas dinâmicas em um navegador sem carregá-las inicialmente em um servidor (pressione F12). 


Para visualizar páginas dinâmicas, preencha a categoria Servidor de teste da caixa de diálogo Definição de sites. 


Você pode especificar que o Dreamweaver usa arquivos temporários, e não os arquivos originais. Com essa opção, o Dreamweaver executa uma 
cópia temporária da página em um servidor Web antes de exibi-la no navegador. (Em seguida, o Dreamweaver exclui o arquivo temporário do 
servidor.) Para definir essa opção, selecione Editar > Preferências > Visualizar no navegador. 


A opção Visualizar no navegador não carrega páginas relacionadas como, por exemplo, uma página de resultados ou detalhada, arquivos 
dependentes como arquivos de imagem ou inclusões do servidor. Para carregar um arquivo não encontrado, selecione Janela > Site para abrir o 
painel Site, escolha o arquivo em Pasta local e clique na seta para cima azul na barra de ferramentas a fim de copiar o arquivo para a pasta do 
servidor Web. 


A Ed =; dis P, iníci 
Restringir informações de banco de dados exibidas no Dreamweaver q PRE 


Usuários avançados de sistemas de bancos de dados grandes como o Oracle devem restringir o número de itens de banco de dados 
recuperados e exibidos pelo Dreamweaver durante o design. Um banco de dados Oracle pode conter itens que o Dreamweaver não pode 
processar durante o design. Você pode criar um esquema no Oracle e usá-lo no Dreamweaver para filtrar itens desnecessários durante o design. 


Nota: Você não pode criar um esquema ou catálogo no Microsoft Access. 
Outros usuários podem aproveitar a restrição da quantidade de informações que o Dreamweaver recupera durante o design. Alguns bancos de 


dados contêm dezenas ou mesmo centenas de tabelas, e talvez você prefira não listar todas elas enquanto trabalha. Um esquema ou catálogo 
pode restringir o número de itens de banco de dados recuperados durante o design. 


Você deve criar um esquema ou catálogo no sistema de banco de dados para poder aplicá-lo no Dreamweaver. Consulte a documentação do 
sistema de banco de dados ou o administrador do sistema. 


Nota: Você não pode aplicar um esquema ou catálogo no Dreamweaver caso esteja desenvolvendo um aplicativo do ColdFusion ou usando o 
Microsoft Access. 
1. Abra uma página dinâmica no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados). 


e Caso haja uma conexão de banco de dados, clique com o botão direito do mouse (Windows) ou clique mantendo a tecla Control 
pressionada (Macintosh) na lista e selecione Editar conexão no menu pop-up. 


e Caso a conexão não exista, clique no botão de adição (+) na parte superior do painel e a crie. 


2. Na caixa de diálogo da conexão, clique em Avançado. 
3. Especifique o esquema ou o catálogo e clique em OK. 


a a - E E P. iníci 
Definir o Inspetor de propriedades para procedimentos armazenados do ColdFusion e didi 


comandos do ASP 
Modifique o procedimento armazenado selecionado. As opções disponíveis variam de acordo com a tecnologia do servidor. 


“ Edite todas as opções. Quando você seleciona uma nova opção no inspetor, o Dreamweaver atualiza a página. 


Para o início 


Opções de Entrada 


O Inspetor de propriedades é exibido quando o Dreamweaver encontra um tipo de entrada não reconhecido. Esse erro normalmente ocorre por 
conta de uma digitação ou de outro erro na entrada dos dados. 


Caso você altere o tipo de campo no Inspetor de propriedades para um valor que o Dreamweaver reconhece — por exemplo, caso você corrija o 
erro ortográfico —, o Inspetor de propriedades é atualizado para mostrar as propriedades do tipo reconhecido. Defina qualquer uma das seguintes 
opções no Inspetor de propriedades: 


Entrada Atribui um nome ao campo. Essa caixa é obrigatória, e o nome deve ser exclusivo. 

Tipo Define o tipo de entrada do campo. O conteúdo da caixa reflete o valor do tipo de entrada exibido atualmente no código-fonte HTML. 
Valor Define o valor do campo. 

Parâmetros Abre a caixa de diálogo Parâmetros para que você possa exibir os atributos atuais do campo, bem como adicionar ou remover 
atributos. 

Mais tópicos da Ajuda 

Tutorial da área de trabalho de desenvolvimento 


Configurar um servidor de teste 
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Integração da CEF 


O Dreamweaver agora está integrado à Chromium Embedded Framework (CEF), uma estrutura de origem aberta com base no design do Google 
Chromium. Essa integração permite que o Dreamweaver controle o carregamento de recursos, a navegação, os menus de contexto, impressão e 
mais, para aproveitar os mesmos desempenho e tecnologias HTMLS disponíveis no navegador do Google Chrome. 


O Dreamweaver está integrado à versão CEF3, uma implementação de multiprocesso que usa a mensagem assíncrona para a comunicação 
entre o Dreamweaver e um ou vários processos de renderização (mecanismo do Webkit + V8). A CEF3 usa a API do conteúdo oficial do 
Chromium e fornece desempenho semelhante ao do Google Chrome. 


Para obter mais informações sobre a CEF, consulte este artigo. 
Veja os recursos do Dreamweaver que são afetados pela integração da CEF: 


e Experiência aprimorada do usuário 
e Aprimoramentos de renderização 
e Inspeção 
e Codec 
* Menus pop-up 
* Mensagens de erro 
e Zoom/Rolagem 
e Páginas de grade fluida 
e Alterações arquitetônicas 
e Navegador de código 
e Navegação 
e Certificado SSL 
e Código ativo/Visualização do código 
e CSS externa 
e Arquivos dinamicamente relacionados 
- Opções de visualização dinâmica 


e Viewport 


1a à é gd Para o início 
Experiência aprimorada do usuário 


Aprimoramentos de renderização 
Com a integração da CEF, diversos aprimoramentos foram aplicados à forma como o Dreamweaver renderiza os objetos e outros elementos da 
interface do usuário. 


As ilustrações a seguir mostram como uma div com raio da borda e repetição de degradê é renderizada no Apollo Webkit antigo e após a 
integração da CEF. 


Div com o raio da borda renderizado com o Apollo Webkit antigo. O raio da borda não é aplicado, porque não era suportado. 


Div com o raio da borda renderizado em Visualização dinâmica após a integração da CEF. O raio da borda é aplicado. 


70 


Inspeção 


O novo modo Inspeção é o mesmo que o do Google Chrome. A “Margem” está marcada em amarelo e o “Preenchimento” em roxo. 


Um conjunto de réguas horizontais e verticais será exibido quando você passar o mouse sobre elementos. As réguas aparecem na parte 


superior/inferior e esquerda/direita, com base na posição do elemento. As réguas mostram o valor de margem, preenchimento, largura e 
propriedades de bordas aplicadas ao elemento. 


Além disso, uma dica de ferramenta com as seguintes informações também aparece: 
* O nome do elemento (por exemplo, div) 
e Classe CSS ou ID, se definida. 


e A dimensão do elemento. O número mostrado é a soma de largura, preenchimento e bordas aplicados ao elemento. 


Codec 
Vídeo Áudio 
Theora mp3 
h264 wav 
ogg Vorbis 
ogv pem-u8B 
mp4 pem s16le 
mov pem s24le 


Suporte a pop-up 


Com a integração da CEF, o Dreamweaver agora pode renderizar elementos no formato HTML5, como mês, data e hora. Quando você clica 
nesses controles, o Dreamweaver agora exibe os menus pop-up que são mostrados para selecionar o parâmetro obrigatório. 


maio de 2013 + 


Este mis Limpar 


Pop-up Calendário 


Uvas | 
Laranja 


Lista de seleção de elementos de formulário 


Páginas de grade fluida 


Quando as guias de layout de grade fluida estão desativadas, a Visualização dinâmica usa o CEF Webkit para renderização. As páginas de grade 
fluidas em Visualização dinâmica com as guias de layout de grade fluida ATIVADAS continuam usando o antigo Apollo WebKit para renderização. 


Os recursos de visualização dinâmica, como Navegação (barra de endereços), o modo Inspeção e o Código dinâmico estão disponíveis apenas 
no modo de CEF. 


Barra de ferramentas do documento para uma página de grade fluida com as grades fluidas ativadas (Visualização dinâmica do Apollo) 


Código | Cride | Cesar | Crómuca | fm] Cód impera O, db 1 Meifilcifmeesipt-teDesacgmax Assetstos » fi] 49, 


Vai 


Barra de ferramentas do documento para uma página de grade fluida com as grades fluidas desativadas (Visualização dinâmica da CEF) 


Sequência de erro 
Agora, a aparência de sequência de erro no Dreamweaver é a mesmo que a do Google Chrome. 


Servidor não encontrado 


à página "http://googlekljl.com/" não foi 
carregada porque o Dreamweaver não encontrou 
o servidor “"googlekljl.com". Verifique se você 
está conectado à Intemet e se o nome do 
servidor está correto. 


ERR NAME NOT RESOLVED 


Mensagens de erro 


Zoom/Rolagem 
A Ul das barras de rolagem são diferentes na Visualização dinâmica e na Visualização de design. 


O comportamento do zoom no Dreamweaver foi alterado com integração da CEF. Anteriormente, o zoom era por guia e, agora, na Visualização 
dinâmica da CEF, o zoom é por página. 


Cenário 1: suponha que seja aplicado 300% de zoom a uma página na Visualização dinâmica. Abra a mesma página de uma guia diferente (siga 
os links e acesse essa página). Em seguida: 

e Na CEF, a página mantém o zoom de 300% 

e No Apollo (versão mais antiga), a página é renderizada no zoom padrão de 100% 
Cenário 2: suponha que seja aplicado 50% de zoom a uma página em uma guia (Visualização dinâmica). Navegue para outra página na mesma 
guia. Em seguida: 

e Na CEF, outras páginas são abertas no zoom padrão de 100% 

e No Apollo, todas as páginas navegadas para e dessa guia mantêm o zoom de 50% 


Para o início 


Alterações arquitetônicas 


Navegador de código 


O Navegador de código analisa o documento e relaciona todos os estilos aplicáveis ao elemento chamado. Ele usa o controle do navegador para 
renderizar os conteúdos. Quando você passar o mouse em qualquer um dos seletores, todas as propriedades dos CSS associados serão 
exibidas como uma dica de ferramenta. Quando você clica em um seletor, o ponto de inserção é levado para o código correspondente. 


Certificado SSL 


Quando você tentar navegar até um local seguro (https), cujo certificado não seja reconhecido, a caixa de diálogo de confirmação do Certificado 
SSL será exibido. 


Dreamweaver could not establish a secure connection to the requested 


site, Would you like to continue with sn unsecure connection? 


Conexão confiável — caixa de diálogo de confirmação 


Outros 
Este recursos são impactados devido à integração da CEF: 
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* Arquivos dinamicamente relacionados 

e CSS externa 

* Sincronização da Visualização dinâmica e do Código dinâmico 
e Navegação 


nu 


* Opções da Visualização dinâmica (“Seguir links”, “Seguir links continuamente “Usar o servidor de teste para código-fonte do documento”, 


”ou 


“Desativar JavaScript”, “Congelar JavaScript”) 
e Viewport 
e Atributo de destino para links 


* Menu de contexto (as opções Seguir link e Desativar plug-ins são removidas do menu do botão direito do mouse de um link) 


Nota: devido à integração da CEF, a maneira de usar o <mm: browsercontrol> ao desenvolver extensões requer uma alteração. Consulte este 
artigo para obter informações detalhadas. 


As publicações do Twitter?” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Gerenciamento de site 
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Teste de seu site do Dreamweaver 


Diretrizes de teste do site 
Usar relatórios para testar o site 


Para o início 


Diretrizes de teste do site 


Antes de carregar o site em um servidor e declará-lo pronto para visualização, é uma boa ideia testá-lo localmente. (Na verdade, é uma boa ideia 
testar e solucionar os problemas do site sempre em toda sua criação — você pode identificar problemas logo e evitar repeti-los.) 


Você deve verificar se as páginas são exibidas e funcionam conforme esperado nos navegadores que você deseja, se não há links desfeitos e se 
elas não demoram muito para serem baixadas. Você também pode testar e solucionar problemas de todo o site executando um relatório de site. 


As seguintes diretrizes ajudarão você a criar uma boa experiência para os visitantes do site: 
Verifique se as páginas funcionam nos navegadores desejados. 


As páginas devem ser legíveis e funcionais em navegadores que não dão suporte a estilos, camadas, plug-ins ou JavaScript. Em páginas que 
apresentam falhas em navegadores mais antigos, considere o uso do comportamento Verificar navegador para redirecionar automaticamente os 
visitantes para outra página. 


Visualize as páginas em navegadores e plataformas diferentes. 


Isso dá a você a oportunidade de ver as diferenças de layout, cor, tamanhos de fonte e tamanho da janela do navegador padrão que não podem 
ser previstas em uma verificação do navegador de destino. 


Verifique o site em busca de links corrompidos e corrija-os. 


Outros sites também passam por novos projetos e reorganizações, e a página de link pode ter sido movida ou excluída. Você pode executar um 
relatório de verificação de link para testar os links. 


Monitore o tamanho do arquivo das páginas e o tempo de download. 


Não se esqueça de que se uma página consistir em uma tabela grande, em alguns navegadores, os visitantes não verão nada até a conclusão 
do carregamento de toda a tabela. Considere dividir tabelas grandes; caso isso não seja possível, considere colocar pouco conteúdo — como uma 
mensagem de boas-vindas ou um banner publicitário — fora da tabela na parte superior da página para que os usuários possam ver esse material 
durante o download da tabela. 


Execute alguns relatórios de site para testar e solucionar problemas em todo o site. 

Você pode verificar todo o site em busca de problemas, como documentos sem título, tags vazias e tags aninhadas redundantes. 
Valide o código para localizar erros de tag ou de sintaxe. 

Atualize e mantenha o site após a publicação. 


A publicação do site (ou seja, torná-lo dinâmico) pode ser realizada de várias formas e é um processo contínuo. Uma parte importante do 
processo é definir e implementar um sistema de controle de versão, seja com as ferramentas incluídas no Dreamweaver ou por meio de um 
aplicativo de controle de versão externo. 


Use os fóruns de discussão. 


Os fóruns de discussão do Dreamweaver estão disponíveis no site da Adobe em www.adobe.com/go/dreamweaver newsgroup. 


Esses fóruns são um grande recurso para a obtenção de informações sobre diferentes navegadores, plataformas etc. Você também pode discutir 
problemas técnicos e compartilhar dicas úteis com outros usuários do Dreamweaver. 


Para assistir a um tutorial sobre como solucionar problemas de publicação, consulte www.adobe.com/go/vid0164 br. 


Es = Para o início 
Usar relatórios para testar o site 


Você pode executar relatórios do site em atributos de HTML ou fluxo de trabalho. Você também pode usar o comando Relatórios para verificar os 
links no site. 


Os relatórios de fluxo de trabalho podem melhorar a colaboração com membros de uma equipe da Web. Você pode executar relatórios de fluxo 
de trabalho que exibem quem retirou um arquivo, quais arquivos estão associados a Design Notes e quais arquivos foram modificados 
recentemente. Você pode refinar ainda mais os relatórios de Design Note especificando parâmetros de nome/valor. 


Nota: você deve ter uma conexão de site remota definida para executar os relatórios de fluxo de trabalho. 
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Os relatórios em HTML permitem que você compile e gere relatórios para vários atributos HTML. Você pode verificar tags de fonte aninhadas 
combináveis, texto alternativo ausente, tags aninhadas redundantes, tags vazias removíveis e documentos sem título. 


Depois de executar um relatório, você pode salvá-lo como um arquivo XML e, em seguida, importá-lo para uma instância de modelo, um banco 
de dados ou uma planilha e imprimi-lo, ou exibi-lo em um site. 


Nota: Você também pode adicionar tipos de relatório diferentes ao Dreamweaver usando o site do Adobe Dreamweaver Exchange. 


Executar relatórios para testar um site 
1. Selecione Site > Relatórios. 


2. Selecione o que relatar no menu pop-up Relatório sobre e defina todos os tipos de relatório a serem executados (fluxo de trabalho ou 
HTML). 


Você não pode executar um relatório Arquivos selecionados no site, a menos que você tenha selecionado arquivos no painel Arquivos. 
3. Caso você tenha selecionado um relatório de fluxo de trabalho, clique em Configurações de relatório. Do contrário, ignore a etapa. 


Nota: Caso tenha selecionado mais de um relatório de fluxo de trabalho, você precisa clicar no botão Configurações de relatório de cada 
relatório. Selecione um relatório, clique em Configurações de relatório e insira as configurações; em seguida, repita o processo para todos 
os demais relatórios de fluxo de trabalho. 


Retirado por Cria um relatório listando todos os documentos retirados por um membro de equipe específico. Digite o nome do membro de 
uma equipe e, em seguida, clique em OK para retornar à caixa de diálogo Relatórios. 


Design Notes Cria um relatório listando todas as Design Notes dos documentos selecionados ou do site. Digite um ou mais pares 
nome/valor e, em seguida, selecione os valores de comparação nos menus pop-up correspondentes. Clique em OK para retornar à caixa 
de diálogo Relatórios. 


Modificado recentemente Cria um relatório listando arquivos que foram alterados durante um tempo específico. Insira faixas de datas e 
locais para os arquivos que você deseja exibir. 
4. Caso você tenha selecionado um relatório em HTML, selecione os seguintes relatórios: 


Tags de fonte aninhadas combináveis Cria um relatório que lista todas as tags de fonte aninhadas que podem ser combinadas para 
limpar o código. 


Por exemplo, <font color="4FF0000"><font size="4">STOP!</font></font> é informado. 


Texto alternativo ausente Cria um relatório listando todas as tags img que não têm texto alternativo. 


O texto alternativo aparece no lugar das imagens nos navegadores somente de texto ou nos navegadores que fazem download manual de 
imagens. Os leitores de tela indicam texto alternativo, e alguns navegadores exibem texto alternativo quando o usuário massa o mouse pela 
imagem. 

Tags aninhadas redundantes Cria um relatório detalhando tags aninhadas que devem ser limpas. 


Por exemplo, <i> As chuvas <i> na</i> Espanha se concentram principalmente na planície</i> é relatado. 


Tags vazias removíveis Cria um relatório detalhando todas as tags vazias que podem ser removidas para limpar o código HTML. 
Por exemplo, você pode ter excluído um item ou imagem na Visualização de código, mas deixado as tags aplicadas a esse item. 
Documentos sem título Cria um relatório listando todos os documentos sem título encontrados dentro dos parâmetros selecionados. O 
Dreamweaver informa todos os documentos com títulos padrão, várias tags de título ou tags de título ausentes. 

5. Clique em Executar para criar o relatório. 


Dependendo do tipo de relatório executado, você pode ser solicitado a salvar o arquivo, definir o site ou selecionar uma pasta (caso você 
ainda não tenha feito isso). 


Uma lista de resultados é exibida no painel Relatórios do site (no grupo de painéis Resultados). 


Usar e salvar um relatório 
1. Execute um relatório (consulte o procedimento anterior). 
2. No painel Relatórios do site, realize um dos seguintes procedimentos para exibir o relatório: 


e Clique no cabeçalho da coluna pela qual você deseja classificar os resultados. 


Você pode classificar por nome de arquivo, número de linha ou descrição. Você também pode executar vários relatórios diferentes e 
mantê-los abertos. 


* Selecione qualquer linha no relatório e clique no botão Mais informações, na lateral esquerda do painel Relatórios do site, para obter 
uma descrição do problema. 
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e Clique duas vezes em uma linha no relatório para exibir o código correspondente na janela Documento. 


Nota: se você estiver na Visualização de design, o Dreamweaver alterará a exibição para dividi-la e mostrar o problema informado no 
código. 


3. Clique em Salvar relatório para salvar o relatório. 


Ao salvar um relatório, você pode importá-lo para um arquivo de modelo existente. Em seguida, você pode importar o arquivo para um 
banco de dados ou planilha e imprimi-lo ou usar o arquivo para exibir o relatório em um site. 


Depois de executar relatórios HTML, use o comando Limpar HTML para corrigir todos os erros de HTML listados por esses relatórios. 


A Adobe também recomenda 
e Tutorial sobre como solucionar problemas de publicação 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Definir preferências de site para transferência de arquivos 


Selecione as preferências para controlar os recursos de transferência de arquivos exibidos no painel Arquivos. 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
2. Na caixa de diálogo Preferências, selecione Site na lista de categorias à esquerda. 
3. Defina as opções e clique em OK. 


Mostrar sempre Especifica qual site (remoto ou local) é mostrado sempre e em qual painel Arquivos (esquerda ou direita) os arquivos 
locais e remotos são exibidos. 


Por padrão, o site local é sempre exibido à direita. O painel não escolhido (à esquerda por padrão) é o painel que pode ser alterado: esse 
painel pode exibir os arquivos no outro site (o site remoto por padrão). 


Arquivos dependentes Exibe um prompt para transferência de arquivos dependentes (como, por exemplo, imagens, folhas de estilos 
externas e outros arquivos referenciados no arquivo em HTML) que o navegador carrega ao carregar o arquivo em HTML. Por padrão, 
Avisar na obtenção/retirada e Avisar na colocação/devolução são selecionados. 


Normalmente, é uma boa ideia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as versões mais recentes dos arquivos 
dependentes já estejam no disco local, não há necessidade de baixá-los novamente. Isso também acontece no carregamento e na 
devolução dos arquivos: não há necessidade caso cópias atualizadas já estejam no destino. 


Caso você desmarque essas opções, os arquivos dependentes não são transferidos. Por isso, para forçar a exibição da caixa de diálogo 
Arquivos dependentes mesmo quando essas opções estão desmarcadas, mantenha a tecla Alt (Windows) ou Option (Macintosh) 
pressionada enquanto escolhe os comandos Obter, Colocar, Devolver ou Retirar. 


Conexão de FTP Determina se a conexão com o site remoto é encerrada após o número especificado de minutos sem nenhuma 
atividade. 


Tempo limite do FTP Especifica o número de segundos em que o Dreamweaver tenta estabelecer uma conexão com o servidor remoto. 


Caso não haja nenhuma resposta após o tempo especificado, o Dreamweaver exibe uma caixa de diálogo de aviso alertando você para 
esse fato. 


Opções de transferência por FTP Determina se o Dreamweaver seleciona a opção padrão, depois de um número especificado de 
segundos, quando uma caixa de diálogo é exibida durante uma transferência de arquivos e sem nenhuma resposta do usuário. 


Host do proxy Especifica o endereço do servidor de proxy pelo qual você se conecta a servidores externos caso esteja atrás de um 
firewall. 


Caso você não esteja atrás de um firewall, deixe esse espaço em branco. Caso você esteja atrás de um firewall, selecione a opção Usar 
proxy na caixa de diálogo Definição de sites (Servidores > Editar servidor existente (ícone do lápis) > Mais opções.) 


Porta do proxy Especifica a porta do proxy ou do firewall pela qual você passa para se conectar ao servidor remoto. Caso você se conecte 
por uma porta que não seja a 21 (a padrão para FTP), digite o número aqui. 


Opções de colocação: Salvar os arquivos antes de colocá-los Indica que os arquivos não salvos são salvos automaticamente antes de 
serem colocados no site remoto. 


Opções de transferência: Avisar antes de mover arquivos no servidor Envia alertas quando você tenta mover arquivos no site 
remoto. 


Gerenciar sites Abre a caixa de diálogo Gerenciar sites, onde você pode editar um site existente ou criar um novo. 
Você pode definir se os tipos de arquivo que transfere são transferidos como ASCII (texto) ou binário, personalizando o arquivo 
FTPExtensionMap.txt na pasta Dreamweaver/Configuração (no Macintosh, FTPExtensionMapMac.txt). Para obter mais informações, 
consulte, Extensão do Dreamweaver. 


(69) ex-nc-sa ] 
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Gerenciamento de sites do Contribute 


Gerenciamento de sites do Contribute 

Design de páginas e estrutura de um site do Contribute 

Transferir arquivos para dentro e fora de um site do Contribute 

Permissões de arquivos e pastas do Contribute no servidor 

Arquivos especiais do Contribute 

Preparar um site para uso com o Contribute 

Administrar um site do Contribute usando o Dreamweaver 

Excluir, mover ou renomear um arquivo remoto em um site do Contribute 
Permitir que usuários do Contribute acessem modelos sem acesso à pasta raiz 
Solucionar problemas em um site do Contribute 


Para o início 


Gerenciamento de sites do Contribute 


O AdobeQ Contributeê CS4 combina um navegador da Web e um editor de páginas da Web. Ele permite que seus colegas de trabalho ou 
clientes naveguem até uma página em um site que você tenha criado para editá-la ou atualizá-la, caso eles tenham permissão para fazê-lo. Os 
usuários do Contribute podem adicionar e atualizar conteúdo básico da Web, inclusive texto formatado, imagens, tabelas e links. Os 
administradores do site do Contribute podem limitar as ações que os usuários comuns (não administradores) podem executar em um site. 


Nota: este tópico pressupõe que você seja um administrador do Contribute. 


Como administrador do site, você concede aos usuários não administradores a capacidade de editar páginas, criando uma chave de conexão e a 
enviando para esses usuários (para obter informações sobre como fazer isso, consulte a Ajuda do Contribute). Você também pode configurar 
uma conexão com um site do Contribute usando o Dreamweaver, o que permite que você ou o designer do site se conecte ao site do Contribute e 
use todos os recursos de edição disponíveis no Dreamweaver. 


O Contribute confere funcionalidade ao site com o CPS (Contribute Publishing Server), um pacote de aplicativos de publicação e ferramentas de 
gerenciamento de usuários que permite a integração do Contribute com o serviço de diretórios de usuários da sua empresa — por exemplo, o 
LDAP (Lightweight Directory Access Protocol) ou o Active Directory. Quando você ativa o site do Dreamweaver como um site do Contribute, o 
Dreamweaver lê as configurações de administração do Contribute sempre que você se conecta ao site remoto. Se o Dreamweaver detectar que o 
CPS está ativado, ele herdará uma parte da funcionalidade do CPS, como a reversão de arquivos e o registro de eventos. 


Você pode usar o Dreamweaver para se conectar a um site do Contribute e modificar um arquivo nesse site. A maioria dos recursos do 
Dreamweaver funciona em um site do Contribute como em qualquer outro site. No entanto, quando você usa o Dreamweaver com um site do 
Contribute, o Dreamweaver realiza automaticamente algumas operações de gerenciamento de arquivos, como salvar várias revisões de um 
documento e registrar certos eventos no Console do CPS. 


Para obter mais informações, consulte a Ajuda do Contribute. 


Para o início 


Design de páginas e estrutura de um site do Contribute 


Para que os usuários do Contribute possam editar o seu site, lembre-se do seguinte ao estruturá-lo: 


e Simplifique a estrutura do site. Não aninhe pastas em muitos níveis. Agrupe itens relacionados em uma pasta. 
e Configure as permissões apropriadas de leitura e gravação para pastas no servidor. 


e Adicione páginas de índice ao criar pastas de forma a estimular os usuários do Contribute a inserir novas páginas nas pastas corretas. Por 
exemplo, se os usuários do Contribute fornecem páginas que contêm atas de reunião, crie uma pasta na pasta raiz do site denominada 
atas reunião, e crie uma página de índice nessa pasta. Em seguida, crie um link da página principal do site para a página de índice das 
atas de reunião. O usuário do Contribute poderá então navegar até essa página de índice e criar uma nova página de atas para 
determinada reunião, com um link a partir dessa página. 


e Na página de índice de cada pasta, forneça uma lista de links para as páginas de conteúdo individuais e os documentos nessa pasta. 
e Mantenha os designs de página os mais simples possíveis, sem formatações rebuscadas. 


e Use CSS em vez de tags HTML e nomeie seus estilos CSS com clareza. Se os usuários do Contribute usam um conjunto padrão de estilos 
no Microsoft Word, use os mesmos nomes para os estilos CSS para que o Contribute possa mapear os estilos quando o usuário copiar 
informações de um documento do Word e as colar em uma página do Contribute. 


e Para evitar que um estilo CSS fique à disposição dos usuários do Contribute, altere o nome do estilo para que ele comece com mmhide . 
Por exemplo, se você usa um estilo denominado RightJustified em uma página, mas não quer que os usuários do Contribute usem esse 
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estilo, renomeie o estilo como mmhide RightJustified. 
Nota: você precisa adicionar mmhide ao nome do estilo na Visualização de código. Isso não pode ser feito no painel CSS. 


* Use a menor quantidade possível de estilos CSS para manter a aparência simples e organizada. 

e Se você usar inclusões do servidor para elementos de página HTML, como cabeçalhos e rodapés, crie uma página HTML desvinculada que 
contenha links para os arquivos de inclusão. Os usuários do Contribute poderão marcar essa página e usá-la para navegar até os arquivos 
de inclusão e editá-los. 


E E E E Para o início 
Transferir arquivos para dentro e fora de um site do Contribute 
O Contribute usa um sistema bem parecido com o sistema de Devolução/Retirada do Dreamweaver para garantir que somente um usuário de 
cada vez possa editar uma determinada página da Web. Quando você ativa a compatibilidade com o Contribute no Dreamweaver, o sistema de 
Devolução/Retirada do Dreamweaver é automaticamente ativado. 


Para transferir arquivos para dentro e fora de um site do Contribute usando o Dreamweaver, sempre use os comandos Retirar e Devolver. Se 
você usar os comandos COLOCAR e OBTER para transferir arquivos, correrá o risco de sobregravar as modificações que algum usuário do 
Contribute tenha feito recentemente em um arquivo. 


Quando você retira um arquivo em um site do Contribute, o Dreamweaver faz uma cópia de backup da versão anterior retirada do arquivo na 
pasta baks e adiciona seu nome de usuário e um carimbo de data a um arquivo de Design Notes. 


, sã à E a Para o início 
Permissões de arquivos e pastas do Contribute no servidor 
O Contribute proporciona uma maneira de gerenciar permissões de arquivos e pastas para cada função de usuário que você define. Porém, o 
Contribute não proporciona uma maneira de gerenciar permissões subjacentes de leitura e gravação atribuídas a arquivos e pastas pelo servidor. 
No Dreamweaver, é possível gerenciar essas permissões diretamente no servidor. 


Se o usuário do Contribute não tiver acesso de leitura a um arquivo dependente no servidor, como uma imagem exibida em uma página, o 
conteúdo do arquivo dependente não aparecerá na janela do Contribute. Por exemplo, se o usuário não tem acesso de leitura a uma pasta de 
imagens, as imagens dessa página aparecerão como ícones de imagem partida no Contribute. Da mesma forma, os modelos do Dreamweaver 
são armazenados em uma subpasta da pasta raiz do site. Dessa forma, se um usuário do Contribute não tiver acesso de leitura a essa pasta raiz; 
ele não poderá usar os modelos desse site, a não ser que você os copie para uma pasta apropriada. 


Quando você configura um site do Dreamweaver, deve conceder aos usuários acesso de leitura no servidor à pasta / mm (a subpasta mm da 
pasta raiz), à pasta /Templates e a todas as pastas contendo ativos que esses usuários precisarão usar. 


Se por motivos de segurança, você não puder conceder acesso de leitura à pasta /Templates, ainda poderá permitir que os usuários do 
Contribute acessem modelos. Consulte Permitir que os usuários do Contribute acessem modelos sem acesso à pasta raiz. 


Para obter mais informações sobre permissões do Contribute, consulte Administração do Contribute na Ajuda do Contribute. 


E Ee a E P, iníci 
Arquivos especiais do Contribute PESAR E 


O Contribute usa uma variedade de arquivos especiais que não devem ser visualizados pelos visitantes do site: 
e O arquivo de configurações compartilhadas, que tem um nome de arquivo ofuscado com uma extensão CSI, aparece em uma pasta 
denominada mm na pasta raiz do site e contém informações que o Contribute utiliza para gerenciar o site. 
e Versões mais antigas de arquivos, em pastas denominadas baks 
e Versões temporárias de páginas, para que os usuários possam visualizar alterações 
e Arquivos de bloqueio temporários, indicando que uma determinada página está sendo editada ou visualizada 
* Arquivos de Design Notes que contêm metadados sobre páginas do site 


Em geral, não é recomendável editar nenhum desses arquivos especiais do Contribute usando o Dreamweaver. O Contribute os gerencia 
automaticamente. 


Se você não quiser que esses arquivos especiais do Contribute apareçam no seu servidor acessível publicamente, configure um servidor de 
teste onde os usuários do Contribute trabalhem em páginas. Depois copie periodicamente essas páginas da Web do servidor de teste para 

um servidor de produção que esteja na Web. Se você adotar essa abordagem do servidor de teste, copie somente as páginas da Web para 
o servidor de produção, e não os arquivos especiais do Contribute indicados acima. Em especial, não copie as pastas mm e baks para o 
servidor de produção. 


Nota: para obter informações sobre como configurar um servidor para que os visitantes não vejam arquivos em pastas que começam com um 
sublinhado, consulte "Segurança no site" na Ajuda do Contribute. 


Ocasionalmente, convém excluir manualmente arquivos especiais do Contribute. Por exemplo, pode haver circunstâncias em que o Contribute 
não consiga excluir as páginas de visualização temporárias depois que o usuário as visualiza. Nesse caso, é preciso excluir essas páginas 
temporárias manualmente. As páginas de visualização temporárias têm nomes de arquivo que começam com TMP. 
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Da mesma forma, em algumas circunstâncias, um arquivo de bloqueio desatualizado pode permanecer acidentalmente no servidor. Se isso 
acontecer, você terá que excluir o arquivo de bloqueio manualmente para que outros usuários possam editar a página. 


' - Para o início 
Preparar um site para uso com O Contribute 


Se você estiver preparando um site do Dreamweaver para usuários do Contribute, será necessário ativar explicitamente a compatibilidade com o 
Contribute para usar recursos relacionados ao Contribute. O Dreamweaver não solicita que você faça isso. Porém, quando você se conectar a um 
site configurado como um site do Contribute (que tem um administrador), o Dreamweaver solicitará a ativação da compatibilidade com o 
Contribute. 


Nem todos os tipos de conexão aceitam a compatibilidade do Contribute. Estas restrições aplicam-se aos tipos de conexão: 


e Se sua conexão com o site remoto usar WebDAV, a compatibilidade com o Contribute não poderá ser ativada, pois esses sistemas de 
controle de origem não são compatíveis com as Design Notes e com os sistemas de Retirada/Devolução que o Dreamweaver utiliza para 
sites do Contribute. 


e Se você usar RDS para se conectar ao site remoto, poderá ativar a compatibilidade com o Contribute, mas precisará personalizar a conexão 
para poder compartilhá-la com os usuários do Contribute. 


* Se não estiver usando o computador local como servidor da Web, configure o site usando uma conexão de FTP ou rede com o computador 
(em vez de apenas um caminho de pasta local) para poder compartilhar essa conexão com usuários do Contribute. 


Quando você ativa a compatibilidade com o Contribute, o Dreamweaver ativa automaticamente as Design Notes (incluindo a opção Carregar 
Design Notes para compartilhamento) e o sistema de Retirada/Devolução. 


Se o servidor CPS (Contribute Publishing Server) estiver ativado no site remoto ao qual você está se conectando, o Contribute notificará o CPS 
sempre que você acionar uma operação de rede, como retirada, reversão ou publicação de um arquivo. O CPS registrará esses eventos e você 
poderá verificar o registro no console de administração do CPS. (Se você desativar o CPS, esses eventos não serão registrados.) Você ativa o 
CPS usando o Contribute. Para obter mais informações, consulte a Ajuda do Adobe Contribute. 


Nota: você pode tornar um site do Contribute compatível sem ter o Contribute em seu computador, mas se quiser iniciar o Contribute 
Administrator do Dreamweaver, o Contribute deverá estar instalado no mesmo computador que o Dreamweaver, e você deverá estar conectado 
ao site remoto antes de ativar a compatibilidade do Contribute. Caso contrário, o Dreamweaver não poderá ler as configurações administrativas 
do Contribute para determinar se os recursos CPS e de reversão estão ativados. 


Nota: você deve certificar-se de que o arquivo de configurações compartilhado (arquivo CS!) que o Contribute usa para administrar o site esteja 
no servidor remoto e não esteja corrompido. O Contribute cria automaticamente esse arquivo (e sobrescreve as versões antigas dele) sempre que 
você administra o Contribute Administrator. Se o arquivo de configurações compartilhadas não estiver no servidor ou estiver corrompido, o 
Dreamweaver retornará o erro "O arquivo necessário para compatibilidade do Contribute não existe no servidor" sempre que você tentar uma 
operação de rede (como uma inserção). Para garantir que o arquivo correto esteja no servidor, desative a conexão com o servidor no 
Dreamweaver, inicie o Contribute Administrator, faça uma alteração de administração e, em seguida, reconecte o servidor no Dreamweaver. Para 
obter mais informações, consulte a Ajuda do Adobe Contribute. 


1. Selecione Site > Gerenciar sites. 
2. Selecione um site e clique em Editar. 


3. Na caixa de diálogo Configuração de site, expanda Configurações avançadas, selecione a categoria Contribute e selecione Ativar 
compatibilidade do Contribute. 


4. Se aparecer uma caixa de diálogo informando que você precisa ativar as Design Notes e o sistema de Retirada/Devolução, clique em OK. 


5. Se você ainda não forneceu as informações de contato de retirada/devolução, digite seu nome e endereço de email na caixa de diálogo e 
clique em OK. O status de reversão, o status de CPS, a caixa de texto URL raiz do site e o botão Administrar site do Contribute aparecem 
na caixa de diálogo Definição de sites. 


Se a opção Reverter estiver ativada no Contribute, você poderá reverter para as versões anteriores dos arquivos que foram alterados no 


Dreamweaver. 


6. Marque o URL na caixa de texto URL raiz do site e corrija-o se necessário. O Dreamweaver constrói um URL raiz do site com base em 
outras informações de definição de site fornecidas, mas, às vezes, o URL construído não está totalmente correto. 


7. Clique no botão Testar para verificar se você inseriu o URL correto. 


Nota: se você estiver pronto para enviar uma chave de conexão ou realizar tarefas de administração do site do Contribute, ignore as 
etapas restantes. 


8. Clique no Site do administrador no Contribute se quiser fazer alterações de administração. Lembre-se, o Contribute deve estar instalado na 
mesma máquina em que deseja abrir o Contribute Administrator a partir do Dreamweaver. 
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9. Clique em Salvar e depois em Concluído. 


E ; . E Rae 
Administrar um site do Contribute usando o Dreamweaver ara o nicio 


Depois de ativar a compatibilidade com o Contribute, você pode usar o Dreamweaver para iniciar o Contribute e realizar tarefas de administração 
de site. 


Nota: o Contribute deve estar instalado no mesmo computador que o Dreamweaver. 


Como administrador de um site do Contribute, você pode: 


e Alterar as configurações administrativas do site. 


As configurações administrativas do Contribute são um conjunto de configurações aplicáveis a todos os usuários do seu site. Essas 
configurações permitem ajustar o Contribute para melhorar a experiência de uso. 


* Alterar as permissões concedidas às funções de usuário no Contribute. 
e Configurar usuários do Contribute. 


Os usuários do Contribute precisam de certas informações sobre o site para se conectarem a ele. Você pode reunir todas essas 
informações em um arquivo conhecido como chave de conexão e enviá-lo aos usuários do Contribute. 


Nota: uma chave de conexão não é igual a um arquivo de site exportado do Dreamweaver. 


Antes de oferecer aos usuários do Contribute as informações de conexão de que eles precisam para editar páginas, use o Dreamweaver para 
criar a hierarquia de pastas básica do seu site e para criar todos os modelos e folhas de estilo CSS necessários para o site. 

. Selecione Site > Gerenciar sites. 

. Selecione um site e clique em Editar. 

. Na caixa de diálogo Configuração de site, expanda as Configurações avançadas e selecione a categoria Contribute. 


EB wmNAHA 


. Clique no botão Administrar site do Contribute. 
Nota: esse botão só aparece se você ativar a compatibilidade do Contribute. 
5. Se solicitado, insira a senha de administrador e clique em OK. 
A caixa de diálogo Administrar site é exibida. 
e Para alterar as configurações administrativas, selecione uma categoria na lista à esquerda e altere as configurações conforme 
necessário. 


e Para alterar as configurações de funções, na categoria Usuários e funções, clique em Editar configurações de função e faça as 
alterações necessárias. 


e Para enviar uma chave de conexão para configurar usuários, na categoria Usuários e funções, clique em Enviar chave de conexão e 
conclua o Assistente de conexão. 


6. Clique em Fechar, clique em OK e, em seguida, clique em Concluído. 


Para obter mais informações sobre configurações administrativas, gerenciamento de funções de usuário ou criação de uma chave de conexão, 
consulte a Ajuda do Contribute. 


. . - . Para o início 
Excluir, mover ou renomear um arquivo remoto em um site do Contribute 


A exclusão de um arquivo do servidor remoto que hospeda um site do Contribute é um processo bastante semelhante à exclusão de um arquivo 
do servidor para qualquer site do Dreamweaver. Entretanto, quando você exclui um arquivo de um site do Contribute, o Dreamweaver pergunta se 
você deseja excluir todas as versões anteriores desse arquivo. Se você optar por manter as versões anteriores, o Dreamweaver salvará uma 
cópia da versão atual na pasta baks, para que seja possível restaurá-la mais tarde. 


Renomear um arquivo remoto ou movê-lo de uma pasta para outra em um site do Contribute funciona como em qualquer site do Dreamweaver. 
Em um site do Contribute, o Dreamweaver também renomeia ou move as versões anteriores associadas do arquivo que estão salvas na pasta 
baks. 


1. Selecione o arquivo no painel Remoto do painel Arquivos (Janela > Arquivos) e pressione Backspace (Windows) ou Delete (Macintosh). 
Será exibida uma caixa de diálogo pedindo que você confirme se deseja excluir o arquivo. 
2. Na caixa de diálogo de confirmação: 
e Para excluir todas as versões anteriores do arquivo e também a versão atual, marque a opção Excluir versões anteriores. 
* Para manter as versões anteriores no servidor, desmarque a opção Excluir versões anteriores. 


3. Clique em Sim para excluir o arquivo. 
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asi ns ' " a Para o início 
Permitir que usuários do Contribute acessem modelos sem acesso à pasta raiz 


Em um site do Contribute, você gerencia as permissões de arquivos e pastas subjacentes no servidor. Se por motivos de segurança, você não 
puder conceder acesso de leitura à pasta /Templates, ainda poderá colocar os modelos à disposição dos usuários. 
1. Configure o site do Contribute para que sua pasta raiz seja a pasta que os usuários verão como a raiz. 
2. Copie manualmente a pasta de modelos da pasta raiz do site principal para a pasta raiz do site do Contribute usando o painel Arquivos. 
3. Depois de atualizar os modelos do site principal, recopie os modelos alterados para as subpastas apropriadas conforme o necessário. 
Se você não optar por esse método, não use links relativos à raiz do site nas subpastas. Os links relativos à raiz do site referem-se à pasta 


raiz principal no servidor, e não à pasta raiz definida no Dreamweaver. Os usuários do Contribute não podem criar links relativos à raiz do 
site. 


Se os links em uma página do Contribute parecerem rompidos, é possível que haja algum problema com as permissões de pasta, 
principalmente se os links são vinculados a páginas fora da pasta raiz do usuário do Contribute. Verifique as permissões de leitura e 
gravação para pastas no servidor. 


E ' à Para o início 
Solucionar problemas em um site do Contribute 


Se um arquivo remoto em um site do Contribute parecer retirado, mas estiver na verdade bloqueado no computador do usuário, você poderá 
desbloquear esse arquivo para que os usuários possam editá-lo. 


Quando você clica em qualquer botão relacionado à administração do site do Contribute, o Dreamweaver verifica se ele pode se conectar ao site 
remoto e se o URL raiz do site fornecido é válido. Se o Dreamweaver não puder se conectar ou se o URL não for válido, será exibida uma 
mensagem de erro. 


Se as ferramentas de administração não estiverem funcionando corretamente, talvez exista algum problema com a pasta mm. 


Desbloquear um arquivo em um site do Contribute 


Nota: antes de seguir este procedimento, verifique se o arquivo não foi retirado. Se você desbloquear um arquivo enquanto um usuário do 
Contribute o edita, vários usuários poderão editar o arquivo simultaneamente. 


1. Siga um destes procedimentos: 
e Abra o arquivo na janela Documento e selecione Site > Desfazer retirada. 


e No painel Arquivos (Janela > Arquivos), clique com o botão direito do mouse (Windows) ou clique com a tecla Control pressionada 
(Macintosh) e selecione Desfazer retirada. 


Será exibida uma caixa de diálogo indicando quem retirou o arquivo e solicitando que você confirme se deseja desbloqueá-lo. 
2. Se a caixa de diálogo for exibida, clique em Sim para confirmar. 


O arquivo é desbloqueado no servidor. 


Solucionar problemas de conexão de um site do Contribute 
1. Marque a opção URL raiz do site na categoria Contribute da caixa de diálogo Definição de sites abrindo o URL que está no navegador para 
certificar-se de que a página correta é aberta. 


2. Use o botão Testar na categoria Informações remotas da caixa de diálogo Definição de sites para verificar se é possível conectar-se ao 
site. 


3. Se o URL estiver correto mas o botão Testar apresentar uma mensagem de erro, solicite a ajuda do administrador do sistema. 


Solucionar problemas das ferramentas de administração do Contribute 
1. No servidor, verifique se você tem permissões de leitura e gravação e as permissões executáveis, se necessárias, para a pasta mm. 
2. Certifique-se de que a pasta mm contenha um arquivo de configurações compartilhadas com uma extensão CSI. 


3. Se não tiver, use o Assistente de conexão (Windows) ou o Connection Assistant (Macintosh) para criar uma conexão com o site e tornar-se 
um administrador do site. O arquivo de configurações compartilhadas é criado automaticamente quando você se torna um administrador. 
Para obter mais informações sobre como tornar-se um administrador de um site do Contribute, consulte Administração do Contribute na 
Ajuda do Contribute. 


A Adobe também recomenda 
e Importar e exportar configurações de site do Dreamweaver 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Avisos legais | Política de privacidade on-line 
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Obtenção e colocação de arquivos no servidor 


Transferência de arquivo e arquivos dependentes 
Sobre as transferências de arquivo em segundo plano 
Obter arquivos de um servidor remoto 

Colocar arquivos em um servidor remoto 

Gerenciar transferências de arquivo 


ue Ri 
Transferência de arquivo e arquivos dependentes ii 


Caso você esteja trabalhando em um ambiente colaborativo, use o sistema de devolução/retirada para transferir arquivos entre sites locais e 
remotos. No entanto, caso você seja a única pessoa trabalhando no site remoto, você pode usar os comandos Obter e Colocar para transferir 
arquivos sem devolver ou retirá-los. 


Ao transferir um documento entre uma pasta local e remota usando o painel Arquivos, você tem a opção da transferência dos arquivos 
dependentes do documento. Arquivos dependentes são imagens, folhas de estilos externas e outros arquivos referenciados no documento que um 
navegador Ilê ao carregar o documento. 


Nota: Normalmente, é uma boa ideia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as versões mais recentes dos arquivos 
dependentes já estejam no disco local, não há necessidade de baixá-los novamente. Isso também acontece no carregamento e na devolução dos 
arquivos: não há necessidade caso cópias atualizadas já estejam no site remoto. 

Os itens de biblioteca são tratados como arquivos dependentes. 


Alguns servidores informam erros quando colocam itens de biblioteca. No entanto, você pode encobrir esses arquivos para impedir sua 
transferência. 


A « E P. iníci 
Sobre as transferências de arquivo em segundo plano calidad 


Você pode realizar outras atividades, não relacionadas a servidor, enquanto obtém ou coloca arquivos. A transferência de arquivo em segundo 
plano funciona com todos os protocolos de transferência para os quais o Dreamweaver dá suporte: FTP, SFTP, LAN, WebDAV, Subversion e 
RDS. 


Entre as atividades não relacionadas a servidor estão operações comuns como digitar, editar folhas de estilos externas, gerar relatórios de todo o 
site e criar novos sites. 


Entre as atividades relacionadas a servidor que o Dreamweaver não pode realizar durante transferências de arquivo estão as seguintes: 
e Colocar/obter/devolver/retirar arquivos 
e Desfazer retirada 
e Criar uma conexão de banco de dados 
e Ligar dados dinâmicos 
e Visualizar dados na Visualização dinâmica 
* Inserir um serviço da Web 
e Excluir arquivos remotos ou pastas 
e Visualizar em um navegador em um servidor de teste 
e Salvar um arquivo em um servidor remoto 
e Inserir uma imagem de um servidor remoto 
e Abrir um arquivo em um servidor remoto 
e Colocar automaticamente arquivos ao salvar 
e Arrastar arquivos para o site remoto 
* Recortar, copiar ou colar arquivos no site remoto 
* Atualizar Visualização remota 


Por padrão, a caixa de diálogo Atividade de arquivo em segundo plano é aberta durante transferências de arquivos. Você pode minimizar a caixa 
de diálogo clicando no botão Minimizar do canto superior direito. Fechar a caixa de diálogo durante transferências de arquivos resulta no 
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cancelamento da operação. 


- . Para o início 
Obter arquivos de um servidor remoto 


Use o comando Obter para copiar arquivos do site remoto para o site local. Você pode usar o painel Arquivos ou a janela Documento para obter 
arquivos. 


O Dreamweaver cria um registro da atividade de arquivo durante a transferência que você pode exibir e salvar. 


Nota: Você não pode desativar a transferência de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade de 
arquivo em segundo plano, você pode fechá-lo para melhorar o desempenho. 

O Dreamweaver também registra toda a atividade de transferência de arquivos FTP. Caso ocorra um erro quando você estiver transferindo um 
arquivo usando o FTP, o registro de FTP do site pode ajudá-lo a determinar o problema. 


Obter arquivos de um servidor remoto usando o painel Arquivos 
1. No painel Arquivos (Janela > Arquivos), selecione os arquivos desejados para download. 


Normalmente você seleciona esses arquivos na Visualização remota, mas pode selecionar os arquivos correspondentes na Visualização 
local se preferir. Caso a Visualização remota esteja ativa, o Dreamweaver copia os arquivos selecionados para o site local; caso a 
Visualização local esteja ativa, o Dreamweaver copia as versões remotas dos arquivos locais selecionados para o site local. 


Nota: Para obter apenas os arquivos cuja versão remota é mais recente do que a versão local, use o comando Sincronizar. 


2. Siga um dos seguintes procedimentos para obter o arquivo: 
e Clique no botão Obter na barra de ferramentas do painel Arquivos. 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do painel Arquivos e 
escolha Obter no menu de contexto. 


3. Clique em Sim na caixa de diálogo Arquivos dependentes para baixar arquivos dependentes; caso você já tenha cópias locais dos arquivos 
dependentes, clique em Não. O padrão é não baixar arquivos dependentes. Você pode editar essa opção em Editar > Preferências > Site. 


O Dreamweaver baixa os arquivos selecionados da seguinte forma: 


e Caso você esteja usando o sistema de devolução/retirada, a obtenção de um arquivo resulta em uma cópia local somente leitura do 
arquivo; o arquivo permanece disponível no site remoto ou no servidor de teste para que os demais membros da equipe retirem. 


e Caso você não esteja usando o sistema de devolução/retirada, a obtenção de um arquivo resultará em uma cópia com os privilégios de 
leitura e gravação. 


Nota: Caso esteja trabalhando em um ambiente colaborativo — ou seja, caso outros estejam trabalhando nos mesmos arquivos —, você 
não deve desativar Ativar devolução e retirada de arquivos. Caso outras pessoas estejam usando o sistema de devolução/retirada com 
o site, você também deve usá-lo. 


Para parar a transferência de arquivos a qualquer momento, clique no botão Cancelar da caixa de diálogo Atividade de arquivo em 
segundo plano. 


Obter arquivos de um servidor remoto usando a janela Documento 
1. Verifique se o documento está ativo na janela Documento. 
2. Siga um dos seguintes procedimentos para obter o arquivo: 


* Selecione Site > Obter. 
e Clique no ícone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione Obter no menu. 


Nota: Caso o arquivo atual não faça parte do site atual no painel Arquivos, o Dreamweaver tenta determinar a qual site definido 
localmente o arquivo atual pertence. Caso o arquivo atual pertença a apenas um site local, o Dreamweaver abre o site e, em seguida, 
realiza a operação Obter. 


Exibir o registro de FTP 
1. Clique no menu Opções no canto superior direito do painel Arquivos. 
2. Selecione Exibir > Registro de FTP do site. 


Nota: No painel Arquivos expandido, você pode clicar no botão Registro de FTP para exibir o registro. 


z . Para o início 
Colocar arquivos em um servidor remoto 


Você pode colocar arquivos do site local no site remoto, normalmente sem alterar o status de retirada do arquivo. 
Há duas situações comuns em que você pode usar o comando Colocar em lugar de Devolver: 


e Você não está em um ambiente colaborativo e não está usando o sistema de devolução/retirada. 
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e Convém colocar a versão atual do arquivo no servidor, mas você continuará o editando. 


Nota: Caso você coloque um arquivo que não existia anteriormente no site remoto e esteja usando o sistema de devolução/retirada, o 
arquivo é copiado para o site remoto e, em seguida, retirado para que você possa continuar a edição. 


Você pode usar o painel Arquivos ou a janela Documento para colocar arquivos. O Dreamweaver cria um registro da atividade de arquivo 
durante a transferência que você pode exibir e salvar. 


Nota: Você não pode desativar a transferência de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade 
de arquivo em segundo plano, você pode fechá-lo para melhorar o desempenho. 


O Dreamweaver também registra toda a atividade de transferência de arquivos FTP. Caso ocorra um erro quando você estiver transferindo 
um arquivo usando o FTP, o registro de FTP do site pode ajudá-lo a determinar o problema. 


Para assistir a um tutorial sobre a colocação de arquivos em um servidor remoto, consulte www.adobe.com/go/vid0163 br. 


Para assistir a um tutorial sobre a solução de problemas de envio, consulte www.adobe.com/go/vid0164 br. 


Colocar arquivos em um servidor remoto ou de teste usando o painel Arquivos 
1. No painel Arquivos (Janela > Arquivos), selecione os arquivos a serem carregados. 
Normalmente você seleciona esses arquivos na Visualização local, mas pode selecionar os arquivos correspondentes na Visualização 
remota se preferir. 
Nota: Você só pode colocar esses arquivos cuja versão local é mais recente do que a versão remota. 
2. Siga um dos seguintes procedimentos para colocar o arquivo no servidor remoto: 


e Clique no botão Colocar na barra de ferramentas do painel Arquivos. 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do painel Arquivos e 
escolha Colocar no menu de contexto. 


3. Caso o arquivo não tenha sido salvo, uma caixa de diálogo é exibida (caso você defina essa preferência na categoria Site da caixa de 
diálogo Preferências) permitindo a você salvar o arquivo antes de colocá-lo no servidor remoto. Clique em Sim para salvar o arquivo ou em 
Não para colocar a versão salva anteriormente no servidor remoto. 

Nota: Se você não salvar o arquivo, todas as alterações que você fez desde a última gravação serão colocadas no servidor remoto. No 
entanto, como o arquivo permanece aberto, você pode continuar salvando as alterações depois de colocar o arquivo no servidor caso 
desejado. 


4. Clique em Sim para atualizar os arquivos dependentes com os arquivos selecionados ou clique em Não para evitar o carregamento de 
arquivos dependentes. O padrão é não carregar arquivos dependentes. Você pode editar essa opção em Editar > Preferências > Site. 
Nota: Normalmente, é uma boa ideia carregar arquivos dependentes ao devolver um novo arquivo, mas caso as versões mais recentes 
dos arquivos dependentes já estejam no servidor remoto, não há necessidade de carregá-los novamente. 


Para parar a transferência de arquivos a qualquer momento, clique no botão Cancelar da caixa de diálogo Atividade de arquivo em segundo 
plano. 


Colocar arquivos em um servidor remoto usando a janela Documento 
1. Verifique se o documento está ativo na janela Documento. 
2. Siga um dos seguintes procedimentos para colocar o arquivo: 


e Selecione Site > Colocar. 
e Clique no ícone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione Colocar no menu. 


Nota: Caso o arquivo atual não faça parte do site atual no painel Arquivos, o Dreamweaver tenta determinar a qual site definido 
localmente o arquivo atual pertence. Caso o arquivo atual pertença a apenas um site local, o Dreamweaver abre o site e, em seguida, 
realiza a operação Colocar. 


Exibir o registro de FTP 
1. Clique no menu Opções no canto superior direito do painel Arquivos. 


2. Selecione Exibir > Registro de FTP do site. 


Nota: No painel Arquivos expandido, você pode clicar no botão Registro de FTP para exibir o registro. 


A i ã Para o início 
Gerenciar transferências de arquivo 


Você pode exibir o status das operações de transferência de arquivo, bem como uma lista de arquivos transferidos e seus resultados (êxito na 
transferência, ignorado ou falha). Você também pode salvar um registro da atividade do arquivo. 


Nota: O Dreamweaver permite a você realizar outras atividades não relacionadas a servidor enquanto transfere arquivos para ou de um servidor. 


87 


Cancelar uma transferência de arquivo 
*& Clique no botão Cancelar da caixa de diálogo Atividade de arquivo em segundo plano. Se a caixa de diálogo não estiver em exibição, clique no 
botão Atividade de arquivo na parte inferior do painel Arquivos. 


Mostrar a caixa de diálogo Atividade de arquivo em segundo plano durante transferências 
*& Clique no botão Atividade de arquivo ou Registro na parte inferior do painel Arquivos. 
Nota: Você não pode ocultar ou remover o botão Registro. Trata-se de uma parte permanente do painel. 


Exibir detalhes da última transferência de arquivo 
1. Clique no botão Registro na parte inferior do painel Arquivos para abrir a caixa de diálogo Atividade de arquivo em segundo plano. 


2. Clique na seta de expansão Detalhes. 


Salvar um registro da última transferência de arquivo 
1. Clique no botão Registro na parte inferior do painel Arquivos para abrir a caixa de diálogo Atividade de arquivo em segundo plano. 


2. Clique no botão Salvar registro e salve as informações como um arquivo de texto. 
Você pode examinar a atividade de arquivo abrindo o arquivo de log no Dreamweaver ou em qualquer editor de textos. 


Mais tópicos da Ajuda 
Tutorial sobre a colocação de arquivos 


Tutorial sobre a solução de problemas de publicação 


(69) ex-ne-sa ] 
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Sobre sites dinâmicos 


Para começar a criação de páginas dinâmicas da Web, há algumas preparações a serem feitas, incluindo a configuração de um servidor de 
aplicativo da Web e a conexão com um banco de dados para aplicativos do ColdFusion, ASP e PHP. O Adobe Dreamweaver lida com conexões 


de banco de dados de maneira diferente, dependendo da tecnologia do servidor. 


Nota: A interface de usuário foi simplificada na Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das 
opções descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo. 


As publicações do Twitter?” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Sobre sites do Dreamweaver 


O que é um "site" do Dreamweaver? 
Noções básicas sobre a estrutura de pastas locais e remotas 


Um site Adobeê Dreamweaver é um conjunto de todos os arquivos e ativos existentes no site. Você pode criar páginas da Web no computador, 
carregá-las em um servidor Web e manter o site transferindo arquivos atualizados sempre que os salvar. Você também pode editar e manter sites 
criados sem o Dreamweaver. 


Z ã Para o início 
O que é um "site" do Dreamweaver? 
No Dreamweaver, o termo “site” refere-se a um armazenamento local ou remoto para os documentos que pertencem a um site. Um site do 
Dreamweaver facilita a organização e o gerenciamento de todos os documentos da Web, o carregamento do seu site em um servidor Web, o 
rastreamento e a manutenção de links, além do gerenciamento e o compartilhamento de arquivos. Você deve definir um site para aproveitar todos 
os recursos do Dreamweaver. 


Nota: Para definir um site do Dreamweaver, você só precisa configurar uma pasta local. Para transferir arquivos para um servidor Web ou 
desenvolver aplicativos da Web, você também precisa adicionar informações para um site remoto e um servidor de teste. 

Um site do Dreamweaver consiste em até três partes, ou pastas, dependendo do seu ambiente de desenvolvimento e do tipo de site em 
desenvolvimento: 


Pasta raiz local Armazena os arquivos nos quais você está trabalhando. O Dreamweaver refere-se a essa pasta como seu “site local”. Essa 
pasta geralmente se localiza no seu computador local, mas também pode estar em um servidor de rede. 

Pasta remota Armazena seus arquivos para teste, produção, colaboração e assim por diante. O Dreamweaver refere-se a essa pasta como seu 
“site remoto” no painel Arquivos. Normalmente, a sua pasta remota está no computador em que o servidor Web é executado. A pasta remota 
contém os arquivos que os usuários acessam na Internet. 

Juntas, as pastas local e remota permitem que você transfira arquivos entre o disco rígido local e o servidor Web, facilitando o gerenciamento de 
arquivos em sites do Dreamweaver. Você trabalha nos arquivos na pasta local e depois os publica na pasta remota, quando deseja que outras 
pessoas os vejam. 


Pasta do servidor de teste A pasta em que o Dreamweaver processa as páginas dinâmicas. 
Para obter um tutorial sobre como definir um site Dreamweaver, consulte www.adobe.com/go/learn dw commoB br. 


Noções básicas sobre a estrutura de pastas locais e remotas fics 
Ao usar o Dreamweaver para conectar-se a uma pasta remota, você especifica a pasta remota na categoria Servidores da caixa de diálogo 
Definição de sites. A pasta remota especificada (também conhecida como “diretório do host”) deve corresponder à pasta raiz local do site do 
Dreamweaver. (A pasta raiz local é a pasta de nível superior do site do Dreamweaver.) Pastas remotas, como pastas locais, podem ter qualquer 
título, mas normalmente, os provedores de serviço da Internet (ISPs) nomeiam as pastas remotas de nível superior das contas de usuários 
individuais como public html, pub html ou algo parecido. Se você é responsável pelo seu próprio servidor remoto e pode nomear a pasta remota 
como desejar, é aconselhável que a pasta raiz local e a pasta remota tenham o mesmo nome. 


O exemplo a seguir mostra uma pasta raiz local à esquerda e uma pasta remota à direita. A pasta raiz local na máquina local mapeia diretamente 
para a pasta remota no servidor Web, e não para as subpastas da pasta remota nem para as pastas localizadas acima da pasta remota na 
estrutura de diretórios. 


Diretório de logon 


(Não deve ser pasta 
remota neste caso) 


não 


Pasta local 


(pasta raiz) 


ersesaaaas 


público html 


(Deve ser pasta 
remota) 


Ativos 


(Não deve ser 
pasta remota) 


HTML 


Ativos 


EE 


HTML 


dresesaaeaaaaaaaapassaaaaas 


pressssanaaasas 


Nota: O exemplo acima ilustra uma pasta raiz local na máquina local e uma pasta remota de nível superior no servidor Web remoto. Se, 
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entretanto, você mantém diversos sites do Dreamweaver em sua máquina local, será necessário um número igual de pastas remotas no servidor 
remoto. Nesse caso, o exemplo acima não é aplicável, e você deveria criar, então, diversas pastas remotas dentro da pasta public html e, em 
seguida, mapeá-las para as pastas raiz locais correspondentes em sua máquina local. 

Quando você estabelece uma conexão remota pela primeira vez, a pasta remota no servidor Web em geral está vazia. Então, quando você usa o 
Dreamweaver para carregar todos os arquivos na pasta raiz local, a pasta remota a preenche com todos os arquivos da Web. A estrutura de 
diretórios da pasta remota e da pasta raiz local devem ser sempre iguais. (Ou seja, sempre deve haver uma correspondência de um para um 
entre os arquivos e as pastas da pasta raiz local e os arquivos e as pastas da pasta remota.) Se a estrutura da pasta remota não corresponder à 
estrutura da pasta raiz local, o Dreamweaver carregará os arquivos no local incorreto, onde podem não ficar visíveis aos visitantes do site. Além 
disso, os caminhos de imagens e links podem ser facilmente rompidos se as estruturas de pastas e arquivos não estiverem sincronizadas. 

A pasta remota já deve existir para que o Dreamweaver possa conectar-se a ela. Se você não tem uma pasta designada que atue como sua 
pasta remota no servidor Web, crie uma ou peça ao administrador do servidor do ISP que crie uma para você. 
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Configurar um servidor de teste 


Configurar um servidor de teste 
Sobre o URL da Web do servidor de teste 


Se você planeja desenvolver páginas dinâmicas, o Dreamweaver precisa dos serviços de um servidor de teste para gerar e exibir conteúdo 
dinâmico enquanto você trabalha. O servidor de teste pode ser o computador local, um servidor de desenvolvimento, um servidor de teste ou um 
servidor de produção. 


Para obter uma visão geral detalhadas sobre os propósitos de um servidor de teste, consulte o artigo do Dreamweaver Developer Center de 
David Power, Configuração de um servidor de teste local na Dreamweaver CS5. 


E « P, iníci 
Configurar um servidor de teste Pr 


1. Selecione Site > Gerenciar sites. 
2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique no ícone de edição. 
3. Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 


* Para adicionar um servidor, clique no botão Adicionar novo servidor. 


e Selecione um servidor existente e clique no botão Editar servidor existente. 


4. Especifique opções básicas conforme necessário e clique no botão Avançado. 


Nota: você deve especificar um URL da Web na tela Básico quando determinar um servidor de teste. Para obter mais informações, 
consulte a próxima seção. 


5. Em Servidor de teste, selecione o modelo de servidor que deseja usar para o aplicativo da web. 


Nota: a partir da Dreamweaver CS5, o Dreamweaver não instala mais comportamentos de servidor ASP.NET, ASP JavaScript ou JSP. 
(Você pode reativar manualmente os comportamentos obsoletos do servidor se quiser, mas tenha em mente que o Dreamweaver não os 
suporta mais.) Entretanto, se você está trabalhando em páginas ASP.NET, ASP JavaScript ou JSP, o Dreamweaver ainda é compatível 
com a Visualização dinâmica, a coloração de códigos e as dicas de códigos dessas páginas. Não é necessário selecionar ASP.NET, ASP 
JavaScript ou JSP na caixa de diálogo Definição de sites para que esses recursos funcionem. 


6. Clique em Salvar para fechar a tela Avançado. Em seguida, na categoria Servidores, especifique o servidor que você acabou de adicionar 
ou editar como um servidor de teste. 


Para o início 


Sobre o URL da Web do servidor de teste 


É necessário especificar um URL da Web para que o Dreamweaver possa usar os serviços de um servidor de teste para exibir dados e se 
conectar a bancos de dados enquanto você trabalha. O Dreamweaver usa conexão de tempo de design para fornecer informações úteis sobre o 
banco de dados, como os nomes das tabelas e das colunas das tabelas do banco de dados. 


O URL da Web para um servidor de teste compreende o nome de domínio e os diretórios virtuais ou subdiretórios do diretório inicial do site. 


Nota: a terminologia usada no Microsoft IS pode variar de servidor para servidor, mas os mesmos conceitos se aplicam à maioria dos servidores 
Web. 


O diretório inicial A pasta no servidor mapeada para o nome de domínio do site. Suponha que a pasta que você deseja usar para processar 
páginas dinâmicas esteja em c:lsitesicompany), e que essa pasta seja seu diretório inicial (ou seja, essa pasta é mapeada para o nome de 
domínio do seu site; por exemplo, www.mystartup.com). Nesse caso, o prefixo de URL é http:/Awww.mystartup.com/. 


Se a pasta que você deseja usar para processar páginas dinâmicas é uma subpasta do seu diretório inicial, basta adicionar a subpasta ao URL. 
Se seu diretório inicial é ciisitesicompany), o nome de domínio do seu site é www.mystartup.com, e a pasta usada para processar páginas 
dinâmicas é c:lsitesicompanylinventory. Insira o seguinte URL da Web: 


http:/ANyww.mystartup.com/inventory/ 


Se a pasta que você deseja usar para processar páginas dinâmicas não é seu diretório inicial ou qualquer um de seus subdiretórios, crie um 
diretório virtual. 


Um diretório virtual Uma pasta que está contida fisicamente no diretório inicial do servidor, ainda que ela pareça estar no URL. Para criar um 
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diretório virtual, especifique um alias para o caminho da pasta no URL. Suponha que seu diretório inicial é cilsitesicompany, sua pasta de 
processamento é d:lappslinventory e você define um alias para essa pasta chamado warehouse. Insira o seguinte URL da Web: 


http:/Avww.mystartup.com/warehouse/ 


Host local Refere-se aos diretórios inicias nos seus URLs quando o cliente (geralmente, um navegador, mas, neste caso, o Dreamweaver) é 
executado no mesmo sistema do servidor da web. Suponha que o Dreamweaver seja executado no mesmo sistema Windows do servidor da web, 
seu diretório inicial seja c:Isitesicompany e você tenha definido um diretório virtual chamado "warehouse" para se referir à pasta que deseja usar 
para processar páginas dinâmicas. Estes são os URLs da Web que devem ser digitados para os servidores Web selecionados: 


Servidor Web URL da Web 

ColdFusion MX 7 http://localhost:8500/warehouse/ 
HS http://localhost/warehouse/ 
Apache (Windows) http://localhost:80/warehouse/ 
Jakarta Tomcat (Windows) http://localhost:8080/warehouse/ 


Nota: por padrão, o servidor Web ColdFusion MX 7 é executado na porta 8500, o servidor Web Apache é executado na porta 80 e o servidor 
Web Jakarta Tomcat é executado na porta 8080. 


Para os usuários de Macintosh que executam o servidor Web Apache, o diretório inicial pessoal é Users/MeuNomeDeUsuário/Sites, em que 
MeuNomeDeUsuário é o nome de usuário do Macintosh. Um alias chamado -MyUserName é automaticamente definido para essa pasta quando 
você instala o Mac OS 10.1 ou superior. Portanto, o URL da Web padrão do Dreamweaver é o seguinte: 


http://localhost/-MeuNomeDeUsuário/ 
Se a pasta que você deseja usar para processar páginas dinâmicas é Users:MeuNomeDeUsuário:Sites:inventory, o URL da Web é o seguinte: 


http://localhost/-MeuNomeDeUsuário/inventory/ 


e Escolha do servidor de aplicativo 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Importar e exportar configurações do site do Dreamweaver 


Exportação de configurações do site 
Importação de configurações do site 


Você pode exportar as configurações do site como um arquivo XML que pode ser posteriormente importado para o Dreamweaver. A 
exportação/importação de sites permite que você transfira configurações do site para outras máquinas e versões de produto, compartilhe 
configurações do site com outros usuários e faça backup de configurações do site. 


O recurso de importação/exportação não importa ou exporta arquivos do site. Só importa/exporta configurações do site para que você economize 
o tempo de recriar sites no Dreamweaver. Para obter informações sobre criação de um novo site no Dreamweaver, consulteConfigurar uma 
versão local do seu site. 


Exporte as configurações do site regularmente para ter uma cópia de backup caso algo ocorra com o site. 


Para o início 


Exporte as suas configurações do site 


1. 


Selecione Site > Gerenciar sites. 


Selecione um ou vários sites cujas configurações você deseja exportar e clique em Exportar (CS5/CS5.5) ou no botão Exportar Es (CS6 e 
posterior): 


e Para selecionar mais de um site, use Control-clique (Windows) ou Command-clique (Macintosh) em cada site. 
e Para selecionar uma faixa de sites, Shift-clique no primeiro e último sites da faixa. 


Se quiser fazer backup de suas configurações do site para si mesmo, selecione a primeira opção na caixa de diálogo Exportando site e 
clique em OK. O Dreamweaver salva informações de login de servidor remoto, como o nome de usuário e a senha, além de informações do 
caminho local. 

Para compartilhar configurações com outros usuários, selecione a segunda opção na caixa de diálogo Exportando site e clique em OK. (O 
Dreamweaver não salva informações que não funcionariam para outros usuários, como informações de login de servidor remoto e caminhos 
locais.) 

Para cada site cujas configurações você deseja exportar, navegue até um local onde deseja salvar o arquivo do site e clique em Salvar. (O 
Dreamweaver salva as configurações de cada site como um arquivo XML com uma extensão de arquivo .ste.) 


Clique em Concluído. 


Nota: Salve o arquivo *.ste na pasta raiz local ou na área de trabalho para facilitar a localização. Caso você não se lembre de onde o 
colocou, procure os arquivos com extensão *.ste para localizá-lo. 


Para o início 


Importar configurações do site 


1. 


Selecione Site > Gerenciar sites. 


. Clique em Importar (CS5/CS5.5) ou no botão Importar site (CS6 e posterior). 


. Selecione um ou mais sites (definidos em arquivos com extensão .ste) cujas configurações serão importadas. 


Para selecionar mais de um site, use Control-clique (Windows) ou Command-clique (Macintosh) em cada arquivo .ste. Para selecionar uma 
faixa de sites, Shift-clique no primeiro e último arquivo da faixa. 


. Clique em Abrir e Concluído. 


Depois que o Dreamweaver importar as configurações de site, os nomes de sites serão exibidos na caixa de diálogo Gerenciar sites. 


e Sobre os sites do Dreamweaver 


e Fazendo backup e restaurando definições do site 


As publicações no Twitter!” e Facebook não estão licenciadas nos termos da Creative Commons. 
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Editar um site remoto existente 


Você pode usar o Dreamweaver para copiar um site remoto (ou qualquer ramificação de um site remoto) para o seu disco rígido local para editá- 
lo, mesmo que não tenha usado o Dreamweaver para criar o site original. Você deve ter as informações de conexão corretas e conecte-se ao 
servidor remoto do site antes de poder editar o site. 


1. Crie uma pasta local para o site existente e configure a pasta como a pasta local do site. (consulteConfigurar uma versão local do seu site). 
Nota: É preciso duplicar localmente a estrutura inteira da ramificação relevante do site remoto. 


2. Configure uma pasta remota usando as informações de acesso remoto sobre o site. Conecte-se ao site remoto para baixar os arquivos 
para seu computador antes de editá-los. (consulteConexão a um servidor remoto.) 


Escolha a pasta raiz correta para o site remoto. 
3. No painel Arquivos (Janela > Arquivos), clique no botão Conectar host remoto (para acessar o FTP) ou no botão Atualizar (para acessar a 
rede) na barra de ferramentas para exibir um site remoto. 


4. Edite o site: 


e Caso deseje trabalhar com o site todo, selecione a pasta raiz do site remoto no painel Arquivos e clique em Obter arquivo(s) na barra 
de ferramentas para fazer o download de todo o site no disco rígido local. 


e Caso deseje trabalhar com apenas um dos arquivos ou pastas do site, localize o arquivo ou a pasta na exibição remota do painel 
Arquivos e clique em Obter arquivo(s) na barra de ferramentas para fazer o download desse arquivo no disco rígido local. 


O Dreamweaver duplica automaticamente a estrutura do site remoto que é necessária para colocar o arquivo obtido por download na parte 
correta da hierarquia do site. Ao editar somente uma parte do site, você deve em geral incluir arquivos dependentes, como os arquivos de 
imagem. 


e Sobre os sites do Dreamweaver 
e Editando um site existente (blog do Dreamweaver) 


As publicações no Twitter'” e Facebook não estão licenciadas nos termos da Creative Commons. 
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Conexão a um servidor remoto 


Um servidor remoto (muitas vezes mencionado como o servidor Web) é o local onde você publica seus arquivos do site de forma que as pessoas 
possam vê-los online. O servidor remoto é simplesmente outro computador como o seu computador local com uma coleção de arquivos e pastas. 
Por exemplo, um servidor FTP ou servidor WebDav. 


Você especificará uma pasta para seu site no servidor remoto, assim como especificou uma pasta para seu site local em seu computador local. O 
Dreamweaver trata a pasta remota especificada como o seu site remoto. 


Ao configurar uma pasta remota, você deve selecionar um método de conexão para que o Dreamweaver carregue e baixe arquivos para e do 
servidor Web. O método de conexão mais típico é o FTP, mas o Dreamweaver também suporta os métodos de rede local, FTPS, SFTP, WebDav 
e RDS. Se não souber que método de conexão usar, pergunte a seu ISP ou a seu administrador de servidor. 


Especificar um método de conexão 

Definir as Opções avançadas de servidor 

Conectar-se ou desconectar-se de uma pasta remota com acesso por rede 
Conectar-se ou desconectar-se de uma pasta remota com acesso por FTP 
Solução de problemas de configuração de pasta remota 


Nota: o Dreamweaver também oferece suporte a conexões para servidores IPv6 ativados. Os tipos de conexão com suporte incluem FTP, SFTP, 
WebDav e RDS. Para obter mais informações, consulte vww.ipv6.org/ 


Para obter mais informações sobre como configurar um servidor de teste, consulte Configurar um servidor de teste. Para assistir a um tutorial em 
vídeo, clique aqui. 


Para o início 


Especificar um método de conexão 


Conexões FTP 
Use esta configuração se você se conectar ao servidor Web usando FTP. 


Observação: o Business Catalyst é compatível apenas com SFTP. Se você estiver usando o Business Catalyst, consulte a seção sobre conexões 
SFTP nesta página. 


1. Selecione Site > Gerenciar sites. 


2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique no ícone de edição. 
3. Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 
e Para adicionar um servidor, clique no botão Adicionar novo servidor 


e Selecione um servidor existente e clique no botão Editar servidor existente 


A ilustração a seguir mostra a tela Básico da categoria Servidor com os campos de texto já preenchidos. 


site 
Servidores EA pMAçad O 
Controle de versão Nome do servidor: | John Doc 3 Server 


a Wah, As 


dor de serviços 


v Configurações vart 
Irformeções loc Uso ds conexão: | FTP ” 
Encobrindo Endereço FTP: | server imyrost.com Porta: [21 
Design Notes 
Colunas de enel Nome do usuário: | for 
Contribute CT— 
Modelos 
som [Tester 


Diretório reiz: | bic him | 


URL da Web: | neto: //server Limyhost,com/oublc homi) 


DP Mais opções 


[sie J[ com] 
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Tela Básico da categoria Servidor, caixa de diálogo Configuração de site. 


Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. Você pode escolher qualquer nome que seja necessário. 


5. No menu pop-up Uso da conexão, selecione FTP. 


6. Na caixa de texto Endereço FTP, digite o endereço do servidor de FTP no qual você carrega os arquivos do seu site. 


O endereço FTP é o nome completo na Internet de um sistema de computador, como ftp.mindspring.com. Insira o endereço completo sem 
qualquer texto adicional. Em particular, não adicione um nome de protocolo à frente do endereço. 


Se não souber o seu endereço FTP, você deverá entrar em contato com a empresa responsável pela hospedagem na Web. 


Nota: a porta 21 é a porta padrão para receber conexões de FTP. É possível trocar o número da porta padrão editando a caixa de texto à 
direita. O resultado quando você salva as configurações é um caractere de dois pontos e o novo número de porta anexado ao endereço 
FTP (por exemplo, ftp.mindspring.com:29). 


7. Nas caixas de texto Nome do usuário e Senha, digite o nome do usuário e a senha que você usa para conectar-se ao servidor de FTP. 


8. Clique em Testar para testar o endereço FTP, nome do usuário e senha. 


10. 


11. 


12. 
13. 


14, 


15. 


16. 


Nota: você deve obter as informações de endereço FTP, nome do usuário e senha com o administrador do sistema da empresa que 
hospeda seu site. Ninguém mais tem acesso a essas informações. Digite as informações exatamente como forem fornecidas pelo 
administrador do sistema. 


O Dreamweaver salva sua senha por padrão. Desmarque a opção Salvar se você preferir que o Dreamweaver solicite uma senha sempre 
que fizer a conexão com o servidor remoto. 


Na caixa de texto Diretório raiz, digite o diretório (pasta) no servidor remoto onde você armazena documentos visíveis ao público. 


Caso você não tenha certeza sobre o que inserir como o diretório raiz, entre em contato com o administrador do servidor ou deixe a caixa 
de texto em branco. Em alguns servidores, o diretório raiz é igual ao diretório ao qual você primeiro se conectou com FTP. Para saber, 
conecte-se ao servidor. Se uma pasta chamada public html, ou www, ou seu nome de usuário, aparecer na visualização Arquivo remoto do 
painel Arquivos, é provável que este seja o diretório a ser especificado na caixa de texto Diretório raiz. 


Na caixa de texto URL da Web, digite o URL do site (por exemplo, http:/Avww.mysite.com). O Dreamweaver utiliza o URL da Web para criar 
links relativos à raiz do site e verificar links quando você usa o verificador de links. 


Para uma explicação mais extensa desta opção, consulte a categoria Configurações avançadas. 


Expanda a seção Mais opções se ainda for necessário definir mais opções. 
Selecione Usar FTP passivo se a configuração de firewall exigir o uso de FTP passivo. 


O FTP passivo permite que o software local configure a conexão por FTP, em vez de solicitar que o servidor remoto configure. Se não tiver 
certeza quanto ao uso de FTP passivo, verifique com o administrador do sistema ou tente marcar e desmarcar a opção Usar FTP passivo. 


Para obter mais informações, consulte o TechNote 15220 no site da Adobe em wwnw.adobe.com/go/in 15220 br. 

Selecione Usar modo de transferência IPv6 caso você esteja usando um servidor de FTP ativado para IPv6. 

Com a implementação da versão 6 do protocolo IP (IPv6), o EPRT e o EPSV substituíram os comandos de FTP PORT e PASV, 
respectivamente. Portanto, se você está tentando conectar-se a um servidor FTP ativado por IPv6, use os comandos passivo estendido 
(EPSV) e ativo estendido (EPRT) para a conexão dos dados. 

Para obter mais informações, consulte www.ipv6.org/. 


Selecione Usar proxy se você quiser especificar um host ou uma porta do proxy. 


Para obter mais informações, clique no link para ir para a caixa de diálogo Preferências e, em seguida, clique no botão Ajuda na categoria 
Site da caixa de diálogo Preferências. 


Clique em Salvar para fechar a tela Básico. Em seguida, na categoria Servidores, especifique se o servidor que você adicionou ou editou é 
um servidor remoto, de teste ou os dois. 


Para obter ajuda com a solução de problemas de conectividade do FTP, consulte TechNote kb405912 no site da Adobe em 
www.adobe.com/go/kb405912. 


Conexões SFTP 
Use FTP seguro (SFTP) se a configuração de firewall/servidor exigir o uso de um FTP seguro. O SFTP usa criptografia e chaves de identidade 
para proteger uma conexão com o servidor de teste/remoto. 


Nota: é preciso que seu servidor esteja executando um serviço SFTP para que você selecione essa opção. Se você não souber se o servidor 
está executando SFTP, consulte o administrador do sistema. 


Agora é possível autenticar conexões para um servidor SFTP com base na “Identity Key' (com ou sem um frase secreta). 


O Dreamweaver oferece suporte apenas aos arquivos chave OpenSSH. 


i. 


Selecione Site > Gerenciar sites. 
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2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar. 
3. Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 


e Para adicionar um servidor, clique no botão Adicionar novo servidor 

e Selecione um servidor existente e clique no botão Editar servidor existente 
4. Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de sua escolha. 
5. No menu pop-up Uso da conexão, selecione SFTP. 
6. Especifique outras opções na caixa de diálogo com base em uma das situações aplicáveis a seguir: 


e Cenário 1: nenhuma chave, mas existe nome de usuário e senha 
e Cenário 2: existe uma chave que não requer uma frase secreta 
e Cenário 3: existe uma chave que requer uma frase secreta 


Cenário 1 


Você não tem uma chave e quer estabelecer uma conexão SFTP usando apenas as credenciais - combinação de nome de usuário e senha. 
Nesse caso, use o método de autenticação “Username and Password”. 


Nome do servidor: [ Servidor sem nome ] 
tdo co 
Endereço SFTP:I( Porta; 


Autenticação: (*) Nome de usuário e senha: () ârquivo de chave privada: 


DR 
E 


[ ] Salvar senha 


Testar 


Diretório raiz: [ ] 


URL da vie: 


Configuração de site com conexão SFTP - nome de usuário e senha 


1. Digite um nome amigável para o servidor. 

2. Na lista Conexão, clique em SFTP e insira um endereço e uma porta SFTP válidos. 

3. Para o método de autenticação, clique em Nome de usuário e senha e, em seguida, forneça o nome de usuário e a senha. 
Para verificar a conexão, clique em Testar. 

4. Digite um diretório raiz válido. 

5. Digite um URL da Web válido. 


6. Clique em Salvar. 


Cenário 2 


Há uma chave que não requer uma frase secreta. E você quer estabelecer uma conexão SFTP usando a combinação de nome de usuário e 
Arquivo de identidade. Nesse caso, use o método de autenticação “Arquivo de chave privada”. 
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Configuração de site com conexão SFTP - Arquivo de identidade 


1. Digite um nome amigável para o servidor. 
2. Nalista Conexão, clique em SFTP e insira um endereço e uma porta SFTP válidos. 


3. Para o método de autenticação, clique em Arquivo de chave privada e, em seguida, forneça: 


e Nome do usuário 
* Um Arquivo de identidade 
válido 
e Deixe a Frase secreta em branco e selecione Salvar frase secreta 


Nota: o Dreamweaver oferece suporte apenas aos arquivos chave OpenSSH. 
Para verificar a conexão, clique em Testar. 

4. Digite um diretório raiz válido. 

5. Digite um URL da Web válido. 


6. Clique em Salvar. 


Cenário 3 


Há uma chave que requer uma frase secreta. E você quer estabelecer uma conexão SFTP usando a combinação de nome de usuário e Arquivo 
de identidade, e a Frase secreta da chave. Nesse caso, use o método de autenticação “Arquivo de chave privada”. 
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Nome do servidor: [ Servidor sem nome ] 
Lo dacensã 
Endereço STR: ] Porta: 


Autenticação: () Nome de usuário e senha: (º) Arquivo de chave privada: 


Usuário: 
Arq. Idenk.: [o [=| 
Frase secr.: 


[] Salvar frase secreta 


Testar 


Diretório raiz: 2] 


URL da Web: [http:/f ] 


Configuração de site com conexão SFTP - Arquivo de identidade e frase secreta 


1. Digite um nome amigável para o servidor. 
2. Na lista Conexão, clique em SFTP e insira um endereço e uma porta SFTP válidos. 


3. Para o método de autenticação, clique em Arquivo de chave privada e, em seguida, forneça: 


e Nome do usuário 
* Um Arquivo de identidade 
válido 
* Frase secreta do Arquivo de identidade 


Nota: O Dreamweaver oferece suporte apenas aos arquivos chave OpenSSH. 
Para verificar a conexão, clique em Testar. 

4. Digite um diretório raiz válido. 

5. Digite um URL da Web válido. 


6. Clique em Salvar. 
Nota: a porta 22 é a porta padrão para receber conexões de SFTP. 


O restante das opções são as mesmas que as opções para conexões de FTP. Para obter mais informações, consulte a seção acima. 


Conexões FTPS 
O FTPS (FTP sobre SSL) fornece tanto a criptografia como o suporte de autenticação em comparação ao SFTP que oferece só o suporte de 
criptografia. 


Usando o FTPS para transferência de dados, você pode criptografar suas credenciais e, também, os dados que são transmitidos ao servidor. 
Além disso, você pode autenticar conexões e credenciais do servidor. As credenciais de um servidor são validadas de acordo com o conjunto 
atual de certificados de Autoridade de certificação (CA) confiáveis do servidor no banco de dados do Dreamweaver. As Autoridades de 
certificação (CA), que incluem empresas como VeriSign, Thawte, entre outras, emitem certificados de servidor assinados digitalmente. 


Nota: o procedimento descreve opções específicas para FTPS. Para obter informações sobre opções de FTP regular, veja a seção anterior. 
1. Selecione Site > Gerenciar sites. 


2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar. 
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Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 


e Clique no botão “+” (Adicionar novo servidor) para adicionar um servidor novo. 


e Selecione um servidor existente e clique no botão Editar servidor existente. 
Em Nome do servidor, especifique um nome para o servidor novo. 
Em Conectar usando, selecione uma das seguintes opções com base em seus requisitos. 
FTP sobre SSLITLS (Criptografia implícita) O servidor encerrará a conexão se a solicitação de segurança não for recebida. 


FTP sobre SSLITLS (Criptografia explícita) Se o cliente não solicitar segurança, o servidor poderá continuar uma transação insegura ou 
recusar/limitar a conexão. 


Na Autenticação, escolha uma das seguintes opções: 


Nenhum As credenciais do servidor, assinadas ou autoassinadas, são exibidas. Se você aceitar as credenciais do servidor, o certificado 
será incluído em um repositório de certificados, trustedSites. db, no Dreamweaver. Quando você se conectar a um mesmo servidor 
pela segunda vez, o Dreamweaver se conectará diretamente a ele. 


Nota: se as credenciais de um certificado autoassinado tiverem sido alteradas no servidor, você será solicitado a aceitar as novas 
credenciais. 
Confiável O certificado apresentado é validado de acordo com o conjunto atual de Autoridades de certificação (CA) confiáveis do servidor 


no banco de dados do Dreamweaver. A lista de servidores confiáveis fica armazenada no arquivo cacerts. pem. 


Nota: uma mensagem de erro será exibida se você selecionar Servidor confiável e conectar-se a um servidor com certificado autoassinado. 


. Expanda a seção Mais opções para definir mais opções. 


Criptografar somente canal de comandos Selecione essa opção se você quiser criptografar somente os comandos que estiverem sendo 
transmitidos. Use essa opção quando os dados transmitidos já estiverem criptografados ou não contiverem informações sensíveis. 


Criptografar somente nome de usuário e senha Selecione essa opção se desejar criptografar somente seu nome de usuário e senha. 


. Clique em Salvar para fechar a tela Básico. Em seguida, na categoria Servidores, especifique se o servidor que você adicionou ou editou é 


um servidor remoto, de teste ou os dois. 


Para obter ajuda com a solução de problemas de conectividade do FTP, consulte TechNote kb405912 no site da Adobe em 
www.adobe.com/go/kb405912. 


Conexões locais ou de rede 
Use esta configuração para conectar-se a uma pasta de rede ou se estiver armazenando arquivos ou executando o servidor de teste no 
computador local. 


q. 
2: 
3. 


Selecione Site > Gerenciar sites. 
Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar. 
Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 


e Para adicionar um servidor, clique no botão Adicionar novo servidor 


e Selecione um servidor existente e clique no botão Editar servidor existente 


4. Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de sua escolha. 


5. No menu pop-up Uso da conexão, selecione Local/Rede. 


6. Clique no ícone de pasta ao lado da caixa de texto Pasta do servidor para procurar e selecionar a pasta onde os arquivos do site serão 


armazenados. 
7. Na caixa de texto URL da Web, digite o URL do site (por exemplo, http:/Anww.mysite.com). O Dreamweaver utiliza o URL da Web para criar 
links relativos à raiz do site e verificar links quando você usa o verificador de links. 
Para uma explicação mais extensa desta opção, consulte a categoria Configurações avançadas. 
8. Clique em Salvar para fechar a tela Básico. Em seguida, na categoria Servidores, especifique se o servidor que você adicionou ou editou é 
um servidor remoto, de teste ou os dois. 
Conexões WebDAV 


Use esta configuração se você se conectar ao servidor Web usando o protocolo Web-based Distributed Authoring and Versioning (WebDav). 


Para este método de conexão, você deve ter um servidor que aceite esse protocolo, como o Microsoft Internet Information Server (IIS) 5.0 ou 
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uma instalação corretamente configurada do servidor Web Apache. 


Nota: caso selecione WebDAV como método de conexão e estiver usando o Dreamweaver em um ambiente de multiusuário, você deverá 
certificar-se também de que todos os usuários selecionem WebDAV como método de conexão. Se alguns usuários selecionarem WebDAV e 
outros usuários escolherem outros métodos de conexão como, por exemplo FTP, o recurso de devolução/retirada do Dreamweaver não 
funcionará como o esperado, pois o WebDAV utiliza seu próprio sistema de bloqueio. 


i. 
2. 
3. 


Selecione Site > Gerenciar sites. 
Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar. 
Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 


e Para adicionar um servidor, clique no botão Adicionar novo servidor 


e Selecione um servidor existente e clique no botão Editar servidor existente 


4. Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de sua escolha. 


5. No menu pop-up Uso da conexão, selecione WebDAV. 


6. Para o URL, insira o URL completo até o diretório no servidor WebDAV com o qual você deseja se conectar. 


Esse URL inclui o protocolo, a porta e o diretório (se não for o diretório raiz). Por exemplo, http:/Avebdav.meudomínio.net/meusite. 
Digite o nome do usuário e a senha. 


Essas informações servem para a autenticação do servidor e não estão relacionadas ao Dreamweaver. Se você não souber ao certo o 
nome de usuário e a senha, consulte o administrador do sistema ou o webmaster. 


8. Clique em Testar para testar as configurações da conexão. 


9. Selecione a opção Salvar se deseja que o Dreamweaver lembre sua senha sempre que você iniciar uma nova sessão. 


10. 


11. 


Na caixa de texto URL da Web, digite o URL do site (por exemplo, http:/Awww.mysite.com). O Dreamweaver utiliza o URL da Web para criar 
links relativos à raiz do site e verificar links quando você usa o verificador de links. 


Para uma explicação mais extensa desta opção, consulte a categoria Configurações avançadas. 


Clique em Salvar para fechar a tela Básico. Em seguida, na categoria Servidores, especifique se o servidor que você adicionou ou editou é 
um servidor remoto, de teste ou os dois. 


Conexões RDS 
Você deverá usar esta configuração quando se conectar ao servidor Web usando RDS (Remote Development Services). Neste método de 
conexão, o servidor remoto deve estar em um computador que execute o Adobeê ColdFusion&) 


2. 
2: 
3. 


Selecione Site > Gerenciar sites. 
Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar. 
Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 


e Para adicionar um servidor, clique no botão Adicionar novo servidor 


e Selecione um servidor existente e clique no botão Editar servidor existente 


4. Na caixa de texto Nome do servidor, especifique um nome para o novo servidor. O nome pode ser qualquer um de sua escolha. 


5. No menu pop-up Uso da conexão, selecione RDS. 


6. Clique no botão Configurações e forneça as seguintes informações na caixa de diálogo Configurar servidor RDS: 


* Informe o nome do computador host no qual o servidor Web está instalado. 

e O nome do host é provavelmente um endereço IP ou um URL. Caso não tenha certeza, pergunte ao administrador. 
e Insira o número da porta à qual você se conecia. 

e Insira a pasta raiz remota como o diretório do host. 

* Por exemplo, cinetpublwwwrooimyHostDin. 

e Insira o nome de usuário e a senha do RDS. 


Nota: essas opções talvez não apareçam se você definir seu nome de usuário e sua senha nas configurações de segurança do 
administrador de ColdFusion. 


* Selecione a opção Salvar se você deseja que o Dreamweaver lembre de suas configurações. 


7. Clique em OK para fechar a caixa de diálogo Configurar servidor RDS. 


8. Na caixa de texto URL da Web, digite o URL do site (por exemplo, http:/Anww.mysite.com). O Dreamweaver utiliza o URL da Web para criar 


links relativos à raiz do site e verificar links quando você usa o verificador de links. 
Para uma explicação mais extensa desta opção, consulte a categoria Configurações avançadas. 
Clique em Salvar para fechar a tela Básico. Em seguida, na categoria Servidores, especifique se o servidor que você adicionou ou editou é 


um servidor remoto, de teste ou os dois. 
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Conexões do Microsoft Visual SourceSafe 
O suporte para o Microsoft Visual SourceSafe está obsoleto na Dreamweaver CS5. 


ei E . PERES 
Definir as Opções avançadas de servidor ara o início 


1. Selecione Site > Gerenciar sites. 
2. Clique em Novo para configurar um novo site ou selecione um site do Dreamweaver e clique em Editar. 
3. Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 


e Para adicionar um servidor, clique no botão Adicionar novo servidor 
* Selecione um servidor existente e clique no botão Editar servidor existente 


4. Especifique as Opções básicas conforme necessário e clique no botão Avançado. 


5. Selecione Manter informações sobre sincronização se quiser sincronizar automaticamente os arquivos locais e remotos. (Essa opção é 
selecionada por padrão.) 


6. Selecione Carregar automaticamente arquivos no servidor se deseja que o Dreamweaver carregue seu arquivo no site remoto quando você 
salvá-lo. 


7. Selecione Ativar retirada de arquivos se você deseja ativar o sistema de devolução/retirada. 


8. Se estiver usando um Servidor de teste, você deverá selecionar um modelo de servidor no menu pop-up Modelo de servidor. Para obter 
mais informações, consulte Configurar um servidor de teste. 


Para o início 
Conectar-se ou desconectar-se de uma pasta remota com acesso por rede 


e Você não precisa se conectar à pasta remota, você está sempre conectado. Clique no botão Atualizar para ver os arquivos remotos. 


SRT 
Conectar-se ou desconectar-se de uma pasta remota com acesso por FTP REPERARE 


e No painel Arquivos: 
e Para conectar-se, clique em Estabelece conexão com host remoto na barra de ferramentas. 


e Para desconectar-se, clique em Desconectar na barra de ferramentas. 


= á gs P, iníci 
Solução de problemas de configuração de pasta remota red 


Esta lista contém informações sobre problemas comuns encontrados durante a configuração de pastas remotas e sobre como solucioná-los. 


Também há uma nota técnica extensa que fornece especificamente informações sobre solução de problemas de FTP no site da Adobe em 
www.adobe.com/go/kb405912. 


e A implementação de FTP do Dreamweaver talvez não funcione adequadamente com alguns servidores proxy, firewalls de diversos níveis e 
outras formas de acesso indireto de servidor. Se ocorrerem problemas com o acesso ao FTP, solicite ajuda ao administrador de sistema 
local. 


e Para a implementação de FTP do Dreamweaver, você deverá conectar-se com a pasta raiz do sistema remoto. Certifique-se de indicar a 
pasta raiz do sistema remoto como o diretório do host. Se você especificou o diretório do host usando uma barra única (/), talvez seja 
necessário especificar um caminho relativo do diretório ao qual você está se conectando e a pasta raiz remota. Por exemplo, se a pasta raiz 
remota for um diretório de nível superior, pode ser necessário especificar um ../../ para o diretório do host. 

e Use sublinhados em vez de espaços e evite caracteres especiais nos nomes de arquivo e de pasta sempre que possível. Dois-pontos, 
barras, pontos e apóstrofos nos nomes de arquivos ou pastas podem causar problemas. 

e Se ocorrerem problemas com nomes de arquivo longos, use nomes menores. No Mac OS, os nomes de arquivo não podem ter mais de 31 
caracteres. 

e Muitos servidores usam links simbólicos (UNIX), atalhos (Windows) ou alias (Macintosh) para conectar uma pasta em uma parte do disco do 
servidor a outra pasta em outro local. Esses alias em geral não afetam a capacidade de conexão com a pasta ou o diretório apropriado, 
porém, se você puder se conectar a uma parte do servidor e não a outra, pode ser que haja uma discrepância do alias. 

e Se for exibida uma mensagem de erro do tipo "não é possível colocar o arquivo", pode ser que não haja espaço na pasta remota. Para 
obter informações mais detalhadas, verifique o registro de FTP. 


Nota: em geral, quando ocorrer algum problema com a transferência de FTP, verifique o registro de FTP selecionando Window > 
Resultados (Windows) ou Site > Registro de FTP (Macintosh) e, em seguida, clicando na tag Registro de FTP. 


(65) ev-nc-sa ] 
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Configure uma versão local de seu site 


Para configurar uma versão local do seu site, tudo que você terá de fazer é especificar a pasta local onde armazenará todos os arquivos do site. 
A pasta local pode estar em seu computador local ou em um servidor de rede. Use a caixa de diálogo Gerenciar sites do Dreamweaver para 
configurar vários sites e gerenciá-los. 


1. Identifique ou crie a pasta no seu computador onde quiser armazenar a versão local dos seus arquivos do site. (A pasta pode estar em 
qualquer lugar no seu computador.) Você especificará esta pasta como seu site local no Dreamweaver. 


2. No Dreamweaver, escolha o Site > Novo site. 
3. Na caixa de diálogo Definição do site, verifique se Categoria do site está selecionada. (Deve estar selecionada por padrão.) 


4. Na caixa Nome do site, digite um nome para o site. O nome aparece no painel Arquivos e na caixa de diálogo Gerenciar sites; ele não 
aparece no navegador. 


5. Na caixa de texto Pasta de site local, especifique a pasta que você identificou na etapa um — a pasta no seu computador onde quer 
armazenar a versão local dos seus arquivos do site. Você pode clicar no ícone de pasta à direita da caixa de texto para navegar até a 
pasta. 


6. Clique em Salvar para fechar a caixa de diálogo Definição do site. Agora você pode começar a trabalhar em seus arquivos do site locais no 
Dreamweaver. 


Quando estiver pronto, você pode preencher as outras categorias na caixa de diálogo Configuração de site, incluindo a categoria Servidores em 
que é possível especificar uma pasta remota no seu servidor remoto. 


Para assistir a um tutorial em vídeo sobre como configurar um novo site do Dreamweaver, clique aqui. 
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Controle de versão e Configurações avançadas 


Categoria Controle de versão 
Categoria Configurações avançadas 


Para acessar as categorias Controle de versão e Configurações avançadas na caixa de diálogo Configuração de site, escolha Site > Gerenciar 
sites, selecione o site que deseja editar e clique em Editar. 


é as P, iníci 
Categoria Controle de versão PERA 


Você pode retirar e devolver arquivos usando o Subversion. Para obter mais informações , consulte Use o Subversion (SVN) para retirar e 
devolver arquivos. 


E " PER 
Categoria Configurações avançadas ara o início 


Informações locais 


Pasta padrão de imagens A pasta em que você deseja armazenar imagens para o seu site. Digite o caminho para a pasta ou clique no ícone 
de pasta para ir até ela. O Dreamweaver usa o caminho para a pasta quando você adiciona imagens nos documentos. 


Links relativos a Especifique o tipo de links que o Dreamweaver cria quando você criar links para outros recursos ou páginas no site. O 
Dreamweaver pode criar dois tipos de links: relativo a documento e relativo a raiz do site. Para obter mais informações sobre as diferenças entre 
os dois tipos, consulte Caminhos absolutos relativo a documento e relativo a raiz do site. 


Por padrão, o Dreamweaver cria links relativos a documentos. Se alterar a configuração padrão e selecionar a opção Raiz do site, você deverá 
certificar-se de que o URL da Web para o site foi digitada na caixa de texto URL da Web (consulte abaixo). A alteração dessa configuração não 
converte o caminho de links existentes, a configuração será aplicada somente aos novos links que você criar visualmente com o Dreamweaver. 


Nota: Conteúdos vinculados por links relativos à raiz do site não são exibidos quando você visualiza documentos em um navegador local, a 
menos que você especifique um servidor de teste ou selecione a opção Visualizar usando arquivo temporário em Editar > Preferências > 
Visualizar no navegador. Isso ocorre porque os navegadores não reconhecem raízes de site, diferente dos servidores. 


URL da Web O URL do site. O Dreamweaver utiliza o URL da Web para criar links relativos à raiz do site e verificar links quando você usa o 
verificador de links. 

Links relativos à raiz do site serão úteis se você não tiver certeza do local final na estrutura do diretório da página em que está trabalhando ou se 
você achar que mais tarde precisará deslocar ou reorganizar os arquivos que contêm links. Links relativos à raiz do site são links cujos caminhos 
para outros recursos de site são relativos à raiz do site, não ao documento, portanto se você mover o documento para outro local, o caminho para 
Os recursos permanecerão corretos. 

Por exemplo, vamos dizer que você especificou http:/Anww.mysite.com/mycoolsite (o diretório raiz do site do servidor remoto) como o URL da 
Web e que também você tem uma pasta de imagens no diretório mycoolsite no servidor remoto (http:/Ayvww.mysite.com/mycoolsite/images). 
Vamos também dizer que seu arquivo index.html está no diretório mycoolsite. 

Quando você criar um link relativo à raiz do site no arquivo index.html para uma imagem no diretório de imagens, o link terá a seguinte aparência: 
<img src="/mycoolsite/images/image1l.jpg" /> 

É diferente de um link relativo a documento, que seria simplesmente: 

<img src="images/imagei.jpg" /> 

O suplemento de /mycoolsite/ para a origem de imagem liga a imagem relativa à raiz do site, não ao documento. Supondo-se que a imagem 
permaneça no diretório de imagem, o caminho do arquivo para a imagem (/mycoolsite/images/image1.jpg) estará sempre correta, mesmo que 
você mova o arquivo index.html para outro diretório. 

Para obter mais informações, consulte Caminhos absolutos relativos à raiz do site e documento. 

Considerando-se a verificação de link, o URL da Web será necessário para determinar se um link é interno ou externo ao site. Por exemplo, se o 
URL da Web é http:/Ayww.mysite.com/mycoolsite e o verificador de link encontra um link com o URL http:/Avww.yoursite.com na sua página, o 
verificador determina que o último link é externo e o registra como tal. Similarmente, o verificador de link usa o URL da Web para determinar se 
os links são internos para o site e em seguida verifica se eles estão interrompidos. 


Verificação de links com distinção de maiúsc.Iminúsc. Verifica se a distinção de maiúsc./minúsc. dos links corresponde à distinção de 
maiúsc./minúsc. dos nomes dos arquivos quando o Dreamweaver verifica links. Essa opção é útil em sistemas UNIX em que os nomes de arquivo 
diferenciam maiúsculas e minúsculas. 
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Ativar o cache Indica se deve ser criado um cache local para agilizar as tarefas de gerenciamento de sites e links. Se você não selecionar esta 
opção, o Dreamweaver perguntará se deseja criar um cache novamente antes de criar o site. É recomendável selecionar esta opção porque o 
painel Ativos (no grupo de painéis Arquivos) funciona somente se um cache for criado. 


Encobrimento e outras categorias 


Para obter mais informações sobre Encobrimento, Design Notes, Colunas de visualização de arquivos, Contribute, Modelos ou categorias de 
Spry, clique no botão Ajuda na caixa de diálogo. 
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Opções da caixa de diálogo Gerenciar sites 


Opções da caixa de diálogo Gerenciar sites (CS6) 
Opções da caixa de diálogo Gerenciar sites (CS5 e CS5.5) 


A caixa de diálogo Gerenciar sites é o seu portão para várias funções de site do Dreamweaver. Desta caixa de diálogo, você pode iniciar o 
processo de criação de um novo site, editando um site existente, duplicando um site, removendo um site ou importando e exportando 
configurações de um site. 


Nota: A caixa de diálogo Gerenciar sites não permite que você se conecte a um servidor remoto ou publique arquivos nele. Para obter instruções 
sobre a conexão a um servidor remoto, consulte Conexão a um servidor remoto. Se estiver tentando se conectar a um site existente, 
consulteEditar um site remoto existente. 


Para o início 


Opções da caixa de diálogo Gerenciar sites (CS6) 


1. Selecione Site > Gerenciar sites. 


Uma lista de sites é exibida. Se você ainda não criou um site, a lista estará em branco. 
2. Siga um destes procedimentos: 


Criar novo site Clique no botão Novo site para criar um novo site Dreamweaver. Em seguida, especifique o nome e o local do novo site na 
caixa de diálogo Configuração do site. Para obter mais informações, consulteConfigurar uma versão local do seu site. 


Importar um site Clique no botão Importar site para importar um site. Para obter mais informações, consultelmportação e exportação de 
configurações do site. 


Nota: o recurso de importação importa somente configurações do site que foram exportadas do Dreamweaver anteriormente. Não importa 
arquivos do site para criar um novo site do Dreamweaver. Para obter informações sobre criação de um novo site no Dreamweaver, 
consulteConfigurar uma versão local do seu site. 


Criar novo site do Business Catalyst Clique no botão Novo site do Business Catalyst para criar um site novo do Business Catalyst. Para 
obter mais informações, consulte Criação de um site temporário do Business Catalyst. 


Importação de um site do Business Catalyst Clique no botão Importar site do Business Catalyst para importar um site existente do 
Business Catalyst. Para obter mais informações, consulte Importação de site do Business Catalyst. 


3. Para sites existentes, as opções a seguir também são disponíveis: 


Excluir = Exclui o site selecionado e todas as suas informações de configuração de sua lista de sites do Dreamweaver; não exclui os 
arquivos reais do site. Se quiser remover os arquivos do site do seu computador, você precisará fazer isso manualmente. Para excluir um 
site do Dreamweaver, selecione-o na lista de sites e clique no botão Excluir. Essa ação não pode ser desfeita. 


Editar Permite que você edite informações como nome de usuário, senha e informações do servidor para um site do Dreamweaver 
existente. Para editar o site existente, selecione-o na lista de sites à esquerda e clique no botão Editar. A caixa de diálogo Configuração do 
site é aberta ao clicar no botão Editar para um site selecionado. Para obter mais informações sobre como editar opções de site existentes, 
clique no botão Ajuda nas várias telas da caixa de diálogo Configuração do site. 


Duplicar [5 Cria uma cópia de um site existente. Para duplicar um site, selecione-o na lista de sites à esquerda e clique no botão Duplicar. 
O site duplicado aparece na lista de sites com a palavra "cópia" anexada ao nome do site. Para alterar o nome do site duplicado, deixe o 


site selecionado e clique no botão Editar. 


Exportar Es Permite exportar as configurações do site selecionado como um arquivo XML (*.ste). Para obter mais informações, 
consultelmportação e exportação de configurações do site. 


Para o início 


Opções da caixa de diálogo Gerenciar sites (CS5 e CS5.5) 


1. Selecione Site > Gerenciar sites e escolha um site na lista à esquerda. 


2. Clique em um botão para selecionar uma das opções, fazer qualquer alteração necessária e clique em Concluído. 
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Novo Permite a criação de um novo site. Quando você clica no botão Novo, a caixa de diálogo Definição do site abre, permitindo que você 
nomeie e especifique o local do seu novo site. Para obter mais informações, consulteConfigurar uma versão local do seu site. 


Editar Permite que você edite informações como nome de usuário, senha e informações do servidor para um site do Dreamweaver 
existente. Selecione o site existente na lista de sites à esquerda e clique no botão Editar para editar o site existente. Para obter mais 
informações sobre edição das opções de site existente, consulteConexão a um servidor remoto. 


Duplicar Cria uma cópia de um site existente. Para duplicar um site, selecione o site na lista de sites à esquerda e clique no botão 
Duplicar. O site duplicado aparece na lista de sites com a palavra “cópia” anexada ao nome do site. Para alterar o nome do site duplicado, 
deixe o site selecionado e clique no botão Editar. 


Remover Exclui o site selecionado e todas as suas informações de configuração de sua lista de sites do Dreamweaver; não exclui os 
arquivos do site reais. Se quiser remover os arquivos do site do seu computador, você precisará fazer isso manualmente. Para excluir um 
site do Dreamweaver, selecione o site na lista de sites e clique no botão Remover. Essa ação não pode ser desfeita. 


Exportarlimportar Permite que você exporte as configurações do site selecionado como um arquivo XML (*.ste) ou importe configurações 
de um site. Para obter mais informações, consultelmportação e exportação de configurações do site. 


Nota: o recurso de inportação importa somente configurações do site que foram exportadas anteriormente. Não importa arquivos do site 
para criar um novo site do Dreamweaver. Para obter informações sobre criação de um novo site no Dreamweaver, consulteConfigurar uma 
versão local do seu site. 


e Sobre os sites do Dreamweaver 
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Gerenciamento de arquivos 
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Teste de seu site do Dreamweaver 


Diretrizes de teste do site 
Usar relatórios para testar o site 


Para o início 


Diretrizes de teste do site 


Antes de carregar o site em um servidor e declará-lo pronto para visualização, é uma boa ideia testá-lo localmente. (Na verdade, é uma boa ideia 
testar e solucionar os problemas do site sempre em toda sua criação — você pode identificar problemas logo e evitar repeti-los.) 


Você deve verificar se as páginas são exibidas e funcionam conforme esperado nos navegadores que você deseja, se não há links desfeitos e se 
elas não demoram muito para serem baixadas. Você também pode testar e solucionar problemas de todo o site executando um relatório de site. 


As seguintes diretrizes ajudarão você a criar uma boa experiência para os visitantes do site: 
Verifique se as páginas funcionam nos navegadores desejados. 


As páginas devem ser legíveis e funcionais em navegadores que não dão suporte a estilos, camadas, plug-ins ou JavaScript. Em páginas que 
apresentam falhas em navegadores mais antigos, considere o uso do comportamento Verificar navegador para redirecionar automaticamente os 
visitantes para outra página. 


Visualize as páginas em navegadores e plataformas diferentes. 


Isso dá a você a oportunidade de ver as diferenças de layout, cor, tamanhos de fonte e tamanho da janela do navegador padrão que não podem 
ser previstas em uma verificação do navegador de destino. 


Verifique o site em busca de links corrompidos e corrija-os. 


Outros sites também passam por novos projetos e reorganizações, e a página de link pode ter sido movida ou excluída. Você pode executar um 
relatório de verificação de link para testar os links. 


Monitore o tamanho do arquivo das páginas e o tempo de download. 


Não se esqueça de que se uma página consistir em uma tabela grande, em alguns navegadores, os visitantes não verão nada até a conclusão 
do carregamento de toda a tabela. Considere dividir tabelas grandes; caso isso não seja possível, considere colocar pouco conteúdo — como uma 
mensagem de boas-vindas ou um banner publicitário — fora da tabela na parte superior da página para que os usuários possam ver esse material 
durante o download da tabela. 


Execute alguns relatórios de site para testar e solucionar problemas em todo o site. 

Você pode verificar todo o site em busca de problemas, como documentos sem título, tags vazias e tags aninhadas redundantes. 
Valide o código para localizar erros de tag ou de sintaxe. 

Atualize e mantenha o site após a publicação. 


A publicação do site (ou seja, torná-lo dinâmico) pode ser realizada de várias formas e é um processo contínuo. Uma parte importante do 
processo é definir e implementar um sistema de controle de versão, seja com as ferramentas incluídas no Dreamweaver ou por meio de um 
aplicativo de controle de versão externo. 


Use os fóruns de discussão. 


Os fóruns de discussão do Dreamweaver estão disponíveis no site da Adobe em www.adobe.com/go/dreamweaver newsgroup. 


Esses fóruns são um grande recurso para a obtenção de informações sobre diferentes navegadores, plataformas etc. Você também pode discutir 
problemas técnicos e compartilhar dicas úteis com outros usuários do Dreamweaver. 


Para assistir a um tutorial sobre como solucionar problemas de publicação, consulte www.adobe.com/go/vid0164 br. 


Es = Para o início 
Usar relatórios para testar o site 


Você pode executar relatórios do site em atributos de HTML ou fluxo de trabalho. Você também pode usar o comando Relatórios para verificar os 
links no site. 


Os relatórios de fluxo de trabalho podem melhorar a colaboração com membros de uma equipe da Web. Você pode executar relatórios de fluxo 
de trabalho que exibem quem retirou um arquivo, quais arquivos estão associados a Design Notes e quais arquivos foram modificados 
recentemente. Você pode refinar ainda mais os relatórios de Design Note especificando parâmetros de nome/valor. 


Nota: você deve ter uma conexão de site remota definida para executar os relatórios de fluxo de trabalho. 
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Os relatórios em HTML permitem que você compile e gere relatórios para vários atributos HTML. Você pode verificar tags de fonte aninhadas 
combináveis, texto alternativo ausente, tags aninhadas redundantes, tags vazias removíveis e documentos sem título. 


Depois de executar um relatório, você pode salvá-lo como um arquivo XML e, em seguida, importá-lo para uma instância de modelo, um banco 
de dados ou uma planilha e imprimi-lo, ou exibi-lo em um site. 


Nota: Você também pode adicionar tipos de relatório diferentes ao Dreamweaver usando o site do Adobe Dreamweaver Exchange. 


Executar relatórios para testar um site 
1. Selecione Site > Relatórios. 


2. Selecione o que relatar no menu pop-up Relatório sobre e defina todos os tipos de relatório a serem executados (fluxo de trabalho ou 
HTML). 


Você não pode executar um relatório Arquivos selecionados no site, a menos que você tenha selecionado arquivos no painel Arquivos. 
3. Caso você tenha selecionado um relatório de fluxo de trabalho, clique em Configurações de relatório. Do contrário, ignore a etapa. 


Nota: Caso tenha selecionado mais de um relatório de fluxo de trabalho, você precisa clicar no botão Configurações de relatório de cada 
relatório. Selecione um relatório, clique em Configurações de relatório e insira as configurações; em seguida, repita o processo para todos 
os demais relatórios de fluxo de trabalho. 


Retirado por Cria um relatório listando todos os documentos retirados por um membro de equipe específico. Digite o nome do membro de 
uma equipe e, em seguida, clique em OK para retornar à caixa de diálogo Relatórios. 


Design Notes Cria um relatório listando todas as Design Notes dos documentos selecionados ou do site. Digite um ou mais pares 
nome/valor e, em seguida, selecione os valores de comparação nos menus pop-up correspondentes. Clique em OK para retornar à caixa 
de diálogo Relatórios. 


Modificado recentemente Cria um relatório listando arquivos que foram alterados durante um tempo específico. Insira faixas de datas e 
locais para os arquivos que você deseja exibir. 
4. Caso você tenha selecionado um relatório em HTML, selecione os seguintes relatórios: 


Tags de fonte aninhadas combináveis Cria um relatório que lista todas as tags de fonte aninhadas que podem ser combinadas para 
limpar o código. 


Por exemplo, <font color="4FF0000"><font size="4">STOP!</font></font> é informado. 


Texto alternativo ausente Cria um relatório listando todas as tags img que não têm texto alternativo. 


O texto alternativo aparece no lugar das imagens nos navegadores somente de texto ou nos navegadores que fazem download manual de 
imagens. Os leitores de tela indicam texto alternativo, e alguns navegadores exibem texto alternativo quando o usuário massa o mouse pela 
imagem. 

Tags aninhadas redundantes Cria um relatório detalhando tags aninhadas que devem ser limpas. 


Por exemplo, <i> As chuvas <i> na</i> Espanha se concentram principalmente na planície</i> é relatado. 


Tags vazias removíveis Cria um relatório detalhando todas as tags vazias que podem ser removidas para limpar o código HTML. 
Por exemplo, você pode ter excluído um item ou imagem na Visualização de código, mas deixado as tags aplicadas a esse item. 
Documentos sem título Cria um relatório listando todos os documentos sem título encontrados dentro dos parâmetros selecionados. O 
Dreamweaver informa todos os documentos com títulos padrão, várias tags de título ou tags de título ausentes. 

5. Clique em Executar para criar o relatório. 


Dependendo do tipo de relatório executado, você pode ser solicitado a salvar o arquivo, definir o site ou selecionar uma pasta (caso você 
ainda não tenha feito isso). 


Uma lista de resultados é exibida no painel Relatórios do site (no grupo de painéis Resultados). 


Usar e salvar um relatório 
1. Execute um relatório (consulte o procedimento anterior). 
2. No painel Relatórios do site, realize um dos seguintes procedimentos para exibir o relatório: 


e Clique no cabeçalho da coluna pela qual você deseja classificar os resultados. 


Você pode classificar por nome de arquivo, número de linha ou descrição. Você também pode executar vários relatórios diferentes e 
mantê-los abertos. 


* Selecione qualquer linha no relatório e clique no botão Mais informações, na lateral esquerda do painel Relatórios do site, para obter 
uma descrição do problema. 
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e Clique duas vezes em uma linha no relatório para exibir o código correspondente na janela Documento. 


Nota: se você estiver na Visualização de design, o Dreamweaver alterará a exibição para dividi-la e mostrar o problema informado no 
código. 


3. Clique em Salvar relatório para salvar o relatório. 


Ao salvar um relatório, você pode importá-lo para um arquivo de modelo existente. Em seguida, você pode importar o arquivo para um 
banco de dados ou planilha e imprimi-lo ou usar o arquivo para exibir o relatório em um site. 


Depois de executar relatórios HTML, use o comando Limpar HTML para corrigir todos os erros de HTML listados por esses relatórios. 


A Adobe também recomenda 
e Tutorial sobre como solucionar problemas de publicação 
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Sincronização de arquivos 


Sincronizar os arquivos nos sites local e remoto 


' ' E e Para o início 
Sincronizar os arquivos nos sites local e remoto 


Depois de criar arquivos nos sites locais e remotos, você pode sincronizar os arquivos entre os dois sites. 


Nota: Caso o site remoto seja um servidor FTP (e não um servidor em rede), a sincronização dos arquivos usa FTP. 
Antes de sincronizar os sites, você pode verificar quais arquivos você deseja colocar, obter, excluir ou ignorar. O Dreamweaver também confirma 
quais arquivos foram atualizados depois que você completa a sincronização. 


Verifique quais arquivos são mais novos no site local ou remoto sem sincronização 
*& No painel Arquivos, siga um destes procedimentos: 


e Clique no menu Opções no canto superior direito e, em seguida, selecione Editar > Selecionar um local mais novo ou Editar > Selecionar 
um remoto mais novo. 


ERA 


e No painel Arquivos, clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, 
selecione Selecionar > Local mais novo ou Selecionar > Remoto mais novo. 


Exibir informações de sincronização detalhadas de um determinado arquivo 

*& No painel Arquivos, clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo sobre o qual 
você deseja obter informações e, em seguida, selecione Exibir informações de sincronização. 

Nota: Para que esse recurso esteja disponível, a opção Manter informações sobre sincronização deve estar selecionada na categoria Remoto da 
caixa de diálogo Definição de sites. 


Sincronizar os arquivos 
1. No painel Arquivos (Janela > Arquivos), selecione um site no menu em que o site atual, o servidor ou a unidade é exibida. 


2. (Opcional) Selecione arquivos ou pastas específicas ou avance à próxima etapa para sincronizar todo o site. 
3. Clique no menu Opções no canto superior direito do painel Arquivos e selecione Site > Sincronizar. 


Você também pode clicar no botão Sincronizar na parte superior do painel Arquivos para sincronizar arquivos. 
4. No menu Sincronizar, realize um dos seguintes procedimentos: 
e Para sincronizar todo o site, selecione Nome do site inteiro. 


e Para sincronizar apenas os arquivos selecionados, selecione Apenas arquivos locais selecionados (ou Apenas arquivos remotos 
selecionados caso a Visualização remota do painel Arquivos esteja onde você fez a seleção mais recente). 


5. Selecione a direção na qual você deseja copiar os arquivos: 
Colocar arquivos mais recentes no remoto Carrega todos os arquivos locais que não existem no servidor remoto ou que foram alterados 
após o último carregamento. 


Obter arquivos mais recentes do remoto Baixa todos os arquivos remotos que não existem localmente ou que foram alterados desde o 
último download. 


Obter e colocar os arquivos mais novos Coloca as versões mais recentes de todos os arquivos nos sites local e remoto. 


6. Selecione se você deseja excluir os arquivos no site de destino sem equivalentes no site de origem. (Isso não está disponível caso você 
selecione Obter e Colocar no menu Direção.) 


Caso você selecione Colocar arquivos mais recentes no remoto e a opção Excluir, todos os arquivos no site remoto para os quais não há 
nenhum arquivo local correspondente são excluídos. Caso você selecione Obter arquivos mais recentes do remoto, todos os arquivos no 
site local para os quais não há arquivos remotos correspondentes são excluídos. 


7. Clique em Visualizar. 
Nota: Para poder sincronizar os arquivos, você deve visualizar as ações que o Dreamweaver realiza para cumprir essa tarefa. 


Caso a versão mais recente de cada arquivo escolhido já esteja em ambos os locais e mais nada precise ser excluído, um alerta é exibido 
informando que nenhuma sincronização é necessária. Do contrário, a caixa de diálogo Sincronizar é exibida para permitir alterar as ações 
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(colocar, obter, excluir e ignorar) desses arquivos antes da execução da sincronização. 


Verifique a ação a ser realizada em cada arquivo. 


Para alterar a ação de um determinado arquivo, selecione-o e, em seguida, clique em um dos ícones de ação na parte inferior da janela de 
visualização. 

Comparar A ação Comparar só funciona caso você tenha instalado e especificado uma ferramenta para comparação de arquivo no 
Dreamweaver. Caso o Ícone de ação esteja esmaecido, a ação não pode ser realizada. 


Marcar arquivos selecionados como já sincronizados Essa opção permite especificar que o(s) arquivo(s) selecionado(s) já está(ão) 
sincronizado(s). 


10. Clique em OK para sincronizar os arquivos. Você pode exibir ou salvar os detalhes da sincronização em um arquivo local. 


Mais tópicos da Ajuda 


(63) ex-nc-sa | 
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Armazenamento de informações de arquivo em Design Notes 


Sobre as Design Notes 

Ativar e desativar as Design Notes para um site 
Associar Design Notes a arquivos 

Trabalhar com Design Notes 


Para o início 


Sobre as Design Notes 


As Design Notes são notas que você cria para um arquivo. As Design Notes são associadas ao arquivo que descrevem, embora sejam 
armazenadas em um arquivo separado. Você pode ver quais arquivos têm Design Notes anexadas no painel expandido Arquivos: um ícone de 
Design Notes é exibido na coluna Notas. 


Você pode usar as Design Notes para controlar as informações de arquivo adicionais associadas aos documentos como, por exemplo, nomes de 
arquivo da fonte de imagem e comentários sobre o status do arquivo. Por exemplo, caso copie um documento de um site para outro, você pode 
adicionar Design Notes a esse documento com o comentário de que o documento original está na outra pasta de site. 


Você também pode usar as Design Notes para controlar as informações importantes que não pode colocar em um documento por motivos de 
segurança como, por exemplo, notas sobre como um determinado preço ou configuração foi escolhido ou quais fatores de marketing 
influenciaram uma decisão de design. 


Caso um arquivo esteja aberto no AdobeO Fireworks ou em Flash e seja exportado para outro formato, o Fireworks e o Flash salvam 
automaticamente o nome do arquivo fonte original em um arquivo de Design Notes. Por exemplo, caso você abra myhouse.png no Fireworks e o 
exporte para myhouse.gif, o Fireworks cria um arquivo de Design Notes chamado myhouse.gif.mno. Esse arquivo de Design Notes contém o 
nome do arquivo original, como um arquivo absoluto: URL. Dessa forma, as Design Notes de myhouse.gif podem conter a seguinte linha: 


fw source="file:///Mydisk/sites/assets/orig/myhouse. png" 


Uma Design Note Flash semelhante pode conter a seguinte linha: 


fl source="file:///Mydisk/sites/assets/orig/myhouse.fla" 


Nota: Para compartilhar as Design Notes, os usuários devem definir o mesmo caminho de raiz do site, sites/assets/orig). 
Quando você importa o gráfico para o Dreamweaver, o arquivo de Design Notes é copiado automaticamente para o site com o gráfico. Quando 
você seleciona a imagem no Dreamweaver e opta por editá-la usando o Fireworks, este abre o arquivo original para edição. 


« é E E P iníci 
Ativar e desativar as Design Notes para um site iii gia 


Design Notes são notas associadas a um arquivo, embora sejam armazenadas em um arquivo separado. Use as Design Notes para controlar as 
informações de arquivo adicionais associadas aos documentos como, por exemplo, nomes de arquivo da fonte de imagem e comentários sobre o 
status do arquivo. 


Você ativa e desativa as Design Notes para um site na categoria Design Notes da caixa de diálogo Definição de sites. Ao ativar Design Notes, 
você pode optar por usá-las apenas localmente, se quiser. 
1. Selecione Site > Gerenciar sites. 
Na caixa de diálogo Gerenciar sites, selecione um site e, em seguida, clique em Editar. 
Na caixa de diálogo Configuração de site, expanda as Configurações avançadas e selecione a categoria Design Notes. 


Marque Manter Design Notes para ativar Design Notes (desmarque para desabilitá-las). 


rm 


Caso você queira excluir todos os arquivos de Design Notes do site, clique em Limpar e, depois, clique em Sim. (Se você desejar excluir os 
arquivos remotos de Design Notes, precisará excluí-los manualmente). 

Nota: O comando Limpar do Design Note exclui somente arquivos MNO (Design Notes). Ele não exclui a pasta notes ou o arquivo 
dwsync.xml dentro da pasta notes. O Dreamweaver usa o arquivo dwsync.xml para manter informações sobre a sincronização do site. 


6. Selecione Ativar carregamento de Design Notes para compartilhamento para carregar Design Notes associadas ao site com os demais 
documentos e clique em OK. 


e Caso selecione essa opção, você pode compartilhar as Design Notes com o restante da equipe. Quando você coloca ou obtém um 
arquivo, o Dreamweaver coloca ou obtém automaticamente o arquivo de Design Notes associado. 


e Caso você não selecione essa opção, o Dreamweaver mantém as Design Notes localmente, mas não as carrega com os arquivos. 
Caso você trabalhe sozinho no site, desmarcar essa opção melhor a o desempenho. As Design Notes não serão transferidas para o site 
remoto quando você devolver ou colocar os arquivos, e você pode continuar adicionando e modificando as Design Notes do site 
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localmente. 


PER 
Associar Design Notes a arquivos cics 


Você pode criar um arquivo de Design Notes para cada documento ou modelo no site. Você também pode criar Design Notes para applets, 
controles ActiveX, imagens, conteúdo Flash, objetos Shockwave e campos de imagem nos documentos. 


Nota: Caso você adicione Design Notes a um arquivo de modelo, os documentos que você cria com o modelo não herdam as Design Notes. 
1. Siga um destes procedimentos: 


e Abra o arquivo na janela Documento e selecione Arquivo > Design Notes. 


e No painel Arquivos, clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo e 
selecione Design Notes. 


Nota: Caso o arquivo resida em um site remoto, você deve primeiramente retirar ou obtê-lo e, em seguida, selecioná-lo na pasta local. 
Na aba Informações básicas, selecione um status para o documento no menu Status. 
Clique no ícone de data (acima da caixa Notas) para inserir a data local atual das notas. 


Digite os comentários na caixa Notas. 
Selecione Mostrar quando o arquivo for aberto para que o arquivo de Design Notes seja exibido sempre que o arquivo for aberio. 


o 1. IN 


Na aba Todas as informações, clique no botão de adição (+) para adicionar um novo par chave/valor; selecione um par e clique no botão 
de subtração (-) para removê-lo. 


Por exemplo, você pode nomear uma chave como Autor (na caixa Nome) e definir o valor como Heidi (na caixa Valor). 
7. Clique em OK para salvar as notas. 


O Dreamweaver salva as anotações em uma pasta chamada notes, no mesmo local do arquivo atual. O nome de arquivo é o nome de 
arquivo do documento mais a extensão .mno. Por exemplo, caso o nome de arquivo seja index.html, o arquivo de Design Notes associado 
se chama index.html.mno. 


: Ga ais 
Trabalhar com Design Notes ara o início 


Depois de associar uma Design Note a um arquivo, você pode abri-la, alterar seu status ou excluí-la. 


Abrir Design Notes associadas a um arquivo 
“ Realize um dos seguintes procedimentos para abrir as Design Notes: 


e Abra o arquivo na janela Documento e, em seguida, selecione Arquivo > Design Notes. 


e No painel Arquivos, clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo e, em 
seguida, selecione Design Notes. 


e Na coluna Notas do painel Arquivos, clique duas vezes no ícone amarelo Design Notes. 


Nota: Para mostrar os ícones amarelos Design Notes, selecione Site > Gerenciar sites > [nome do site] > Editar > Configurações 
avançadas > Colunas de visualização de arquivos. Selecione Notas no painel da lista e escolha a opção Mostrar. Quando você clica no 
botão Expandir na barra de ferramentas Arquivos para mostrar o site local e o site remoto, uma coluna Notas no site local mostra um ícone 
de nota amarelo para arquivos que tenham uma Design Note. 


Atribuir um status de Design Notes personalizado 
1. Abra Design Notes para um arquivo ou objeto (consulte o procedimento anterior). 
Clique na aba Todas as informações. 
Clique no botão de adição (+). 
No campo Nome, digite a palavra status. 


rw 


No campo Valor, digite o status. 
Caso o valor de status já exista, ele é substituído pelo novo. 


6. Clique na aba Informações básicas e observe se o novo valor de status é exibido no menu pop-up Status. 
Nota: Você só pode ter um valor personalizado no menu de status por vez. Caso você realize esse procedimento novamente, o 
Dreamweaver substitui o valor de status que você digitou inicialmente pelo novo valor de status que você digitou. 


Excluir Design Notes não associadas do site 
1. Selecione Site > Gerenciar sites. 
2. Selecione o site e clique em Editar. 
3. Na caixa de diálogo Definição de sites, selecione Design Notes na lista de categorias à esquerda. 
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4. Clique no botão Limpar. 
O Dreamweaver solicita a você verificar se ele deve excluir todas as Design Notes que não estão mais associadas a um arquivo no site. 


Caso você use o Dreamweaver para excluir um arquivo que tenha um arquivo de Design Notes associado, o Dreamweaver também exclui o 
arquivo de Design Notes. Dessa forma, normalmente só há arquivos de Design Notes órfãos caso você exclua ou renomeie um arquivo fora 
do Dreamweaver. 


Nota: Caso você desmarque a opção Manter Design Notes antes de clicar em Limpar, o Dreamweaver exclui todos os arquivos de Design 
Notes do site. 


Mais tópicos da Ajuda 
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Reversão de arquivos (usuários do Contribute) 


Reverter arquivos (usuários do Contribute) 


Para o início 


Reverter arquivos (usuários do Contribute) 
O Dreamweaver salva automaticamente várias versões de um documento quando a compatibilidade com o Adobe Contribute está ativada. 
Nota: você deve ter o Contribute instalado na mesma máquina que o Dreamweaver. 


A reversão de arquivo também deve estar ativada nas configurações administrativas do Contribute. Para obter mais informações, consulte 
Administração do Contribute. 


1. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em um arquivo do painel Arquivos. 


2. Selecione Reverter página. 
Caso haja alguma versão anterior da página a ser revertida, a caixa de diálogo Reverter é exibida. 


3. Selecione a versão da página para a qual você deseja reverter e clique em Reverter. 


A Adobe também recomenda 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Obtenção e colocação de arquivos no servidor 


Transferência de arquivo e arquivos dependentes 
Sobre as transferências de arquivo em segundo plano 
Obter arquivos de um servidor remoto 

Colocar arquivos em um servidor remoto 

Gerenciar transferências de arquivo 


ue Ri 
Transferência de arquivo e arquivos dependentes ii 


Caso você esteja trabalhando em um ambiente colaborativo, use o sistema de devolução/retirada para transferir arquivos entre sites locais e 
remotos. No entanto, caso você seja a única pessoa trabalhando no site remoto, você pode usar os comandos Obter e Colocar para transferir 
arquivos sem devolver ou retirá-los. 


Ao transferir um documento entre uma pasta local e remota usando o painel Arquivos, você tem a opção da transferência dos arquivos 
dependentes do documento. Arquivos dependentes são imagens, folhas de estilos externas e outros arquivos referenciados no documento que um 
navegador Ilê ao carregar o documento. 


Nota: Normalmente, é uma boa ideia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as versões mais recentes dos arquivos 
dependentes já estejam no disco local, não há necessidade de baixá-los novamente. Isso também acontece no carregamento e na devolução dos 
arquivos: não há necessidade caso cópias atualizadas já estejam no site remoto. 

Os itens de biblioteca são tratados como arquivos dependentes. 


Alguns servidores informam erros quando colocam itens de biblioteca. No entanto, você pode encobrir esses arquivos para impedir sua 
transferência. 


A « E P. iníci 
Sobre as transferências de arquivo em segundo plano calidad 


Você pode realizar outras atividades, não relacionadas a servidor, enquanto obtém ou coloca arquivos. A transferência de arquivo em segundo 
plano funciona com todos os protocolos de transferência para os quais o Dreamweaver dá suporte: FTP, SFTP, LAN, WebDAV, Subversion e 
RDS. 


Entre as atividades não relacionadas a servidor estão operações comuns como digitar, editar folhas de estilos externas, gerar relatórios de todo o 
site e criar novos sites. 


Entre as atividades relacionadas a servidor que o Dreamweaver não pode realizar durante transferências de arquivo estão as seguintes: 
e Colocar/obter/devolver/retirar arquivos 
e Desfazer retirada 
e Criar uma conexão de banco de dados 
e Ligar dados dinâmicos 
e Visualizar dados na Visualização dinâmica 
* Inserir um serviço da Web 
e Excluir arquivos remotos ou pastas 
e Visualizar em um navegador em um servidor de teste 
e Salvar um arquivo em um servidor remoto 
e Inserir uma imagem de um servidor remoto 
e Abrir um arquivo em um servidor remoto 
e Colocar automaticamente arquivos ao salvar 
e Arrastar arquivos para o site remoto 
* Recortar, copiar ou colar arquivos no site remoto 
* Atualizar Visualização remota 


Por padrão, a caixa de diálogo Atividade de arquivo em segundo plano é aberta durante transferências de arquivos. Você pode minimizar a caixa 
de diálogo clicando no botão Minimizar do canto superior direito. Fechar a caixa de diálogo durante transferências de arquivos resulta no 
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cancelamento da operação. 


- . Para o início 
Obter arquivos de um servidor remoto 


Use o comando Obter para copiar arquivos do site remoto para o site local. Você pode usar o painel Arquivos ou a janela Documento para obter 
arquivos. 


O Dreamweaver cria um registro da atividade de arquivo durante a transferência que você pode exibir e salvar. 


Nota: Você não pode desativar a transferência de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade de 
arquivo em segundo plano, você pode fechá-lo para melhorar o desempenho. 

O Dreamweaver também registra toda a atividade de transferência de arquivos FTP. Caso ocorra um erro quando você estiver transferindo um 
arquivo usando o FTP, o registro de FTP do site pode ajudá-lo a determinar o problema. 


Obter arquivos de um servidor remoto usando o painel Arquivos 
1. No painel Arquivos (Janela > Arquivos), selecione os arquivos desejados para download. 


Normalmente você seleciona esses arquivos na Visualização remota, mas pode selecionar os arquivos correspondentes na Visualização 
local se preferir. Caso a Visualização remota esteja ativa, o Dreamweaver copia os arquivos selecionados para o site local; caso a 
Visualização local esteja ativa, o Dreamweaver copia as versões remotas dos arquivos locais selecionados para o site local. 


Nota: Para obter apenas os arquivos cuja versão remota é mais recente do que a versão local, use o comando Sincronizar. 


2. Siga um dos seguintes procedimentos para obter o arquivo: 
e Clique no botão Obter na barra de ferramentas do painel Arquivos. 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do painel Arquivos e 
escolha Obter no menu de contexto. 


3. Clique em Sim na caixa de diálogo Arquivos dependentes para baixar arquivos dependentes; caso você já tenha cópias locais dos arquivos 
dependentes, clique em Não. O padrão é não baixar arquivos dependentes. Você pode editar essa opção em Editar > Preferências > Site. 


O Dreamweaver baixa os arquivos selecionados da seguinte forma: 


e Caso você esteja usando o sistema de devolução/retirada, a obtenção de um arquivo resulta em uma cópia local somente leitura do 
arquivo; o arquivo permanece disponível no site remoto ou no servidor de teste para que os demais membros da equipe retirem. 


e Caso você não esteja usando o sistema de devolução/retirada, a obtenção de um arquivo resultará em uma cópia com os privilégios de 
leitura e gravação. 


Nota: Caso esteja trabalhando em um ambiente colaborativo — ou seja, caso outros estejam trabalhando nos mesmos arquivos —, você 
não deve desativar Ativar devolução e retirada de arquivos. Caso outras pessoas estejam usando o sistema de devolução/retirada com 
o site, você também deve usá-lo. 


Para parar a transferência de arquivos a qualquer momento, clique no botão Cancelar da caixa de diálogo Atividade de arquivo em 
segundo plano. 


Obter arquivos de um servidor remoto usando a janela Documento 
1. Verifique se o documento está ativo na janela Documento. 
2. Siga um dos seguintes procedimentos para obter o arquivo: 


* Selecione Site > Obter. 
e Clique no ícone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione Obter no menu. 


Nota: Caso o arquivo atual não faça parte do site atual no painel Arquivos, o Dreamweaver tenta determinar a qual site definido 
localmente o arquivo atual pertence. Caso o arquivo atual pertença a apenas um site local, o Dreamweaver abre o site e, em seguida, 
realiza a operação Obter. 


Exibir o registro de FTP 
1. Clique no menu Opções no canto superior direito do painel Arquivos. 
2. Selecione Exibir > Registro de FTP do site. 


Nota: No painel Arquivos expandido, você pode clicar no botão Registro de FTP para exibir o registro. 


z . Para o início 
Colocar arquivos em um servidor remoto 


Você pode colocar arquivos do site local no site remoto, normalmente sem alterar o status de retirada do arquivo. 
Há duas situações comuns em que você pode usar o comando Colocar em lugar de Devolver: 


e Você não está em um ambiente colaborativo e não está usando o sistema de devolução/retirada. 
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e Convém colocar a versão atual do arquivo no servidor, mas você continuará o editando. 


Nota: Caso você coloque um arquivo que não existia anteriormente no site remoto e esteja usando o sistema de devolução/retirada, o 
arquivo é copiado para o site remoto e, em seguida, retirado para que você possa continuar a edição. 


Você pode usar o painel Arquivos ou a janela Documento para colocar arquivos. O Dreamweaver cria um registro da atividade de arquivo 
durante a transferência que você pode exibir e salvar. 


Nota: Você não pode desativar a transferência de arquivos em segundo plano. Caso o registro detalhado esteja aberto na janela Atividade 
de arquivo em segundo plano, você pode fechá-lo para melhorar o desempenho. 


O Dreamweaver também registra toda a atividade de transferência de arquivos FTP. Caso ocorra um erro quando você estiver transferindo 
um arquivo usando o FTP, o registro de FTP do site pode ajudá-lo a determinar o problema. 


Para assistir a um tutorial sobre a colocação de arquivos em um servidor remoto, consulte www.adobe.com/go/vid0163 br. 


Para assistir a um tutorial sobre a solução de problemas de envio, consulte www.adobe.com/go/vid0164 br. 


Colocar arquivos em um servidor remoto ou de teste usando o painel Arquivos 
1. No painel Arquivos (Janela > Arquivos), selecione os arquivos a serem carregados. 
Normalmente você seleciona esses arquivos na Visualização local, mas pode selecionar os arquivos correspondentes na Visualização 
remota se preferir. 
Nota: Você só pode colocar esses arquivos cuja versão local é mais recente do que a versão remota. 
2. Siga um dos seguintes procedimentos para colocar o arquivo no servidor remoto: 


e Clique no botão Colocar na barra de ferramentas do painel Arquivos. 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do painel Arquivos e 
escolha Colocar no menu de contexto. 


3. Caso o arquivo não tenha sido salvo, uma caixa de diálogo é exibida (caso você defina essa preferência na categoria Site da caixa de 
diálogo Preferências) permitindo a você salvar o arquivo antes de colocá-lo no servidor remoto. Clique em Sim para salvar o arquivo ou em 
Não para colocar a versão salva anteriormente no servidor remoto. 

Nota: Se você não salvar o arquivo, todas as alterações que você fez desde a última gravação serão colocadas no servidor remoto. No 
entanto, como o arquivo permanece aberto, você pode continuar salvando as alterações depois de colocar o arquivo no servidor caso 
desejado. 


4. Clique em Sim para atualizar os arquivos dependentes com os arquivos selecionados ou clique em Não para evitar o carregamento de 
arquivos dependentes. O padrão é não carregar arquivos dependentes. Você pode editar essa opção em Editar > Preferências > Site. 
Nota: Normalmente, é uma boa ideia carregar arquivos dependentes ao devolver um novo arquivo, mas caso as versões mais recentes 
dos arquivos dependentes já estejam no servidor remoto, não há necessidade de carregá-los novamente. 


Para parar a transferência de arquivos a qualquer momento, clique no botão Cancelar da caixa de diálogo Atividade de arquivo em segundo 
plano. 


Colocar arquivos em um servidor remoto usando a janela Documento 
1. Verifique se o documento está ativo na janela Documento. 
2. Siga um dos seguintes procedimentos para colocar o arquivo: 


e Selecione Site > Colocar. 
e Clique no ícone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione Colocar no menu. 


Nota: Caso o arquivo atual não faça parte do site atual no painel Arquivos, o Dreamweaver tenta determinar a qual site definido 
localmente o arquivo atual pertence. Caso o arquivo atual pertença a apenas um site local, o Dreamweaver abre o site e, em seguida, 
realiza a operação Colocar. 


Exibir o registro de FTP 
1. Clique no menu Opções no canto superior direito do painel Arquivos. 


2. Selecione Exibir > Registro de FTP do site. 


Nota: No painel Arquivos expandido, você pode clicar no botão Registro de FTP para exibir o registro. 


A i ã Para o início 
Gerenciar transferências de arquivo 


Você pode exibir o status das operações de transferência de arquivo, bem como uma lista de arquivos transferidos e seus resultados (êxito na 
transferência, ignorado ou falha). Você também pode salvar um registro da atividade do arquivo. 


Nota: O Dreamweaver permite a você realizar outras atividades não relacionadas a servidor enquanto transfere arquivos para ou de um servidor. 
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Cancelar uma transferência de arquivo 
*& Clique no botão Cancelar da caixa de diálogo Atividade de arquivo em segundo plano. Se a caixa de diálogo não estiver em exibição, clique no 
botão Atividade de arquivo na parte inferior do painel Arquivos. 


Mostrar a caixa de diálogo Atividade de arquivo em segundo plano durante transferências 
*& Clique no botão Atividade de arquivo ou Registro na parte inferior do painel Arquivos. 
Nota: Você não pode ocultar ou remover o botão Registro. Trata-se de uma parte permanente do painel. 


Exibir detalhes da última transferência de arquivo 
1. Clique no botão Registro na parte inferior do painel Arquivos para abrir a caixa de diálogo Atividade de arquivo em segundo plano. 


2. Clique na seta de expansão Detalhes. 


Salvar um registro da última transferência de arquivo 
1. Clique no botão Registro na parte inferior do painel Arquivos para abrir a caixa de diálogo Atividade de arquivo em segundo plano. 


2. Clique no botão Salvar registro e salve as informações como um arquivo de texto. 
Você pode examinar a atividade de arquivo abrindo o arquivo de log no Dreamweaver ou em qualquer editor de textos. 


Mais tópicos da Ajuda 
Tutorial sobre a colocação de arquivos 


Tutorial sobre a solução de problemas de publicação 


(69) ex-ne-sa ] 


Avisos legais | Política de privacidade on-line 
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Gerenciamento de arquivos e pastas 


Sobre o gerenciamento de arquivos e pastas 

Uso do painel Arquivos 

Exibir arquivos e pastas 

Trabalhar com arquivos no painel Arquivos 

Localizar arquivos no site do Dreamweaver 

Identificar e excluir arquivos não utilizados 

Acessar sites, um servidor e unidades locais 

Personalizar os detalhes de arquivo e pasta exibidos no painel Arquivos expandido 


. E Para o início 
Sobre o gerenciamento de arquivos e pastas 


O Dreamweaver inclui um painel Arquivos que ajuda a gerenciar e transferir arquivos para e de um servidor remoto. Quando você transfere 
arquivos entre sites locais e remotos, as estruturas de arquivo e pasta em paralelo entre os sites são mantidas. Durante a transferência de 
arquivos entre sites, o Dreamweaver cria pastas correspondentes caso elas ainda não existam em um site. Você também pode sincronizar os 
arquivos entre os sites local e remoto; o Dreamweaver copia arquivos em ambas as direções conforme o necessário e remove arquivos 
indesejados quando apropriado. 


; E A 
Uso do painel Arquivos ara o início 


O painel Arquivos permite exibir arquivos e pastas, independentemente de estarem associados ou não a um site do Dreamweaver e realizar 
operações de manutenção de arquivo padrão como, por exemplo, abrir e mover arquivos. 


Nota: Nas versões anteriores do Dreamweaver, o painel Arquivos era chamado de painel Site. 
Você pode mover o painel Arquivos conforme o necessário e definir suas preferências. 


Use esse painel para realizar as seguintes tarefas: 
e Acessar sites, um servidor e unidades locais 
e Exibir arquivos e pastas 
e Gerenciar arquivos e pastas no painel Arquivos 


Em sites do Dreamweaver, use as seguintes opções para exibir ou transferir arquivos: 
dao 
F M 


G HI SJ KL 


| E 
A B CÕD E 
Opções do painel Arquivos expandido. 

A. Menu pop-up de site B. Conectar/desconectar C. Atualizar D. Exibir registro de FTP do site E. Visualização Arquivos do site F. Servidor 
de teste G. Visualização Repositório H. Obter arquivos 1. Colocar arquivos J. Retirar arquivos K. Devolver 

arquivos L. Sincronizar M. Expandir/reduzir 


Mostrar: |(5) Cafe Townsend + é (6) E 


Nota: As visualizações Arquivos do site, Servidor de teste e os botões Sincronizar são exibidos somente no painel Arquivos expandido. 

O menu pop-up Site Permite a você selecionar um site do Dreamweaver e exibir os arquivos deste site. Você também pode usar o menu Site 
para acessar todos os arquivos no disco local, assim como o Windows Explorer (Windows) ou o Finder (Macintosh). 

Conectarldesconectar (protocolo FTP, RDS eWebDav) Conecta-se ou desconecta-se do site remoto. Por padrão, o Dreamweaver se 
desconecta do site remoto caso ele permaneça inativo por mais de 30 minutos (somente FTP). Para alterar o tempo-limite, selecione Editar > 
Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e, depois, selecione Site na lista de categorias à esquerda. 

Atualizar Atualiza as listas de diretórios locais e remotos. Use o botão para atualizar manualmente as listas de diretórios caso você tenha 
desmarcado Atualizar automaticamente a lista de arquivos locais ou Atualizar automaticamente a lista de arquivos remotos na caixa de diálogo 
Definição do site. 

Visualização Arquivos do site Exibe a estrutura de arquivo dos sites remoto e local nos painéis do painel Arquivos. (Uma configuração de 
preferência determina o site exibido no painel à esquerda e qual site é exibido no painel à direita). Arquivos do site é a visualização padrão do 
painel Arquivos. 

Visualização servidor de teste Exibe a estrutura de diretório do servidor de teste e o site local. 

Visualização Repositório Exibe o repositório SVN (Subversion). 

Obter arquivos Copia os arquivos selecionados do site remoto para o site local (substituindo a cópia local existente do arquivo, caso haja 
alguma). Caso Ativar devolução e retirada de arquivos esteja ativado, as cópias locais são somente leitura; os arquivos permanecem disponíveis 
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no site remoto para a retirada por parte de outros membros da equipe. Se Ativar devolução e retirada de arquivos estiver desativado, as cópias 
dos arquivos terão privilégios de leitura e gravação. 

Nota: Os arquivos que o Dreamweaver copia são os arquivos que você seleciona no painel ativo do painel Arquivos. Caso o painel Remoto 
esteja ativo, os arquivos do servidor de teste ou remotos selecionados são copiados para o site local; caso o painel Local esteja ativo, O 
Dreamweaver copia a versão de teste ou remota dos arquivos locais selecionados para o site local. 

Colocar arquivos Copia os arquivos selecionados do site local para o site remoto. 

Nota: Os arquivos que o Dreamweaver copia são os arquivos que você seleciona no painel ativo do painel Arquivos. Caso o painel Local esteja 
ativo, Os arquivos locais selecionados são copiados para o site remoto ou para o servidor de teste; caso o painel Remoto esteja ativo, o 
Dreamweaver copia as versões locais dos arquivos de servidor remoto selecionados para o site remoto. 

Caso você esteja colocando um arquivo que ainda não existe no site remoto e Ativar devolução e retirada de arquivos esteja selecionado, o 
arquivo é adicionado ao site remoto como “retirado”. Clique no botão devolver arquivos caso você queira adicionar um arquivo sem o status 
retirado. 


Retirar arquivos Transfere uma cópia do arquivo do servidor remoto para o site local (substituindo a cópia local existente do arquivo, caso haja 
alguma) e marca o arquivo como retirado do servidor. Essa opção não está disponível caso Ativar devolução e retirada de arquivos na caixa de 
diálogo Definições de sites esteja desativado para o site atual. 

Devolver arquivos Transfere uma cópia do arquivo local para o servidor remoto e disponibiliza o arquivo para edição. O arquivo local se torna 
somente leitura. Essa opção não está disponível caso a opção Ativar devolução e retirada de arquivos na caixa de diálogo Definições de sites 
esteja desativada para o site atual. 

Sincronizar Sincroniza os arquivos entre as pastas local e remota. 

O botão Expandirlreduzir Expande ou reduz o painel Arquivos para exibir um ou mais painéis. 


aid ' Para o início 
Exibir arquivos e pastas 
Você pode exibir arquivos e pastas no painel Arquivos, independentemente de estarem associados ou não a um site do Dreamweaver. Ao exibir 
sites, arquivos ou pastas no painel Arquivos, você pode alterar o tamanho da área de exibição e, para os sites do Dreamweaver, você pode 
expandir ou reduzir o painel Arquivos. 


Nos sites do Dreamweaver, você também pode personalizar o painel Arquivos alterando a visualização — do site local ou remoto — exibida por 
padrão no painel reduzido. Ou você pode alternar as visualizações de conteúdo no painel Arquivos expandido usando a opção Mostrar sempre. 


Abrir ou fechar o painel Arquivos 
* Selecione Janela > Arquivos. 


Pesquisar arquivos no painel de arquivos (somente para usuários do Mac OS e da Creative Cloud) 

Use a Pesquisa dinâmica para localizar arquivos com base nos nomes ou no texto presente nos arquivos. O site selecionado no painel Arquivos é 
usado para pesquisa. Se não houver nenhum site selecionado no painel, a opção de pesquisa não aparecerá. Para obter mais informações, 
consulte Pesquisar arquivos com base no nome do arquivo ou no conteúdo. 


Expandir ou reduzir o painel Arquivos (apenas sites do Dreamweaver) 

*&* No painel Arquivos (Janela > Arquivos), clique no botão Expandir/reduzir [7] da barra de ferramentas. 

Nota: Caso você clique no botão Expandir/reduzir para expandir o painel enquanto ele está encaixado, o painel é maximizado de forma que você 
não consiga trabalhar na janela Documento. Para retornar à janela Documento, clique no botão Expandir/reduzir novamente para reduzir o painel. 
Caso clique no botão Expandir/reduzir para expandir o painel enquanto ele não está encaixado, você ainda pode trabalhar na janela Documento. 
Para encaixar O painel novamente, você deve inicialmente reduzi-lo. 

Quando o painel Arquivos é reduzido, ele exibe o conteúdo do site local, do site remoto ou o servidor de teste como uma lista de arquivos. 
Quando expandido, ele exibe o site local e o site remoto ou o servidor de teste. 


Alterar o tamanho da área de visualização no painel Arquivos expandido 
*& No painel Arquivos (Janela > Arquivos), com o painel expandido, siga um destes procedimentos: 


e Arraste a barra que separa as duas visualizações para aumentar ou diminuir a área de visualização do painel à direita ou à esquerda. 


e Use as barras de rolagem na parte inferior do painel Arquivos para percorrer o conteúdo das visualizações. 


Alterar a visualização do site no painel Arquivos (apenas sites do Dreamweaver) 
*& Siga um destes procedimentos: 


e No painel Arquivos reduzido (Janela > Arquivos), selecione Visualização local, Visualização remota, Servidor de teste ou Visualização 
Repositório no menu pop-up Exibição do site. 


Nota: Por padrão, Visualização local é exibido no menu Exibição do site. 
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ARQUIVOS 
rem 
[= Cafe Townsend » | 


(E) e | dz 4 a visualização local 


Visualização remc 
Servidor de teste! 


E (E) Site - Cafe Townser Visualização do ré 


e No painel Arquivos expandido (Janela > Arquivos), clique no botão Arquivos do site (para o site remoto), Servidor de teste ou Arquivos do 
repositório. 
A B c€ 


A. Arquivos do site B. Servidor de teste C. Arquivos do repositório 


Nota: Antes de exibir um site remoto, servidor de teste ou repositório, você deve configurar um site remoto, servidor de teste ou repositório 
SVN. 


Exibir arquivos fora de um site do Dreamweaver 
*& Navegue no computador usando o menu pop-up Site da mesma forma como você faria se estivesse usando o Windows Explorer (Windows) ou 
o Finder (Macintosh). 


Ra 
Trabalhar com arquivos no painel Arquivos Poue R 


Você pode abrir ou renomear arquivos; adicione, mova ou exclua arquivos; ou atualize o painel Arquivos depois de fazer as alterações. 


Nos sites do Dreamweaver, você também determina quais arquivos (no site local ou remoto) foram atualizados desde a última vez em que foram 
transferidos. 


Abrir um arquivo 
1. No painel Arquivos (Janela > Arquivos), selecione site, servidor ou unidade no menu pop-up (em que o site, o servidor ou a unidade é 
exibida). 
2. Navegue até o arquivo que você deseja abrir. 


3. Siga um destes procedimentos: 
e Clique duas vezes no ícone do arquivo. 
e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no ícone do arquivo e selecione Abrir. 


O Dreamweaver abre o arquivo na janela Documento. 


Criar um arquivo ou uma pasta 
1. No painel Arquivos (Janela > Arquivos), selecione um arquivo ou uma pasta. 


O Dreamweaver criará o novo arquivo ou pasta dentro da pasta selecionada atualmente ou na mesma pasta do arquivo selecionado no 
momento. 


2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, selecione Novo arquivo ou 
Nova pasta. 

3. Digite um nome para o novo arquivo ou pasta. 

4. Pressione Enter (Windows) ou Return (Macintosh). 


Excluir um arquivo ou uma pasta 
1. No painel Arquivos (Janela > Arquivos), selecione o arquivo ou a pasta que você deseja excluir. 


2. Clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) e, em seguida, 
selecione Editar > Excluir. 


Renomear um arquivo ou uma pasta 
1. No painel Arquivos (Janela > Arquivos), selecione o arquivo ou a pasta que você deseja renomear. 


2. Siga um dos seguintes procedimentos para ativar o nome do arquivo ou da pasta: 
e Clique no nome de arquivo, pause e, depois, clique nele novamente. 


e Clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla (Macintosh) no ícone do arquivo e selecione Editar > 
Renomear. 
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3. Digite o novo nome sobre o nome existente. 
4. Pressione Enter (Windows) ou Return (Macintosh). 


Mover um arquivo ou uma pasta 
1. No painel Arquivos (Janela > Arquivos), selecione o arquivo ou a pasta que você deseja mover. 
2. Siga um destes procedimentos: 


e Copie o arquivo ou a pasta e, em seguida, cole-o em um novo local. 
e Arraste o arquivo ou a pasta para um novo local. 


3. Atualize o painel Arquivos para ver o arquivo ou a pasta no novo local. 


Atualizar o painel Arquivos 
“& Siga um destes procedimentos: 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer arquivo ou pasta e, em 
seguida, selecione Atualizar. 


e (Apenas sites do Dreamweaver) Clique no botão Atualizar da barra de ferramentas no painel Arquivos (essa opção atualiza ambos os 
painéis). 


Nota: O Dreamweaver atualiza o painel Arquivos quando você faz alterações em outro aplicativo e, em seguida, retorna ao Dreamweaver. 


E a Para o início 
Localizar arquivos no site do Dreamweaver 


O Dreamweaver simplifica a localização de arquivos selecionados, abertos, retirados ou modificados recentemente no site. Você também pode 
localizar arquivos mais novos no site local ou remoto. 


Localizar um arquivo aberto no site 
1. Abra o arquivo na janela Documento. 
2. Selecione Site > Localizar no site. 


O Dreamweaver seleciona o arquivo no painel Arquivos. 


Nota: Caso o arquivo aberto na janela Documento não faça parte do site atual no painel Arquivos, oDreamweaver tenta determinar a qual 
dos sites do Dreamweaver o arquivo pertence; caso o arquivo atual pertença a apenas um site local, oDreamweaver abre esse arquivo no 
painel Arquivos e, em seguida, o realça. 


Localizar e selecionar arquivos retirados em um site do Dreamweaver 
*& No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opções no canto superior direito do painel Arquivos e, em seguida, selecione 
Editar > Selecionar arquivos retirados. 


Ea 


O Dreamweaver seleciona os arquivos no painel Arquivos. 


Localizar um arquivo selecionado no site local ou remoto 
1. Selecione o arquivo na Visualização local ou remota do painel Arquivos (Janela > Arquivos). 


2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, selecione Localizar no site 
local ou Localizar no site local (dependendo de onde você selecionou o arquivo). 


O Dreamweaver seleciona o arquivo no painel Arquivos. 


Localizar e selecionar arquivos que sejam mais novos no site local do que no site remoto 
*& No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opções no canto superior direito do painel Arquivos e, em seguida, selecione 
Editar > Selecionar um local mais novo. 


O Dreamweaver seleciona os arquivos no painel Arquivos. 


Localizar e selecionar arquivos que sejam mais novos no site remoto do que no site local 
*& No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opções no canto superior direito do painel Arquivos e, em seguida, selecione 
Editar > Selecionar um remoto mais novo. 


O Dreamweaver seleciona os arquivos no painel Arquivos. 


Localizar arquivos recentemente modificados no site 
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1. No painel Arquivos reduzido (Janela > Arquivos), clique no menu Opções no canto superior direito do painel Arquivos e, em seguida, 
selecione Editar > Selecionar modificados recentemente. 


2. Siga um dos seguintes procedimentos para indicar datas de pesquisa para o relatório: 


e Para gerar relatório sobre todos os arquivos modificados nos últimos dias, selecione Arquivos criados ou modificados por último e digite 
o número na caixa. 


e Para gerar relatório sobre todos os arquivos modificados dentro de um tempo específico, clique no botão Arquivos criados ou 
modificados entre e, em seguida, especifique um intervalo de datas. 


3. (Opcional) Digite um nome de usuário na caixa Modificado por para limitar a pesquisa a arquivos modificados por um usuário específico 
entre as datas que você indicou. 
Nota: Essa opção só está disponível para relatórios sobre sites do Contribute. 


4. Selecione um botão de opção para indicar onde você deseja exibir arquivos listados no relatório, se necessário: 
Máquina local caso o site contenha páginas estáticas. 


Servidor de teste caso o site contenha páginas dinâmicas. 

Nota: Essa opção pressupõe que você tenha definido um Servidor de teste na caixa de diálogo Definição de sites (XREF). Caso você não 
tenha definido um Servidor de teste e digitado um prefixo de URL para o servidor ou caso você esteja executando o relatório para mais de 
um site, a opção não está disponível. 


Outro local caso você queira digitar um caminho na caixa de texto. 
5. Clique em OK para salvar as configurações. 


O Dreamweaver seleciona os arquivos modificados dentro do tempo selecionado no painel Arquivos. 


ea E ” a a E P, iníci 
Identificar e excluir arquivos não utilizados ich 


Você pode identificar e excluir arquivos que não sejam mais usados por outros arquivos do seu site. 
1. Selecione Site > Verificar os links no site inteiro. 
O Dreamweaver verifica todos os links do site e exibe os desfeitos no painel Resultados. 
2. Selecione Arquivos órfãos no menu do painel Verificador de links. 
O Dreamweaver exibe todos os arquivos sem links externos. Isso significa que nenhum arquivo do site tem link com esses arquivos. 


3. Selecione os arquivos deseja excluir e pressione Excluir. 
Importante: Embora nenhum outro arquivo do site tenha link com esses arquivos, alguns dos arquivos listados podem ter links com outros 
arquivos. Tome cuidado ao excluir os arquivos. 


e 5 E E P iníci 
Acessar sites, um servidor e unidades locais REA 


Você pode acessar, modificar e salvar arquivos e pastas dos sites do Dreamweaver, bem como arquivos e pastas que não fazem parte de um site 
do Dreamweaver. Além dos sites do Dreamweaver, você pode acessar um servidor, uma unidade local ou a área de trabalho. 


Para acessar um servidor remoto, você deve configurar o Dreamweaver para trabalhar com esse servidor. 


Nota: A melhor forma de gerenciar os arquivos é criando um site do Dreamweaver. 


Abrir um site do Dreamweaver já existente 
*&* No painel Arquivos (Janela > Arquivos), selecione um site no menu (em que o site atual, o servidor ou a unidade é exibida). 
ARQUIVOS 


(meuste 07) [ousização! » 
HE Área de trabalho ” & | Fr 
& Local Disk (C:) 
fr, Local Disk (D:) 
“5 CD Drive (E:) 
Ftp:litest 


(E webapp 


ais Gerenciar sites... 


Abrir uma pasta em um servidor FTP ou RDS remoto 
1. No painel Arquivos (Janela > Arquivos), selecione um nome de servidor no menu (em que o site atual, o servidor ou a unidade é exibida). 
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ARQUIVOS 


HE Área de trabalho 
& Local Disk (C:) 
ta Local Disk (D:) 


É CD Drive (E:) 


(E Meusite 
(E webapp 


ama Gerenciar sites... 


Nota: Os nomes são exibidos para servidores para os quais você configurou o Dreamweaver. 
2. Navegue até e edite os arquivos como você faria normalmente. 


Acessar uma unidade local ou a área de trabalho 


1. No painel Arquivos (Janela > Arquivos), selecione Área de trabalho, Disco local ou Unidade de CD no menu (em que o site atual, o servidor 
ou a unidade é exibida). 


2. Navegue até um arquivo e, em seguida, siga um dos seguintes procedimentos: 
e Abrir arquivos no Dreamweaver ou outro aplicativo 
* Renomear arquivos 
* Copiar arquivos 
e Excluir arquivos 
e Arrastar arquivos 


Quando você arrasta um arquivo de um site do Dreamweaver para outro ou para uma pasta que não faça parte de um site do 
Dreamweaver, o Dreamweaver copia o arquivo para o local onde você o soltou. Caso você arraste um arquivo dentro do mesmo site do 
Dreamweaver, o Dreamweavermove o arquivo para o local onde você o soltou. Caso você arraste um arquivo que não faça parte de um 
site do Dreamweaver para uma pasta que não faça parte de um site do Dreamweaver, o Dreamweaver move o arquivo para o local 
onde você o soltou. 


Nota: Para mover um arquivo que o Dreamweaver copia por padrão, mantenha a tecla Shift (Windows) ou a tecla Command 
(Macintosh) pressionada enquanto você arrasta. Para copiar um arquivo que o Dreamweaver move por padrão, mantenha a tecla 
Control (Windows) ou a tecla Option (Macintosh) pressionada enquanto você arrasta. 


Para o início 


Personalizar os detalhes de arquivo e pasta exibidos no painel Arquivos expandido 


Quando você exibe um site do Dreamweaver no painel Arquivos expandido, as informações sobre arquivos e pastas são exibidas em colunas. 
Por exemplo, você pode ver o tipo de arquivo ou a data em que ele foi modificado. 


Você pode personalizar as colunas seguindo um dos seguintes procedimentos (algumas operações só estão disponíveis para colunas que você 
adiciona, e não para colunas padrão): 


* Reorganizar ou realinhar colunas 

e Adicionar novas colunas (máximo de 10 colunas) 

e Ocultar colunas (exceto a coluna do nome de arquivo) 

* Designar colunas para serem compartilhadas com todos os usuários conectados a um site 
e Excluir colunas (apenas colunas personalizadas) 

e Renomear colunas (apenas colunas personalizadas) 


e Associar colunas a uma Design Note (apenas colunas personalizadas) 


Alterar a ordem das colunas 

*& Selecione um nome de coluna e, em seguida, clique no botão de seta para cima ou para baixo a fim de alterar a posição da coluna 
selecionada. 

Nota: Você pode alterar a ordem de qualquer coluna exceto Nome, que é sempre a primeira coluna. 


Adicionar, excluir ou alterar coluna de detalhes 
1. Selecione Site > Gerenciar sites. 


2. Selecione um site e, em seguida, clique em Editar. 
3. Expanda Configurações avançadas e selecione a categoria Colunas de visualização de arquivo. 
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4. Selecione uma coluna e clique no botão de adição (+) para adicionar uma coluna ou de subtração (-) para excluir uma coluna. 
Nota: Como a coluna é excluída imediatamente e sem confirmação, tenha certeza de que você deseja excluir a coluna antes de clicar no 
botão de subtração (-). 


5. Na caixa Nome da coluna, digite um nome para a coluna. 


6. Selecione um valor no menu Associar a Design Notes ou digite seu próprio. 
Nota: Você deve associar uma nova coluna a uma Design Note para que haja dados a serem exibidos no painel Arquivos. 


7. Selecione um alinhamento para determinar como o texto se alinha dentro da coluna. 
8. Marque ou desmarque Mostrar para revelar ou ocultar a coluna. 
9. Selecione Compartilhar com todos os usuários deste site para compartilhar a coluna com todos os usuários conectados ao site remoto. 


Classificar por qualquer coluna detalhada no painel Arquivos 
*& Clique no cabeçalho da coluna que você deseja classificar. 
Clique no cabeçalho novamente para inverter a ordem (crescente ou decrescente) com a qual o Dreamweaver classifica a coluna. 


Mais tópicos da Ajuda 
[imprimir]Visão geral do painel Arquivos 


(63) ee-nc-sa ) 


Avisos legais | Política de privacidade on-line 
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Devolução e retirada de arquivos 


Sobre o sistema de devolução!retirada 

Configurar o sistema de devolução!retirada 

Devolver e retirar arquivos em uma pasta remota 

Usar WebDAV para devolver e retirar arquivos 

Usar o SVN (Subversion) para obter e devolver arquivos 


« as x P, iníci 
Sobre o sistema de devolução!retirada Re 


Caso esteja trabalhando em um ambiente colaborativo, você pode devolver e retirar arquivos em servidores locais e remotos. Caso seja a única 
pessoa trabalhando no site remoto, você pode usar os comandos Colocar e Obter sem devolver ou retirá-los. 


Nota: Você pode usar a funcionalidade Obter e Colocar com um servidor de teste, embora não possa usar o sistema de devolução/retirada sem 
um servidor de teste. 


A retirada de um arquivo é o equivalente a declarar “Estou trabalhando neste arquivo agora — não toque nele!” Quando um arquivo é retirado, o 
nome da pessoa que o retirou é exibido no painel Arquivos com uma marca de seleção em vermelho (caso um membro da equipe tenha retirado 
o arquivo) ou em verde (caso você tenha retirado o arquivo) próximo ao ícone do arquivo. 


A devolução disponibiliza o arquivo para outros membros da equipe retirar e editar. Quando você devolve um arquivo após a edição, a versão 
local se torna somente leitura e um símbolo de bloqueio é exibido ao lado da arquivo no painel Arquivos para impedir que você faça alterações no 
arquivo. 


O Dreamweaver não torna arquivos retirados somente leitura no servidor remoto. Caso transfira arquivos com um aplicativo que não seja o 
Dreamweaver, você pode substituir arquivos retirados. No entanto, em aplicativos que não sejam o Dreamweaver, o arquivo LCK permanece 
visível próximo ao arquivo retirado na hierarquia para ajudar a evitar esses acidentes. 


E z a = P. iníci 
Configurar o sistema de devolução!retirada REA 


Para usar o sistema de devolução/retirada, você deve associar o site local a um servidor remoto. 


1. Selecione Site > Gerenciar sites. 
2. Selecione um site e clique em Editar. 


3. Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 
e Para adicionar um servidor, clique no botão Adicionar novo servidor 
e Selecione um servidor existente e clique no botão Editar servidor existente 


Especifique as Opções básicas conforme necessário e clique no botão Avançado. 
5. Selecione Ativar retirada de arquivos caso você esteja trabalhando em um ambiente em equipe (ou trabalhando sozinho, mas em várias 
máquinas diferentes). Desmarque a opção caso você queira desativar a devolução e a retirada de arquivo no site. 


Essa opção é útil para permitir aos demais saber que você retirou um arquivo para edição ou alertá-lo de que você talvez tenha deixado 
uma versão mais recente do arquivo em outra máquina. 


Caso você não veja as opções de devolução/retirada, isso significa que você não configurou um servidor remoto. 


6. Selecione a opção Retirar os arquivos na abertura caso você queira retirar automaticamente os arquivos quando clicar duas vezes para 
abri-los no painel Arquivos. 


O uso de Arquivo > Abrir para abrir um arquivo não o retira mesmo quando a opção está selecionada. 


7. Defina as opções restantes: 
Nome de retirada O nome da retirada é exibido no painel Arquivos com todos os arquivos retirados; isso permite aos membros da equipe 
se comunicar com a pessoa certa caso um arquivo de que eles precisam seja retirado. 
Nota: Caso você trabalhe sozinho em várias máquinas diferentes, use um nome de retirada diferente em cada uma delas (por exemplo, 
AmyR-HomeMac e AmyR-OfficePC) para que você saiba onde a versão mais recente do arquivo está caso se esqueça de devolvê-la. 


Endereço de email Caso você digite um endereço de email, quando retira um arquivo, o nome é exibido no painel Arquivos como um link 
(em azul e sublinhado) próximo ao arquivo. Caso um membro da equipe clique no link, o programa de email padrão abre uma nova 
mensagem com o endereço de email do usuário e um assunto correspondente ao arquivo e ao nome do site. 


Para o início 
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Devolver e retirar arquivos em uma pasta remota 


Depois de configurar o sistema de devolução/retirada, você pode devolver e retirar arquivos em um servidor remoto usando o painel Arquivos ou 


na janela Documento. 


Retirar arquivos usando o painel Arquivos 
1. No painel Arquivos (Janela > Arquivos), selecione os arquivos a serem retirados do servidor remoto. 
Nota: Você pode selecionar arquivos na Visualização local ou remota, mas não na Visualização servidor de teste. 


Uma marca de seleção vermelha indica que outro membro da equipe retirou o arquivo e um símbolo de bloqueio indica que o arquivo é 
somente leitura (Windows) ou que está bloqueado (Macintosh). 


2. Siga um dos seguintes procedimentos para retirar o(s) arquivo(s): 
e Clique no botão Retirar na barra de ferramentas do painel Arquivos. 


e Clique com o botão direito do mouse (Windows) ou clique mantendo a tecla Control pressionada (Macintosh), e selecione Retirar no 
menu de contexto. 


3. Na caixa de diálogo Arquivos dependentes, clique em Sim para baixar arquivos dependentes com os arquivos selecionados ou em não para 


evitar o download desses arquivos. O padrão é não baixar arquivos dependentes. Você pode editar essa opção em Editar > Preferências > 
Site. 

Nota: Normalmente, é uma boa ideia baixar arquivos dependentes ao retirar um novo arquivo, mas caso as versões mais recentes dos 
arquivos dependentes já estejam no disco local, não há necessidade de baixá-los novamente. 


Uma marca de seleção verde é exibida ao lado do ícone de arquivo local indicando sua retirada. 


Importante: Caso você tenha retirado o arquivo ativo no momento, a versão aberta atual do arquivo é substituída pela nova versão 
retirada. 


Devolver arquivos usando o painel Arquivos 


1. No painel Arquivos (Janela > Arquivos), selecione arquivo(s) retirado(s) ou novo(s). 
Nota: Você pode selecionar arquivos na Visualização local ou remota, mas não na Visualização servidor de teste. 


2. Siga um dos seguintes procedimentos para devolver o(s) arquivo(s): 
e Clique no botão Devolver na barra de ferramentas do painel Arquivos. 


e Clique com o botão direito do mouse (Windows) ou clique mantendo a tecla Control pressionada (Macintosh), e selecione Devolver no 
menu de contexto. 


3. Clique em Sim para atualizar os arquivos dependentes com os arquivos selecionados ou clique em Não para evitar o carregamento de 
arquivos dependentes. O padrão é não carregar arquivos dependentes. Você pode editar essa opção em Editar > Preferências > Site. 
Nota: Normalmente, é uma boa ideia carregar arquivos dependentes ao devolver um novo arquivo, mas caso as versões mais recentes 
dos arquivos dependentes já estejam no servidor remoto, não há necessidade de carregá-los novamente. 


Um símbolo de bloqueio é exibido ao lado do ícone de arquivo local indicando que o arquivo agora é somente leitura. 


Importante: Caso você devolva o site ativo atualmente, o arquivo pode ser salvo automaticamente antes de ser devolvido, dependendo 
das opções de preferência que você definiu. 


Devolver um arquivo aberto na janela Documento 
1. Verifique se o arquivo que você deseja devolver está aberto na janela Documento. 
Nota: Você pode devolver apenas um arquivo por vez. 


2. Siga um destes procedimentos: 


e Selecione Site > Devolver. 


e Clique no ícone Gerenciamento de arquivos na barra de ferramentas da janela Documento e, em seguida, selecione Devolver no menu. 


Caso o arquivo atual não faça parte do site ativo no painel Arquivos, o Dreamweaver tenta determinar a qual site definido localmente o 
arquivo atual pertence. Caso o arquivo atual pertença a um site que não seja o ativo no painel Arquivos, o Dreamweaver abre o site e, 
em seguida, realiza a operação de devolução. 


Importante: Caso você devolva o site ativo atualmente, o arquivo pode ser salvo automaticamente antes de ser devolvido, 
dependendo das opções de preferência que você definiu. 


Desfazer uma retirada de arquivo 
Caso retire um arquivo e, depois, opte por não editá-lo (ou por descartar as alterações feitas), você pode desfazer a operação de retirada, e o 
arquivo retorna ao estado original. 


Para desfazer a retirada de um arquivo, siga um destes procedimentos: 


e Abra o arquivo na janela Documento e, em seguida, selecione Site > Desfazer retirada. 
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e No painel Arquivos (Janela > Arquivos), clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, 
em seguida, selecione Desfazer retirada. 


A cópia local do arquivo se torna somente leitura, e todas as alterações que você fez nele são perdidas. 


E « P, iníci 
Usar WebDAV para devolver e retirar arquivos rd 


O Dreamweaver pode se conectar a um servidor que usa WebDAV (Web-based Distributed Authoring and Versioning), um conjunto de extensões 
para o protocolo HTTP que permite aos usuários editar e gerenciar arquivos de maneira colaborativa em servidores da Web remotos. Para obter 
mais informações, consulte www.webdav.org. 


1. Caso você ainda não tenha feito isso, defina um site do Dreamweaver que especifica a pasta local usada para armazenar e proteger 
arquivos. 

2. Selecione Site > Gerenciar sites e, em seguida, clique duas vezes no seu site na lista. 

3. Na caixa de diálogo Configuração de site, selecione a categoria Servidores e execute um dos seguintes procedimentos: 


e Para adicionar um servidor, clique no botão Adicionar novo servidor 
e Selecione um servidor existente e clique no botão Editar servidor existente 


4. Natela Básico, no menu pop-up Uso da conexão, selecione WebDav e complete o restante das opções da tela, conforme necessário. 
5. Clique no botão Avançado. 
6. Selecione a opção Ativar retirada de arquivos e insira as seguintes informações: 


e Na caixa Nome de retirada, digite um nome que o identifique aos demais membros da equipe. 
e Na caixa Endereço de email, digite o seu endereço. 


O nome e os endereços de email são usados para identificar a propriedade no servidor WebDAV, sendo exibidos no painel Arquivos 
para fins de contato. 


7. Clique em Salvar. 


O Dreamweaver configura o site para acesso WebDAV. Quando você usa o comando Devolver ou Retirar em qualquer arquivo do site, o 
arquivo é transferido usando o WebDAV. 


Nota: O WebDAV talvez não consiga retirar corretamente nenhum arquivo com conteúdo dinâmico como tags PHP ou SSIs porque o 
HTTP GET os processa como retirados. 


Usar o SVN (Subversion) para obter e devolver arquivos Ni, 


O Dreamweaver pode se conectar a um servidor que use o SVN (Subversion), um sistema de controle de versão que permite que usuários 
editem e gerenciem de maneira colaborativa os arquivos em servidores remotos da Web. O Dreamweaver não é um cliente SVN completo, 
porém, ele permite que o usuário obtenha as versões mais recentes de arquivos, faça alterações e confirme arquivos. 


Importante: O Dreamweaver CS5 usa a biblioteca de cliente Subversão 1.6.6 e o Dreamweaver CS5.5 usa a biblioteca de cliente 1.6.9. As 
versões posteriores da biblioteca cliente Subversion não são compatíveis com versões anteriores. Lembre-se de que, se você atualizar um 
aplicativo cliente de terceiros (por exemplo, o TortoiseSVN) para funcionar com uma versão posterior do Subversion, o aplicativo Subversion 
atualizado atualizará os metadados locais do Subversion, e o Dreamweaver não poderá mais comunicar-se com o Subversion. Essa questão não 
é afetada pelas atualizações do servidor Subversion, pois essas atualizações são compatíveis com versões anteriores. Se fizer a atualização para 
o aplicativo cliente de terceiros que funciona com o Subversion 1.7 ou posterior, você terá que consultar a Adobe se há atualizações antes de 
usar novamente o Subversion com o Dreamweaver. Para obter mais informações sobre essa questão, consulte www.adobe.com/go/dw svn br. 
A Adobe recomenda que você use uma outra ferramenta de comparação de arquivos quando estiver trabalhando com arquivos controlados por 
versão SVN. Ao comparar arquivos para obter as diferenças, você pode saber exatamente que tipo de alterações outros usuários fizeram nos 
arquivos. Para obter mais informações sobre ferramentas de comparação, use um mecanismo de busca na Web como o Google para procurar 
“comparação de arquivos” ou ferramentas para “diferenciar”. O Dreamweaver trabalha com a maioria das ferramentas de outros fabricantes. 


Para obter uma visão em geral em vídeo sobre como trabalhar com SVN e Dreamweaver, consulte www.adobe.com/go/lrvid4049 dw br. 


Configurar uma conexão do SVN 
Antes de usar o SVN (Subversion) como um sistema de controle de versão com o Dreamweaver, você precisa configurar uma conexão com um 
servidor SVN. Você pode configurar uma conexão com um servidor SVN na categoria Controle de versão da caixa de diálogo Definição de sites. 


O servidor SVN é um repositório de arquivos onde você e outros usuários podem obter e confirmar arquivos. É diferente do servidor remoto 
geralmente usado com o Dreamweaver. Quando o SVN é utilizado, o servidor remoto continua sendo o servidor "ao vivo" para suas páginas da 
Web, e o servidor SVN existe para conter o repositório de arquivos sobre o qual você deseja manter controle de versão. O fluxo de trabalho típico 
consiste em obter e confirmar arquivos no servidor SVN, e depois publicá-los em seu servidor remoto a partir do Dreamweaver. As configurações 
do servidor remoto e do SVN são totalmente separadas. 


Você precisa ter acesso a um servidor SVN e a um repositório SVN para dar início a essa configuração. Para obter mais informações sobre o 
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SVN, consulte o site do Subversion, em htip://subversion.apache.org/. 
Para configurar a conexão do SVN, siga estas etapas: 


1. Escolha Sites > Gerenciar sites, selecione o site para o qual deseja configurar o controle de versão e clique no botão Editar. 
Nota: Se ainda não tiver configurado as pastas locais e remotas para um site do Dreamweaver, você precisará configurar pelo menos um 
site local antes de prosseguir. (O site remoto não é obrigatório nesta etapa, mas você precisará configurá-lo em algum momento, antes de 
publicar seus arquivos na Web.) Para obter mais informações, consulte Trabalho com sites do Dreamweaver. 


2. Na caixa de diálogo Configuração de site, selecione a categoria Controle de versão. 
3. Selecione Subversion no menu pop-up Acesso. 
4. Defina as opções de acesso da seguinte forma: 
* Selecione um protocolo no menu pop-up Protocolo. Os protocolos disponíveis são HTTP, HTTPS, SVN e SVN+SSH. 


Nota: O uso do protocolo SVN+SSH requer uma configuração especial. Para obter mais informações, consulte 
www.adobe.com/go/learn dw svn ssh br. 


e Digite o endereço do servidor SVN na caixa de texto Endereço do servidor (normalmente no formato servername.domain.com). 


e Digite o caminho para o seu repositório no servidor SVN na caixa de texto Caminho do repositório (normalmente algo como 
/svn/your root directory. É atribuição do administrador do servidor nomear a pasta raiz para o repositório de SVN.) 


e (Opcional) Se quiser usar uma porta do servidor diferente do padrão, selecione Não padrão e digite o número da porta na caixa de 
texto. 


e Digite o nome do usuário e a senha do servidor SVN. 


5. Clique em Testar para testar sua conexão, ou então clique em OK para fechar a caixa de diálogo. Depois, clique em Concluído para fechar 
a caixa de diálogo Gerenciar sites. 


Uma vez estabelecida a conexão com o servidor, seu repositório SVN estará disponível para exibição no painel Arquivos. Para exibi-lo, você pode 
selecionar Visualização do repositório no menu pop-up Exibir, ou então clicar no botão Arquivos do repositório E] no painel Arquivos expandido. 


Obter as versões mais recentes de arquivos 

Quando você obtém a versão mais recente de um arquivo no repositório SVN, o Dreamweaver mescla o conteúdo desse arquivo com o conteúdo 
da cópia local correspondente. (Em outras palavras, se outra pessoa tiver atualizado o arquivo desde que você o confirmou pela última vez, essas 
atualizações serão mescladas com a versão local do arquivo no seu computador.) Se o arquivo ainda não existir no disco rígido local, o 
Dreamweaver irá simplesmente obtê-lo. 


Nota: Ao pegar os arquivos do repositório pela primeira vez, você deve trabalhar em um diretório local vazio ou em um diretório local que não 
contenha arquivos com os mesmos nomes dos arquivos no repositório. O Dreamweaver não montará arquivos de repositório na unidade local na 
primeira tentativa, se a unidade local contiver arquivos cujos nomes correspondem a arquivos no repositório remoto. 


1. Verifique se você configurou corretamente uma conexão do SVN. 
2. Siga um destes procedimentos: 


e Exiba a versão local dos seus arquivos SVN no painel Arquivos selecionando Visualização local no menu pop-up Exibir. (Se você 
estiver trabalhando no painel Arquivos expandido, a Visualização local será exibida automaticamente.) Depois, clique com o botão 
direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo ou na pasta relevante e selecione Controle de 
versão > Obter versões mais recentes. 


e Exiba os arquivos do repositório SVN selecionando Visualização do repositório no menu pop-up Exibir, no painel Arquivos, ou então 
clicando no botão Arquivos do repositório, no painel Arquivos expandido. Depois, clique com o botão direito do mouse (Windows) ou 
com a tecla Control pressionada (Macintosh) no arquivo ou na pasta relevante e selecione Obter versões mais recentes. 


Nota: Você também pode clicar com o botão direito do mouse em um arquivo e escolher Retirar no menu de contexto ou selecionar o arquivo e 
clicar no botão Retirar para obter a versão mais recente. No entanto, como o SVN não oferece suporte a um fluxo de trabalho de retirada, essa 
ação não retira efetivamente o arquivo no sentido tradicional. 


Confirmar arquivos 
1. Verifique se você configurou corretamente uma conexão do SVN. 


2. Siga um destes procedimentos: 


e Exiba a versão local dos seus arquivos SVN no painel Arquivos selecionando Visualização local no menu pop-up Exibir. (Se você 
estiver trabalhando no painel Arquivos expandido, a Visualização local será exibida automaticamente.) Depois, selecione o arquivo que 
deseja confirmar e clique no botão Devolver. 


* Exiba os arquivos do repositório SVN selecionando Visualização do repositório no menu pop-up Exibir, no painel Arquivos, ou então 
clicando no botão Arquivos do repositório, no painel Arquivos expandido. Depois, clique com o botão direito do mouse (Windows) ou 
com a tecla Control pressionada (Macintosh) no arquivo que deseja confirmar e selecione Devolver. 


3. Revise as ações na caixa de diálogo Confirmar, faça as alterações necessárias e clique em OK. 
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Você pode alterar ações selecionando o arquivo cuja ação deseja alterar e clicando nos botões na parte inferior da caixa de diálogo 
Confirmar. Há duas opções disponíveis: confirmar e ignorar. 


Nota: Uma marca de seleção verde em um arquivo no painel Arquivos representa um arquivo alterado que ainda não foi confirmado no 
repositório. 
Atualizar status de arquivos ou pastas no repositório 
Você pode atualizar o status SVN de um único arquivo ou pasta. A atualização não é feita na exibição inteira. 
1. Verifique se você configurou corretamente uma conexão do SVN. 


2. Exiba os arquivos do repositório SVN selecionando Visualização do repositório no menu pop-up Exibir, no painel Arquivos, ou então 
clicando no botão Arquivos do repositório, no painel Arquivos expandido. 


3. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer pasta ou arquivo no 
repositório e selecione Atualizar status. 


Atualizar status de arquivo ou pastas locais 
Você pode atualizar o status SVN de um único arquivo ou pasta. A atualização não é feita na exibição inteira. 


1. Verifique se você configurou corretamente uma conexão do SVN. 


2. Exiba a versão local dos seus arquivos SVN no painel Arquivos selecionando Visualização local no menu pop-up Exibir. (Se você estiver 
trabalhando no painel Arquivos expandido, a Visualização local será exibida automaticamente.) 


3. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer pasta ou arquivo no painel 
Arquivos e selecione Atualizar status. 


Exibir revisões de um arquivo 
1. Verifique se você configurou corretamente uma conexão do SVN. 
2. Siga um destes procedimentos: 


e Exiba a versão local dos seus arquivos SVN no painel Arquivos selecionando Visualização local no menu pop-up Exibir. (Se você 
estiver trabalhando no painel Arquivos expandido, a Visualização local será exibida automaticamente.) Depois, clique com o botão 
direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo do qual deseja exibir as revisões e selecione 
Controle de versão > Mostrar revisões. 


e Exiba os arquivos do repositório SVN selecionando Visualização do repositório no menu pop-up Exibir, no painel Arquivos, ou então 
clicando no botão Arquivos do repositório, no painel Arquivos expandido. Depois, clique com o botão direito do mouse (Windows) ou 
com a tecla Control pressionada (Macintosh) no arquivo do qual deseja exibir as revisões e selecione Mostrar revisões. 


3. Na caixa de diálogo Histórico de revisão, selecione a revisão ou as revisões relevantes e siga um destes procedimentos: 
e Clique em Comparar com local para comparar a revisão selecionada com a versão local do arquivo. 


Nota: Você deve instalar uma ferramenta para comparação de arquivos de outro fabricante antes de comparar arquivos. Para obter 
mais informações sobre ferramentas de comparação, use um mecanismo de busca na Web como o Google para procurar “comparação 
de arquivos” ou ferramentas para “diferenciar”. O Dreamweaver trabalha com a maioria das ferramentas de outros fabricantes. 


e Clique em Comparar para comparar duas revisões selecionadas. Clique com a tecla Control pressionada para selecionar duas revisões 
simultaneamente. 


e Clique em Exibir para exibir a revisão selecionada. Essa ação não substitui a cópia local atual do mesmo arquivo. Você pode salvar a 
revisão selecionada no seu disco rígido, assim como faria com qualquer outro arquivo. 


e Clique em Elevar para tornar a revisão selecionada a mais atual no repositório. 


Bloquear e desbloquear arquivos 

Bloquear um arquivo no repositório SVN permite que outros usuários saibam que você está trabalhando em um arquivo. Outros usuários podem 
ainda editar o arquivo localmente, mas não poderão confirmá-lo enquanto você não o desbloquear. Quando você bloqueia um arquivo no 
repositório, um ícone de cadeado aberto é exibido no arquivo. Outros usuários veem um ícone de cadeado totalmente fechado. 


1. Verifique se você configurou corretamente uma conexão do SVN. 
2. Siga um destes procedimentos: 


* Exiba os arquivos do repositório SVN selecionando Visualização do repositório no menu pop-up Exibir, no painel Arquivos, ou então 
clicando no botão Arquivos do repositório, no painel Arquivos expandido. Depois, clique com o botão direito do mouse (Windows) ou 
com a tecla Control pressionada (Macintosh) no arquivo relevante e selecione Bloquear ou Desbloquear. 


e Exiba a versão local dos seus arquivos SVN no painel Arquivos selecionando Visualização local no menu pop-up Exibir. (Se você 
estiver trabalhando no painel Arquivos expandido, a Visualização local será exibida automaticamente.) Depois, clique com o botão 
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direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo relevante e selecione Bloquear ou Desbloquear. 


Adicionar um novo arquivo ao repositório 
Um sinal de adição azul em um arquivo no painel Arquivos indica que o arquivo ainda não existe no repositório SVN. 


1. Verifique se você configurou corretamente uma conexão do SVN. 
2. No painel Arquivos, selecione o arquivo que deseja adicionar ao repositório e clique no botão Devolver. 


3. Verifique se o arquivo está selecionado para Confirmar, na caixa de diálogo Confirmar, e clique em OK. 


Mover, copiar, excluir ou reverter arquivos 
e Para mover um arquivo, arraste o arquivo para a pasta de destino no site local. 


Quando você move um arquivo, o Dreamweaver marca o arquivo no novo local com um sinal Adicionar com histórico e marca o arquivo no 
local antigo com um sinal de exclusão. Quando você confirma esses arquivos, o arquivo no local antigo desaparece. 


e Para copiar um arquivo, selecione-o, copie-o (Editar > Copiar) e cole (Editar > Colar) o arquivo no novo local. 
Quando você copia e cola um arquivo, o Dreamweaver marca o arquivo no novo local com um sinal Adicionar com histórico. 
e Para excluir um arquivo, selecione-o e pressione Excluir. 


O Dreamweaver fornece a opção de apenas a versão local do arquivo ou a versão local e a versão no servidor SVN. Se selecionar excluir 
apenas a versão local, o arquivo no servidor SVN não será afetado. Se selecionar excluir a versão no servidor SVN também, a versão local 
será marcada com um sinal Excluir e você confirmará a exclusão do arquivo para que a exclusão ocorra. 


e Para reverter um arquivo copiado ou movido para seu local original, clique com o botão direito do mouse no arquivo e selecione Controle de 
versão > Reverter. 


Resolver conflito de arquivos 

Se o seu arquivo conflitar com outro arquivo no servidor, você poderá editá-lo e marcá-lo como resolvido. Por exemplo, se você tentar devolver 
um arquivo que está em conflito com as alterações de outro usuário, o SVN não permitirá que você confirme o arquivo. Você pode obter a versão 
mais recente do arquivo no repositório, fazer alterações manualmente na sua cópia de trabalho e marcar o arquivo como resolvido para que 
possa confirmá-lo. 


1. Verifique se você configurou corretamente uma conexão do SVN. 


2. Exiba a versão local dos seus arquivos SVN no painel Arquivos selecionando Visualização local no menu pop-up Exibir. (Se você estiver 
trabalhando no painel Arquivos expandido, a Visualização local será exibida automaticamente.) 


3. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo cujo conflito deseja resolver e 
selecione Controle de versão > Marcar como resolvido. 


Acessar off-line 

Talvez seja útil para você evitar o acesso ao repositório durante outras atividades de transferência de arquivos usando o acesso off-line. O 
Dreamweaver se reconectará ao repositório SVN assim que você invocar uma atividade que exija uma conexão (Obter versões mais recentes, 
Confirmar etc). 


1. Verifique se você configurou corretamente uma conexão do SVN. 


2. Exiba a versão local dos seus arquivos SVN no painel Arquivos selecionando Visualização local no menu pop-up Exibir. (Se você estiver 
trabalhando no painel Arquivos expandido, a Visualização local será exibida automaticamente.) 


3. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em qualquer arquivo ou pasta no painel 
Arquivos e selecione Controle de versão > Acessar offline. 


Limpar um site local do SVN 
Esse comando permite remover bloqueios nos arquivos para que você possa retomar as operações não concluídas. Você deve usar esse 
comando para remover bloqueios antigos se você receber erros como "cópia de trabalho bloqueada". 


1. Verifique se você configurou corretamente uma conexão do SVN. 


2. Exiba a versão local dos seus arquivos SVN no painel Arquivos selecionando Visualização local no menu pop-up Exibir. (Se você estiver 
trabalhando no painel Arquivos expandido, a Visualização local será exibida automaticamente.) 


3. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no arquivo que deseja limpar e selecione 
Controle de versão > Limpar. 


Sobre a movimentação de arquivos e pastas em sites controlados pelo Subversion 
Quando você move as versões locais de arquivos ou pastas em um site controlado pelo Subversion, corre o risco de criar problemas para outros 
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usuários que façam sincronizações com o repositório SVN. Por exemplo, se você mover um arquivo localmente e não confirmar esse arquivo no 
repositório durante algumas horas, outro usuário poderá tentar obter a versão mais recente do arquivo em sua localização antiga. Por isso, você 
deve sempre confirmar os arquivos no servidor SVN imediatamente após movê-los localmente. 


Arquivos e pastas permanecem no servidor SVN até que você os exclua manualmente. Então, mesmo que você mova um arquivo para outra 
pasta local e o confirme, a versão antiga permanecerá na localização anterior no servidor. Para evitar confusão, exclua as cópias antigas de 
arquivos e pastas movidos. 


Quando você mover um arquivo localmente e confirmá-lo no servidor SVN, o histórico de versões do arquivo será perdido. 


Mais tópicos da Ajuda 
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Comparação de arquivos em busca de diferenças 


Comparar arquivos locais e remotos em busca de diferenças 
Comparar antes da colocação dos arquivos 
Comparar arquivos durante a sincronização 


E - ' Para o início 
Comparar arquivos locais e remotos em busca de diferenças 
O Dreamweaver pode funcionar com ferramentas para comparação de arquivos (também conhecidas como “ferramentas para diferenciar” a fim 
de comparar o código das versões local e remota do mesmo arquivo, dois arquivos remotos diferentes ou dois arquivos locais diferentes. A 
comparação das versões local e remota é muito útil caso você esteja trabalhando em um arquivo localmente e suspeite de que a cópia do arquivo 
no servidor foi modificada por alguém. Sem deixar o Dreamweaver, você pode exibir e mesclar as alterações remotas à versão local antes de 
colocar o arquivo no servidor. 


A comparação de dois arquivos locais ou de dois arquivos remotos também é útil caso você mantenha versões anteriores, renomeadas, dos 
arquivos. Se você tiver esquecido as alterações feitas em um arquivo em relação a uma versão anterior, uma rápida comparação o lembrará 
delas. 


Antes de começar, você deve instalar uma ferramenta para comparação de arquivos de outro fabricante no sistema. Para obter mais informações 
sobre ferramentas de comparação, use um mecanismo de busca na Web como o Google para procurar “comparação de arquivos” ou ferramentas 
para “diferenciar”. O Dreamweaver funciona com a maioria das ferramentas de outros fabricantes. 


Especificar uma ferramenta comparativa no Dreamweaver 
1. Instale a ferramenta comparativa no mesmo sistema do Dreamweaver. 


2. No Dreamweaver, abra a caixa de diálogo Preferências selecionando Editar > Preferências (Windows) ou Dreamweaver > Preferências 
(Macintosh) e, em seguida, selecione a categoria Comparar arquivos. 


3. Siga um destes procedimentos: 
e No Windows, clique no botão Procurar e selecione o aplicativo que compara arquivos. 


e No Macintosh, clique no botão Browse e selecione a ferramenta ou o script que inicia a ferramenta comparativa de arquivos na linha de 
comando, e não a ferramenta propriamente dita. 


Os scripts e as ferramentas de inicialização estão tipicamente localizadas na pasta /usr/bin em seu Macintosh. Por exemplo, se desejar usar 
o FileMerge, vá para /usr/bin e selecione opendiff, que é a ferramenta que inicia o FileMerge. 


A seguinte tabela lista as ferramentas para comparação de arquivos mais comuns para Macintosh e o local das ferramentas e dos script de 
inicialização no disco rígido: 


Caso você use Selecione o seguinte arquivo 

FileMerge /usr/bin/opendiff (ou /Developer/usr/bin/opendiff) 
BBEdit /usr/bin/bbdiff 

TextWrangler lusr/bin/twdiff 


Nota: A pasta usr costuma permanecer oculta no Finder. No entanto, você pode acessá-la usando o botão Browse do Dreamweaver. 
Nota: Os resultados reais exibidos dependem da ferramenta para diferenciar que você está usando. Verifique o manual do usuário da ferramenta 
para compreender como interpretar os resultados. 


Comparar dois arquivos locais 
Você pode comparar dois arquivos localizados em qualquer lugar do computador. 


1. No painel Arquivos, clique com a tecla Control pressionada (Windows) ou Command (Macintosh) nos dois arquivos para selecioná-los. 
Para selecionar arquivos fora do site definido, selecione o disco local no menu pop-up à esquerda do painel Arquivos e, em seguida, 
selecione os arquivos. 


2. Clique com o botão direito do mouse em um dos arquivos selecionados e selecione Comparar arquivos locais no menu de contexto. 
Nota: Caso você tenha um mouse de um botão, clique com a tecla Control pressionada em um dos arquivos selecionados. 


A ferramenta para comparação de arquivos é iniciada e compara os dois arquivos. 
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Comparar dois arquivos remotos 
Você pode comparar dois arquivos localizados no servidor remoto. Você deve definir um site do Dreamweaver com as configurações remotas 
para realizar esta tarefa. 


1. No painel Arquivos, veja os arquivos no servidor remoto selecionando Visualização remota no menu pop-up à direita. 
2. Clique com a tecla Control pressionada (Windows) ou Command (Macintosh) nos dois arquivos para selecioná-los. 


3. Clique com o botão direito do mouse em um dos arquivos selecionados e selecione Comparar arquivos remotos no menu de contexto. 
Nota: Caso você tenha um mouse de um botão, clique com a tecla Control pressionada em um dos arquivos selecionados. 


A ferramenta para comparação de arquivos é iniciada e compara os dois arquivos. 


Comparar um arquivo local com um arquivo remoto 
Você pode comparar um arquivo local com um arquivo localizado no servidor remoto. Para isso, você deve definir primeiro um site do 
Dreamweaver com configurações remotas. 


*&* No painel Arquivos, clique com o botão direito do mouse em um arquivo local e selecione Comparar com remoto no menu de contexto. 
Nota: Caso você tenha um mouse de um botão, clique com a tecla Control pressionada no arquivo local. 


A ferramenta para comparação de arquivos é iniciada e compara os dois arquivos. 


Comparar um arquivo remoto com um arquivo local 
Você pode comparar um arquivo remoto com um arquivo local. Você deve definir um site do Dreamweaver com as configurações remotas para 
realizar esta tarefa. 


1. No painel Arquivos, veja os arquivos no servidor remoto selecionando Visualização remota no menu pop-up à direita. 


2. Clique com o botão direito do mouse em um arquivo no painel e selecione Comparar com local no menu de contexto. 
Nota: Caso você tenha um mouse de um botão, clique com a tecla Control pressionada no arquivo. 


Comparar um arquivo aberto com um arquivo remoto 
Você pode comparar um arquivo aberto no Dreamweaver com seu correspondente no servidor remoto. 


“& Na janela Documento, selecione Arquivo > Comparar com remoto. 
A ferramenta para comparação de arquivos é iniciada e compara os dois arquivos. 


Você também pode clicar com o botão direito do mouse na aba do documento na parte superior da janela Documento e selecionar Comparar 
com remoto no menu de contexto. 


pm" ' Para o início 
Comparar antes da colocação dos arquivos 


Se você editar um arquivo localmente e, em seguida, tentar carregá-lo no servidor remoto, o Dreamweaver notificará você de que o arquivo foi 
alterado. Você tem a opção de comparação dos dois arquivos antes de carregar o arquivo e substituir a versão remota. 


Antes de começar, você deve instalar uma ferramenta para comparar arquivos no sistema e especificá-la no Dreamweaver. 
1. Depois de editar um arquivo em um site do Dreamweaver, coloque o arquivo (Site > Colocar) no site remoto. 
Se a versão remota do arquivo tiver sido modificada, você receberá uma notificação com a opção de visualização das diferenças. 
2. Para exibir as diferenças, clique no botão Comparar. 
A ferramenta para comparação de arquivos é iniciada e compara os dois arquivos. 
Caso não tenha especificado uma ferramenta para comparar arquivos, você é solicitado a especificar uma. 


3. Depois de examinar ou mesclar as alterações na ferramenta, você pode continuar a operação Colocar ou cancelá-la. 


. E . Rá Para o início 
Comparar arquivos durante a sincronização 


Você pode comparar as versões locais dos arquivos com as versões remotas ao sincronizar os arquivos do site com o Dreamweaver. 
Antes de começar, você deve instalar uma ferramenta para comparar arquivos no sistema e especificá-la no Dreamweaver. 


1. Clique com o botão direito do mouse em qualquer lugar do painel Arquivos e selecione Sincronizar no menu de contexto. 


2. Complete a caixa de diálogo Sincronizar arquivos e clique em Visualizar. 
Depois que você clicar em Visualizar, os arquivos selecionados e as ações a serem realizadas durante a sincronização serão listados. 


3. Na lista, selecione todos os arquivos que você deseja comparar e clique no botão Comparar (o ícone com duas páginas pequenas). 
Nota: O arquivo deve ser baseado em texto como, por exemplo, arquivos em HTML ou do ColdFusion. 


O Dreamweaver inicia a ferramenta comparativa, que compara as versões local e remota de todos os arquivos que você selecionou. 
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Mais tópicos da Ajuda 
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Encobrimento de pastas e arquivos em seu site do Dreamweaver 


Sobre o encobrimento de site 

Ativar e desativar encobrimento do site 

Encobrir e desencobrir arquivos e pastas de site 
Encobrir e desencobrir tipos de arquivo específicos 
Desencobrir todas as pastas e arquivos 


a E P iníci 
Sobre o encobrimento de site Ro 


O encobrimento de site permite excluir pastas e arquivos de operações como Obter ou Colocar. Você também pode encobrir todos os arquivos de 
um determinado tipo (JPEG, FLV, XML e assim por diante) das operações do site. O Dreamweaver lembra as configurações de cada site para 
que você não precise fazer seleções sempre que trabalhar nesse site. 


Por exemplo, caso esteja trabalhando em um site grande e não queira carregar os arquivos de multimídia diariamente, você pode usar o 
encobrimento de site para encobrir a pasta de multimídia. Assim, o Dreamweaver excluirá os arquivos dessa pasta das operações de site que 
você realizar. 


Você pode encobrir pastas e tipos de arquivo no site remoto ou local. O encobrimento exclui pastas e arquivos encobertos das seguintes 
operações: 


Realização das operações Colocar, Obter, Devolver e Retirar 

e Geração de relatórios 

e Localização de arquivos locais e remotos mais novos 

e Realização de operações em todo o site como, por exemplo, verificação e alteração de links 
* Sincronização 

e Trabalho com conteúdo do painel Ativo 

e Atualização de modelos e bibliotecas 


Nota: Você ainda pode realizar uma operação em uma pasta ou arquivo encobertos específicos selecionando o item no painel Arquivos e 
realizando uma operação nele. A realização de uma operação diretamente em um arquivo ou pasta substitui o encobrimento. 

Nota: O Dreamweaver exclui modelos encobertos e itens de biblioteca apenas das operações Obter e Colocar. O Dreamweaver não exclui 
esses itens das operações em lote porque isso pode fazer com que elas percam a sincronia com suas ocorrências. 


E p E E Para o início 
Ativar e desativar encobrimento do site 
O encobrimento de site permite excluir pastas, arquivos e tipos de arquivo de todas as operações do site como, por exemplo, Obter ou Colocar, 
sendo ativado por padrão. Você pode desativar o encobrimento permanentemente ou apenas temporariamente para realizar uma operação em 
todos os arquivos, inclusive em arquivos encobertos. Quando você desativa o encobrimento de site, todos os sites encobertos são desencobertos. 
Quando você ativa o encobrimento de site novamente, todos os arquivos encobertos anteriormente são novamente encobertos. 


Nota: Você também pode usar a opção Desencobrir tudo para desencobrir todos os arquivos, mas isso não desativa o encobrimento; além 
disso, não há como encobrir novamente todas as pastas e arquivos encobertos anteriormente, exceto para definir o encobrimento novamente 
para todas as pastas, arquivos e tipos de arquivos. 

1. No painel Arquivos (Janela > Arquivos), selecione um arquivo ou uma pasta. 


2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e siga um dos seguintes procedimentos: 
e Selecione Encobrimento > (cancele a seleção para desativar). 


* Selecione Encobrimento > Configurações para abrir a categoria Encobrimento da caixa de diálogo Configuração de site. Marque ou 
desmarque e selecione ou cancele a seleção Encobrir arquivos terminados com para ativar ou desativar o encobrimento de tipos de 
arquivo específicos. Você pode inserir ou excluir sufixos de arquivo na caixa de texto que você deseja encobrir ou desencobrir. 


Para o início 


Encobrir e desencobrir arquivos e pastas de site 


Você pode encobrir pastas e arquivos específicos, mas não todos os arquivos e pastas ou um site inteiro. Ao encobrir arquivos e pastas 
específicos, você pode encobrir vários arquivos e pastas simultaneamente. 


1. No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado. 
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2. Selecione a(s) pasta(s) ou o(s) arquivo(s) que você deseja encobrir ou desencobrir. 

3. Clique com o botão direito do mouse (Windows) ou clique mantendo a tecla Control pressionada (Macintosh) e selecione Encobrindo > 
Encobrir ou Encobrimento > Desencobrir no menu de contexto. 
Uma linha vermelha no ícone da pasta ou do arquivo aparece ou desaparece, indicando que a pasta está encoberta ou desencoberta. 


Nota: Você ainda pode realizar uma operação em uma pasta ou arquivo encobertos específicos selecionando o item no painel Arquivos e 
realizando uma operação nele. A realização de uma operação diretamente em um arquivo ou pasta substitui o encobrimento. 


a ca , siigá Para o início 
Encobrir e desencobrir tipos de arquivo específicos ço 


Você pode indicar tipos de arquivo específicos a serem encobertos para que o Dreamweaver encubra todos os arquivos com um padrão 
especificado. Por exemplo, você pode encobrir todos os arquivos que terminem com a extensão .txt. Os tipos de arquivo que você insere não 
precisam ser extensões de arquivo; eles podem ter qualquer padrão ao final do nome de documento. 


Encobrir tipos de arquivo específicos dentro de um site 
1. No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado. 
2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, selecione Encobrindo > 
Configurações. 
3. Selecione a opção Encobrir os arquivos terminados com, digite os tipos de arquivo a serem encobertos na caixa e clique em OK. 


Por exemplo, você pode digitar .jpg para encobrir todos os arquivos com nomes que terminem com .jpg no site. 
Separe vários tipos de arquivo com um espaço; não use uma vírgula ou ponto-e-vírgula. 
No painel Arquivos, uma linha vermelha é exibida em todos os arquivos afetados indicando que eles estão encobertos. 


Alguns softwares criam arquivos de backup que terminam com um determinado sufixo como, por exemplo, .bak. Você pode encobrir 
esses arquivos. 


Nota: Você ainda pode realizar uma operação em uma pasta ou arquivo encobertos específicos selecionando o item no painel Arquivos e 
realizando uma operação nele. A realização de uma operação diretamente em um arquivo ou pasta substitui o encobrimento. 


Desencobrir tipos de arquivo específicos dentro de um site 
1. No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado. 
2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, selecione Encobrindo > 
Configurações. 
3. Na caixa de diálogo Definição avançada de sites, siga um destes procedimentos: 


* Desmarque a opção Encobrir os arquivos terminados com para desencobrir todos os tipos de arquivo listados na caixa. 
e Exclua tipos de arquivo específicos da caixa para desencobri-los. 
4. Clique em OK. 


As linhas vermelhas desaparecem de todos os arquivos afetados indicando que eles estão desencobertos. 


E « P, iníci 
Desencobrir todas as pastas e arquivos Ei 


Você pode desencobrir todas as pastas e arquivos de um site simultaneamente. Essa ação não pode ser desfeita; não há como reencobrir todos 
os itens que já foram encobertos. Você tem que reencobrir os itens individualmente. 


Caso você queira desencobrir temporariamente todas as pastas e arquivos, encubra novamente esses itens e desative o encobrimento de site. 
1. No painel Arquivos (Janela > Arquivos), selecione um site que tenha o encobrimento de site ativado. 
2. Selecione todos os arquivos ou pastas do site. 


3. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, selecione Encobrindo > 


Desencobrir tudo. 
Nota: Essa etapa também desmarca a opção Encobrir os arquivos terminados com na categoria Encobrimento da caixa de diálogo 


Definição do site. 


As linhas vermelhas em todos os ícones de pasta e arquivo desaparecem indicando que todos os arquivos e pastas do site estão 
desencobertos. 
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Layout e design 


Dreamweaver CS5: Inspeção de CSS 
Geoff Blake (23-apr-10) 
tutorial em vídeo 
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Layout das páginas com CSS 


Sobre o layout da página CSS 
Sobre a estrutura do layout de página CSS 
Criação de uma página com um layout de CSS 


Para o início 


Sobre o layout da página CSS 


Um layout de página CSS usa o formato de folhas de estilos em cascata, em vez dos quadros e tabelas HTML tradicionais, para organizar o 
conteúdo em uma página da Web. O bloco de criação básico do layout CSS é a tag div, uma tag HTML que, na maioria dos casos, atua como 
um contêiner de texto, imagens e outros elementos de página. Quando você cria um layout CSS, coloque tags div na página, adicione conteúdo a 
elas e posicione-as em vários lugares. Diferente das células de tabela, que são restritas a algum lugar dentro das linhas e colunas de uma tabela, 
as tags div podem aparecer em qualquer lugar de uma página da Web. É possível posicionar tags div de forma absoluta (especificando 
coordenadas x e y) ou relativa (especificando o seu local em relação ao seu local atual). Você também pode posicionar as tags div especificando 
flutuações, preenchimentos e margens, o método preferido pelos padrões da Web de hoje. 


A criação de layouts CSS do zero pode ser difícil porque há muitas formas de fazer isso. Você pode criar um layout CSS simples de duas 
colunas definindo flutuações, margens, preenchimentos e outras propriedades CSS em uma quantidade quase infinita de combinações. Além 
disso, o problema de processamento entre navegadores pode fazer com que determinados layouts CSS sejam exibidos corretamente em alguns 
navegadores e incorretamente em outros. O Dreamweaver facilita a construção de páginas com layouts de CSS fornecendo 16 layouts 
predefinidos que funcionam em diferenetes navegadores. 

O uso dos layouts de CSS predefinidos que acompanham o Dreamweaver é o modo mais fácil de criar uma página com um layout de CSS, mas 
você pode também criar layouts de CSS usando os elementos de posição absoluta do Dreamweaver (elementos AP). Um elemento AP no 
Dreamweaver é um elemento de página em HTML especificamente, uma tag div ou qualquer outra tag que tenha uma posição absoluta 
atribuída a ela. Entretanto, há limitação dos elementos AP do Dreamweaver, pois eles estão posicionados de modo absoluto e suas posições 
nunca se ajustam na página de acordo com o tamanho da janela do navegador. 


Se você é um usuário avançado, também pode inserir tags div manualmente e aplicar os estilos de posicionamento CSS a elas para criar 
layouts de página. 


Sobre a estrutura do layout de página CSS ido 


Antes de passar para esta seção, você deve estar familiarizado com os conceitos básicos da CSS. 


O bloco de criação básico do layout CSS é a tag div, uma tag HTML que, na maioria dos casos, atua como um contêiner de texto, imagens e 
outros elementos de página. O exemplo a seguir mostra uma página HTML que contém três tags div separadas: uma tag de “contêiner" grande e 
duas outras tags — uma tag de barra lateral e uma tag de conteúdo principal — dentro da tag de contêiner. 


Sidebar Content 
qem ipean dolor us amet. comectessrr adoquacim elit B 
Masc rumo arma paris, femienhoss vb csviestoo um cormusizodo postizõor, feias 


Main Content 


A Love ips dolor vis amet, comecteoer abapuscing elis Provsemt aliquam susto comvallis hacsss 
rar 
Phaseliza tristique purwe 9 augue condimentm adipíncing Aemean sagíris Emis leo pede. rhonem c 
venenos. mistaque x valpuiste at, oxdão. 


H2 level heading 


Lovem ipsum dolor nt amet, comoctetsor adepuncimg elit Prmescot abiquemi, justo comvaília hacsss 
uam, eras milha fermensesm dam. at pocos quam ame ac quem 


A. Div de contêiner B. Div de barra lateral C. Div de conteúdo principal 


Este é o código das três tags div do HTML: 


<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
<div id="sidebar"> 
<h3>Sidebar Content</h3> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> 
</div> 
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<!--mainContent div tag--> 

<div id="mainContent"> 

<h1> Main Content </h1> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus 
rutrum.</p> 

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus 
venenatis, tristique in, vulputate at, odio.</p> 

<h2>H2 level heading </h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus 
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> 

</div> 
</div> 


No exemplo acima, não há nenhum “estilo” anexado a nenhuma das tags div. Sem as regras CSS definidas, cada tag div e seu respectivo 
conteúdo ficam em uma local padrão da página. No entanto, se cada tag div tiver uma ID exclusiva (como no exemplo anterior), você poderá usar 
suas IDs para criar regras CSS que, quando aplicadas, alteram o estilo e posicionamento das tags div. 


A regra CSS a seguir, que pode residir no cabeçalho do documento ou em um arquivo CSS externo, cria regras de estilo para a primeira tag div, 
ou a de “contêiner”, na página: 


gcontainer ( 
width: 780px; 
background: &FFFFFF; 
margin: O auto; 
border: 1px solid 4000000; 
text-align: left; 

3 


A regra &container dita que a tag div de contêiner deve ter uma largura de 780 pixels, um fundo branco, nenhuma margem (no lado esquerdo da 
página), uma borda sólida preta de 1 pixel, e o texto alinhado à esquerda. Os resultados da aplicação da regra à tag div de contêiner são os 
seguintes: 


A " 


= Content 
Lorem ipaam dolor sit umer, consectemer adipiscina elit 


Msecenas uma pro, Serroemtuos il, moleshe rm, comodo porttiter 


Main Content 


Lorem pesa dolor sit met, consectetuer adipisciug elit Present aliquarm. posto comvalhis huctus 
frarau 

| 

Phaselins mestique paras a aegre condimessim adipiscina Acmeas sagizis Etiam leo pede 


Viomcos veseualos, rivigae ss, valgutate ai, odvo 


H2 level heading 


Lorem apssn dolor sit must, comsectetuer adipus ing elit. Praeseut aliquam. susto comvalhis huctias | 
fratram, erat meilla fervucenos dicera, at pomimemy quem meme ac quam 


c 
Tag div de contêiner, 780 pixels, sem margem 
A. Texto alinhado à esquerda B. Fundo branco C. Borda sólida preta de 1 pixel 


A próxima regra CSS cria regras de estilo para a tag div de barra lateral: 


tsidebar f 

float edit: 

width: 200px; 

background: HEBEBEB; 

padding: 15px 10px 15px 20px; 
; 


A regra 4sidebar dita que a tag div de barra lateral tem uma largura de 200 pixels, um fundo cinza, um preenchimento superior e inferior de 15 
pixels, um preenchimento à direita de 10 pixels e um preenchimento à esquerda de 20 pixels. (A ordem padrão de preenchimento é da parte 
superior direita para a parte inferior esquerda.) Além disso, a regra posiciona a tag div de barra lateral com float: left — uma propriedade que 
coloca a tag div de barra lateral no lado esquerdo da tag div de contêiner. Estes são os resultados da aplicação da regra à tag div de barra 
lateral: 
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Sidebar Content 


| 
Main Content | 
Lorem ipsem disdor ait | | 
anet. consente Loress ips dolor sit amet, consectenser ndipisciag elit Proesest 
adipiscims elit laguna, juso cowsaldis luto rutrus. 


Maccenas tema perus, Phaseílus tristique purus a saque condimestus adepomcing Acteam 
fermentarm id molestoe  jagimis Exiam leo pede rhoocus venenatis trisrique in vulpestane se 
im, commado pormisor. dos 

felis 


Tt HZ level heading 


ore ipousm dobes sit amet. cussectenses misgusciag elit Pracseas alsquams, justo couvallis luctus 
mun, eres mala Sermentom disse mt meomancareos aqusem arte se quam 


Div de barra lateral, flutuação à esquerda 
A. Largura de 200 pixels B. Preenchimento superior e inferior, 15 pixels 


Por fim, a regra CSS da tag div de contêiner principal finaliza o layout: 


gmainContent f 
margin: O O O 250px; 
padding: O 20px 20px 20px; 
3 


A regra &mainContent dita que a div de conteúdo principal terá uma margem esquerda de 250 pixels; isso significa que ela colocará 250 pixels de 
espaço entre o lado esquerdo da div de contêiner e o lado esquerdo da div de conteúdo principal. Além disso, a regra fornece 20 pixels de 
espaçamento nos lados direito, inferior e esquerdo da div de conteúdo principal. Estes são os resultados da aplicação da regra à div mainContent: 


Esta será a aparência do código completo: 


RR Main Content 


Lemers ipsuars dolor ss | 
asset, comsectemies Lorem ipsum dolor sm amet. consecintuer adposcing eli 
adipiseira elit Precsest aliquesm, justo comvallio factos ratrurs | 


Maecenas urea priras, Phaselias tistuque pares a mague condumentiza adiposo ms 
fecrmentsaco 1d, isaclentão Aenesm sagintia Erimes low perhe, remcus vemenatia, tristiqque 
ta, comodo portritor “e volgutato at, ado | 


H2 level heading 


Levem ipsiam deim vt amet 


omsectetaer begun ia elit 
Prsescst aliquars, justo comvali:s facu ratres. esa! culla 
Sermmentore, diem af peoesterame quere ante nc qquass 


Í + e 
Div de conteúdo principal, margem esquerda de 250 pixels 
A. Preenchimento esquerdo de 20 pixels B. Preenchimento direito de 20 pixels C. Preenchimento inferior de 20 pixels 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
tcontainer ( 
width: 780px; 
background: &FFFFFF; 
margin: O auto; 
border: 1px solid 4000000; 
text-align: left; 


; 
tsidebar 

falo att lets: 

width: 200px; 

background: HEBEBEB; 

padding: 15px 10px 15px 20px; 
h 


gmainContent f 
margin: O O O 250px; 
padding: O 20px 20px 20px; 

y 

</style> 

</head> 

<body> 

<!--container div tag--> 

<div id="container"> 
<!--sidebar div tag--> 
<div id="sidebar"> 
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<h3>Sidebar Content</h3> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> 

</div> 

<!--mainContent div tag--> 

<div id="mainContent"> 

<h1> Main Content </h1> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus 
rutrum.</p> 

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus 
venenatis, tristique in, vulputate at, odio.</p> 

<h2>H2 level heading </h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus 
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> 

</div> 
</div> 
</body> 


Nota: o código de exemplo acima é uma versão simplificada do código que cria o layout de barra lateral fixa de duas colunas quando você cria 
um novo documento usando os layouts predefinidos que acompanham o Dreamweaver. 


Criação de uma página com um layout de CSS RETAS 


Ao criar uma nova página no Dreamweaver, você pode criar uma que já contenha um layout de CSS. O Dreamweaver vem acompanhado de 16 
layouts de CSS diferentes qua você pode escolher. Além disso, é possível criar seus próprios layouts CSS e adicioná-los à pasta de 
configuração, a fim de que eles apareçam como opções de layout na caixa de diálogo Novo documento. 


Os layouts de CSS do Dreamweaver são processados corretamente nos seguintes navegadores: Firefox (Windows e Macintosh) 1.0, 1.5, 2.0 e 
3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0 e 8.0; Opera (Windows e Macintosh) 8.0, 9.0 e 10.0; Safari 2.0, 3.0 e 4.0; e Chrome 3.0. 


Criação de uma página com um layout CSS 

1. Selecione Arquivo > Novo. 

2. Na caixa de diálogo Novo documento, selecione a categoria Página em branco. (Essa é a seleção padrão.) 

3. Em Tipo de página, selecione o tipo de página que você deseja criar. 
Nota: você deve selecionar um tipo de página em HTML para o layout. Por exemplo, você pode selecionar HTML, ColdFusionQ, PHP etc. 
Não é possível criar uma página ActionScript"”, CSS, Item de biblioteca, JavaScript, XML, XSLT ou Componente do ColdFusion com um 
layout CSS. Além disso, os tipos de página da categoria Outros da caixa de diálogo Novo documento apresentam restrição na inclusão de 
layouts de página CSS. 


4. Em Layout, selecione o layout CSS que deseja usar. Você pode escolher entre 16 layouts diferentes. A janela Visualizar mostra o layout e 
fornece uma breve descrição do layout selecionado. 


Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna: 


Fixa A largura da coluna é especificada em pixels. A coluna não é redimensionada com base no tamanho do navegador ou nas 
configurações de texto do visitante do site. 


Líquida A largura da coluna é especificada como uma porcentagem da largura do navegador do visitante. O design se adapta caso o 
visitante do site torne o navegador mais largo ou mais estreito, mas não se altera com base nas configurações de texto do visitante do site. 


5. Selecione um tipo de documento no menu pop-up TipoDoc. 
6. Selecione um local para a CSS do layout em CSS de Layout no menu pop-up. 


Adicionar a cabeçalho Adiciona CSS do layout ao cabeçalho da página que você está criando. 


Criar novo arquivo Adiciona a CSS do layout à nova folha de estilos CSS externa e anexa a nova folha de estilos à página que você está 
criando. 


Vincular a arquivo existente Permite a você especificar um arquivo CSS existente que já contém as regras de CSS necessárias ao layout. 
Essa opção é especialmente útil quando você deseja usar o mesmo layout de CSS (as regras de CSS contidas em um único arquivo) em 
vários documentos. 


7. Siga um destes procedimentos: 
* Se você selecionou Adicionar a cabeçalho em CSS de layout no menu pop-up (a opção padrão), clique em Criar. 


e Se você selecionar Criar novo arquivo no menu pop-up CSS de layout, clique em Criar e especifique um nome para o novo arquivo 
externo na caixa de diálogo Salvar arquivo de folha de estilos como. 
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e Se você selecionou Vincular a arquivo existente em CSS de layout no menu pop-up, adicione o arquivo externo à caixa de texto Anexar 
arquivo CSS, clicando no ícone Adicionar folha de estilos, preenchendo a caixa de diálogo Anexar folha de estilos externa e clicando em 
OK. Quando terminar, clique em Criar na caixa de diálogo Novo documento. 


Nota: quando você selecionar a opção Vincular a arquivo existente, o arquivo especificado já deverá ter regras para o arquivo CSS nele 
contido. 


Quando você aplicar o CSS de layout em um novo arquivo ou vincular a um arquivo existente, o Dreamweaver automaticamente vincula o 
arquivo à página em HTML que você está criando. 


Nota: os comentários condicionais do Internet Explorer, que ajudam a resolver os problemas de processamento do IE, permanecem 
incorporados no cabeçalho do novo documento de layout CSS, mesmo se você selecionar Novo arquivo externo ou Arquivo externo 
existente como local da CSS do layout. 


8. (Opcional) Você também pode anexar as folhas de estilos CSS à nova página (não relacionada ao layout CSS) ao criar a página. Para 
fazer isso, clique no ícone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione uma folha de estilos CSS. 


Para obter uma descrição detalhada desse processo, consulte o artigo Anexar automaticamente uma folha de estilos a novos documentos 
de David Powers. 


Adição dos layouts CSS personalizados à lista de opções 
1. Crie uma página HTML que contém o layout CSS que você gostaria de adicionar à lista de opções na caixa de diálogo Novo documento. A 
CSS do layout deve residir no cabeçalho da página HTML. 


Para tornar seu layout de CSS personalizado consistente com outros layouts que acompanham o Dreamweaver, você deverá salvar seu 
arquivo em HTML com a extensão .him. 
2. Adicione a página HTML à pasta Adobe Dreamweaver CS5iConfigurationBuiltiniLayouts. 


3. (Opcional) Adicione uma imagem de visualização do layout (por exemplo, um arquivo .gif ou .png) à pasta Adobe Dreamweaver 
CS5iConfigurationBuiltiniLayouts. As imagens padrão fornecidas com o Dreamweaver são arquivos PNG de 227 pixels de largura x 193 
pixels de altura. 


Atribua à imagem de visualização o mesmo nome do arquivo HTML, a fim de que você possa controlá-la facilmente. Por exemplo, se o 
arquivo HTML for myCustomLayout.htm, atribua o nome myCustomLayout.png à imagem de visualização. 


4. (Opcional) Crie um arquivo de anotações para o layout personalizado, abrindo a pasta Adobe Dreamweaver 
CS5iConfigurationBuiltiniLayouts| notes, copiando e colando qualquer arquivo de anotação existente na mesma pasta e renomeando a 
cópia do layout personalizado. Por exemplo, você pode copiar o arquivo oneColElsCtr.htm.mno e renomeá-lo como 
myCustomLayout.htm.mno. 


5. (Opcional) Após criar um arquivo de anotações para o layout personalizado, você poderá abrir o arquivo e especificar o nome, a descrição e 
a imagem de visualização do layout. 


e Vinculação a uma folha de estilos CSS externa 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Painel CSS Designer 


Painel da CSS Designer (Janela > CSS Designer) é um Inspetor de propriedade da CSS que permite criar “visualmente” estilos e arquivos da 
CSS e definir propriedades, junto com consultas de mídia. 


ALL SOURCES 


noto e 


ê Im Layout 
boilerplate.css Hm c=you 

a width : auto 
à ' E height : auto 
jquery.ui.core.min.css 
Ê . A min-width : 0px 
jquery-ui-1.10.1.custom.mi... 
) NR k min-height : 0 px 
jquery.ui.dialog.min.css j 
. RU É max-width : none 


A max-height : none 
display : inline 
SHANIA: box-sizing : content-box 
print 
margin : Set Shorthand 


only screen and ( min-width :. 
only screen and ( min-wi 


Selectors dio 0 px 
[Prece 
COMPUTED 
-deskRightPadding 
«mobileSidePadding, table... 
«mobileSidePadding 
.mobileSidePadding 
blogaArticle 

blogaArticle 

blogArticle 

fluid 

article, aside, details, figc... 


padding : Set Shorthand 


Painel CSS Designer 


Nota: você pode usar Ctrl/Cmd+ Z para desfazer ou Ctrl/Cmd + Y para refazer todas as ações executadas na CSS Designer. As alterações são 
automaticamente refletidas na Visualização dinâmica, e o arquivo relevante da CSS também é atualizado. Para informar a você que o arquivo 
relacionado foi alterado, a guia do arquivo afetado é destacada por um tempo (aproximadamente 8 segundos). 


Criação e anexação de folhas de estilo 

Definição de consultas de mídia 

Definição dos seletores da CSS 
Cópia e cola de estilos 

Definição de propriedades do CSS 
Definição de margens, preenchimento e posição 
Definição de propriedades de borda 
Desativação ou exclusão de propriedades 
Atalhos do teclado 

Identificação de elementos de página associados a um Seletor CSS (13.1) 
Desativação do realce dinâmico 


Consulte também 


e Layout das páginas com CSS 
e Efeitos de transição do CSS3 
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O painel CSS Designer consiste nos seguintes painéis: 


Origens Lista todas as folhas de estilo da CSS associadas ao documento. Com esse painel, você pode criar e anexar uma CSS ao documento 
ou definir estilos no documento. 


(Mídia Lista todas as consultas de mídia na origem selecionada no painel Origens. Se você não selecionar uma CSS específica, esse painel 
exibirá todas as consultas de mídia associadas ao documento. 


Seletores Lista todos os seletores na origem selecionada no painel Origens. Se você também selecionar uma consulta de mídia, esse painel 
reduzirá a lista de seletores da consulta de mídia em questão. Se nenhuma CSS ou consulta de mídia for selecionada, esse painel exibirá todos 
os seletores no documento. 

Quando você seleciona Global no painel (QMídia, todos os seletores não incluídos em uma consulta de mídia da fonte selecionada são exibidos. 


Propriedades Exibe as propriedades que você pode definir para o seletor especificado. Para obter mais informações, consulte Definição de 
propriedades. 

O CSS Designer é sensível ao contexto. Isso significa que, para qualquer contexto fornecido ou elemento de página selecionado, você pode exibir 
as propriedades e os seletores associados. Caso contrário, quando você selecionar um seletor no CSS Designer, as consultas de mídia e origem 
associadas serão realçadas nos respectivos painéis. 


Tutorial de vídeo 
e Adicionar estilo a páginas da Web com o painel CSS Designer 


atentos 
Emo  ineçiseos morenim meus mera t 10 som riso pues d + 3) 
Gude | gg | Conçr | úrco | | doveat met MD, O OD ici Mona rata radataa Tonia! 
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ADVENTURE 2 K 


E dese DK gr oeteroeemtm os C) fg Gem fuidherobomelero - MH = o 
» ve om “ me =|] +<< 
n 
get - at nIL, “ 
Sora ca 


Dw Do Et fes Jum Mid Fmest Commenda Du fóncico bote 


dentes x | 
ES  ienros soros marques meat O sc ricos puuerpusd + 3» 
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CSS Designer mostrando as propriedades do cabeçalho selecionado na visualização dinâmica 
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Nota: quando você seleciona um elemento de página, “Computado” é selecionado no painel Seletores. Clique em um seletor para exibir a 
origem, a consulta de mídia ou as propriedades associadas. 


Para exibir todos os seletores, selecione Todas as origens no painel Origens. Para exibir os seletores que não pertencem a consultas de mídia na 


fonte selecionada, clique em Global no painel OMídia. 


Tutorial de vídeo 
e Usando o painel CSS Designer 


O, = E Para o início 
Criação e anexação de folhas de estilo ai 


1. No painel Origens do painel CSS Designer, clique em kd e em uma das seguintes opções: 


e Criar um novo arquivo CSS: para criar e anexar um novo arquivo CSS ao documento 
e Anexar arquivo CSS existente: para anexar um arquivo CSS existente ao documento 


e Definir na página: para definir uma CSS no documento 
Com base na opção selecionada, as caixas de diálogo Criar um novo arquivo CSS ou Anexar arquivo CSS existente são exibidas. 
2. Clique em Procurar para especificar o nome do arquivo CSS e, se você estiver criando uma CSS, o local para salvar o novo arquivo. 


3. Siga um destes procedimentos: 


e Clique em Vincular para vincular o documento do Dreamweaver ao arquivo CSS. 


e Clique em Importar para importar o arquivo CSS no documento. 


4. (Opcional) Clique em Uso condicional e especifique a consulta de mídia que deseja associar ao arquivo CSS. 


e RD já sedã Para o início 
Definição de consultas de mídia 


1. No painel CSS Designer, clique em uma origem CSS no painel Origens. 


2. Clique em kd no painel (QMídia para adicionar uma nova consulta de mídia. 
A caixa de diálogo Defina a consulta de mídia aparece e relaciona todas as condições de consulta de mídia compatíveis com o 
Dreamweaver. 

3. Selecione as Condições conforme desejar. Para obter informações detalhadas sobre consultas de mídia, consulte este artigo. 
Verifique se você especificou valores válidos para todas as condições selecionadas. Caso contrário, as consultas de mídia correspondentes 
não serão criadas com sucesso. 
Nota: no momento, somente a operação “e” está disponível para várias condições. 


Se você adicionar as condições de consulta de mídia pelo código, apenas as condições permitidas serão preenchidas na caixa de diálogo Definir 
consulta de mídia. A caixa de texto Código na caixa de diálogo, entretanto, mostra o código completo (incluindo condições não permitidas). 


Se você clicar em uma consulta de mídia na visualização dinâmica/de design, a janela de visualização é alterada para corresponder à consulta 
de mídia selecionada. Para exibir o tamanho total da janela de visualização, clique em Global no painel (OMídia. 


Definição dos seletores da CSS Para o início 


1. No CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mídia no painel QMídia. 


2. No painel Seletores, clique em E3. com base no elemento selecionado no documento, a CSS Designer identifica de forma inteligente e 
solicita o seletor relevante (até três regras). 


Execute um ou mais destes procedimentos: 


e Use as teclas de seta para cima ou para baixo para tornar o seletor sugerido mais ou menos específico. 


e Exclua a regra sugerida e digite o seletor obrigatório. Certifique-se de digitar o nome do seletor junto com o identificador do Tipo de 
seletor. Por exemplo, se você estiver especificando uma ID, o nome do seletor deverá ter o prefixo “*”. 


e Para pesquisar um seletor específico, use a caixa de pesquisa na parte superior do painel. 
* Para renomear um seletor, clique no seletor e digite o nome necessário. 
* Para reorganizar os seletores, arraste-os até a posição desejada. 
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Para mover um seletor de uma origem para outra, arraste-o até a origem necessária no painel Origem. 

* Para duplicar um seletor na origem selecionada, clique com o botão direito do mouse no seletor e clique em Duplicar. 

e Para duplicar um seletor e adicioná-lo a uma consulta de mídia, clique com o botão direito do mouse no seletor, passe o mouse sobre 
Duplicar na consulta de mídia e escolha a consulta de mídia. 


Nota: a opção Duplicar na consulta de mídia está disponível somente quando a fonte do seletor selecionado contém consultas de 
mídia. Não é possível duplicar um seletor de uma fonte em uma consulta de mídia de outra fonte. 


Cópia e cola de estilos 
Agora é possível copiar estilos de um seletor e colá-lo em outro. Você pode copiar todos os estilos ou copiar apenas a categoria de estilos 
específica como Layout, Texto e Borda. 


Clique com o botão direito no mouse em um seletor e escolha entre as opções disponíveis: 


Selectors 


Filter CSS Rules | border-coliapse 
COMPUTED border-spadng 


a Background 


Go to Code background-color . 


Copy all Styles 

Copy Styles Copy Layout Styles 

Paste Styles Copy Text Styles 

Duplicate Copy Border Styles 

Duplicate into media query Copy Background Styles 
-mobileSidePadding Copy Animation/Transition Styles 
.mobileSidePadding Copy Other Styles 


Copiar estilos usando a CSS Designer 


* Se um seletor não tiver estilos, as opções Copiar e Copiar todos os estilos estarão desabilitadas. 


e A opção Colar estilos fica desabilitada para sites remotos que não podem ser editados. Mas a opção Copiar e Copiar todos os estilos 
fica disponível. 


« É possível colar estilos já existentes parcialmente em um seletor (sobreposição). A união 
de todos os seletores é colada. 


* Também é possível Copiar e colar estilos para diferentes integrações de arquivos da CSS — Estilos de importação, link e inline 


Para o início 


Definição de propriedades do CSS 


As propriedades são agrupadas nas seguintes categorias e representadas por ícones diferentes na parte superior do painel Propriedades: 


e Layout 
e Texto 
- Borda 
e Fundo 
e Outros (lista de propriedades “somente texto” e não propriedades com controles visuais) 
Nota: antes de editar as propriedades de um seletor CSS, identifique os elementos associados a ele usando a Inspeção inversa. Ao fazer isso, 


você pode avaliar se todos os elementos realçados na Inversão inversa realmente exigem alterações. Consulte o link para obter mais 
informações sobre a Inspeção inversa. 


Marque a caixa de seleção Exib. conj. para exibir apenas as propriedades de grupo. Para exibir todas as propriedades que você pode especificar 
para um seletor, desmarque a caixa de seleção Exib. conj. 
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FE Layout 


width : auto 

height : auto 

min-width : 0 px 

min-height : 0 px 

max-width : 500 px 

max-height : none 

display : inline 

box-sizing : content-box 

margin rthan 
0 px 0 px 


0 px 


Todas as propriedades 


mm E 


Im Layout 
max-width : 500 px 


(es Custom 
E 


Somente propriedades definidas 


Para definir uma propriedade, como width ou border - collapse, clique nas opções necessárias exibidas perto da propriedade no painel 
Propriedades. Para obter informações sobre como definir o plano de fundo do gradiente ou controles de caixa como margens, preenchimento e 
posição, consulte os links abaixo: 

e Definição de margens, preenchimento e posição 

e Aplicação de degradês ao fundo 

e Uso de layouts flexíveis de caixa 


As propriedades substituídas são indicadas em formato tachado. 
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Formato tachado para propriedades substituídas 


Definição de margens, preenchimento e posição 
Usando os controles de caixa no painel Propriedades da CSS Designer, é possível definir rapidamente as propriedades de margens, 


preenchimento e posição. Se preferir o código, você poderá especificar o código abreviado para margem e preenchimento nas caixas de edição 
rápida. 


margin : 14px21px 20px 30px 
14 px 
30 px Fotd 21 px 
20 px 


propriedade “margin” 


padding : 14px20px 
14 px 
20 px E) 20 px 
ES 


propriedade “padding” 


position * séabir 
RR Sida praise 
auto 
left: right 
1 px co japs 
bottom 


propriedade “position” 


Clique nos valores e digite o valor necessário. Se desejar que os quatro valores sejam iguais e alterados simultaneamente, clique no ícone de 
vínculo (*) no centro. 


A qualquer momento, você pode desativar (2) ou excluir (E) valores específicos, por exemplo, o valor da margem esquerda, e manter os valores 
das margens direita, superior e inferior. 


margin : 14px21px20px30px 
14 px 
| 
30 px Fat 21 px 
ot | 
20 px 


Ícones de desativar, excluir e vincular das margens 


Definição de propriedades de borda 
As propriedades de controle de bordas são organizadas em guias lógicas para ajudá-lo a exibir ou alterar as propriedades. 
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Se preferir o código, você poderá especificar o código abreviado para bordas e raio da borda na caixa de texto de edição rápida. 


Para especificar as propriedades de controle de bordas, defina a propriedade na guia “Todos os lados”. As outras guias são ativadas e as 
propriedades definidas na guia “Todos os lados” são refletidas nas bordas individuais. 


Ao alterar uma propriedade nas guias de borda individual, o valor da propriedade correspondente na guia “Todos os lados” muda para “indefinido” 
(valor padrão). 


No exemplo abaixo, a cor da borda estava definida como preto e foi alterada para vermelho na borda superior. 


HUGE BACKPACK SALE—$99! 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure— 


from day trips to extended excursions, and more. 


SHOP NOW mp 


border : medium solid £1D... 
o FEMEA 

width : medium 

style : solid 

color EE] ssvicrc 

border ns: medium solid £1D... 
Diolda DO 

width : medium 

style : solid 

color 2 E) ssorcic 

border : medium solid 1D... 
Oo tic 

width : medium 

style : solid 

color E E *1DICIC 


Cor da borda definida como preto em todos os lados 
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HUGE BACKPACK SALE—$99! 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure— 


from day trips to extended excursions, and more. 


SHOP NOW =p 


: Set Shorthand 


border 
O [Ev ED E 
width 
style 
color 


: medium 
: solid 


4] un 


border : Set Shorthand 
Did tl 

width : medium 

style : solid 

color 2 E) crime 


border : medium solid... 
O 0 uol dC] 

width : medium 

style : solid 

color BE sidicic 


O código inserido é baseado na configuração da preferência para o formato abreviado ou longo. 


Os controles de exclusão e desativação estão disponíveis para propriedades individuais como nas versões anteriores à Dreamweaver CC 2014. 
Agora é possível usar a tecla Delete ou desativar controles em nível de grupo de controle de fronteiras para aplicar essas ações a todas as 


propriedades. 


Set Shorthand 


border E 
D,0/(0 DO 
width [Top edium 
style : solid 
color E <e02121 
border : Set Shorthand 
Es n EEE 
width : medium 
style : solid 
color ME) se02121 
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Durante Inspeção, as guias são focadas com base na prioridade das guias “definidas”. A prioridade mais alta é para a guia “Todos os lados”, 


seguida por “Superior, “Direita”, “Inferior” e “Esquerda”. Por exemplo, se estiver definido um valor apenas para a borda superior, o modo 
computado direciona o foco à guia “Superior”, ignorando a guia “Todos os lados”, pois não havia um valor definido para “Todos os lados”. 


Desativação ou exclusão de propriedades 
O painel do CSS Designer permite desativar ou excluir cada propriedade. A seguinte captura de tela mostra os ícones de desativar (2) e excluir ( 
B) da propriedade width. Esses ícones ficam visíveis quando você passa o mouse na propriedade. 


traase-hesght 
mari | 


Desativar/excluir propriedade 


Atalhos do teclado 
Você pode adicionar ou excluir seletores e propriedades da CSS usando atalhos de teclado. Também é possível navegar entre os grupos de 
propriedades no painel Propriedades. 


Atalho Fluxo de trabalho 
CTRL + Alt +[Shift =] Adiciona Seletor (se o controle estiver na seção de seletor) 


Adiciona Seletor (se o controle estiver em qualquer lugar no 


CTRL + Al+ S SR 
aplicativo) 


CTRL + Alt +[Shift =] Adiciona Propriedade (se o controle estiver na seção de 


propriedade) 

CTRL + Alt P Adiciona Propriedade (se o controle estiver em qualquer lugar no 
aplicativo) 

Select + Delete Exclui o seletor, se ele estiver selecionado 


Salta entre as seções, enquanto estiver no subpainel de 


CTRL + Alt + (PgUp/PgDn) propriedades 


Para o início 


Identificação de elementos de página associados a um Seletor CSS (13.1) 


Geralmente, um único Seletor CSS é associado a vários elementos de página. Por exemplo, o texto no conteúdo principal de uma página, um 
cabeçalho, e um texto de rodapé podem ser associado ao mesmo Seletor CSS. Ao editar as propriedades do Seletor CSS, todos os elementos 
associados ao seletor serão afetados, incluindo aqueles que não serão alterados. 


Realce dinâmico ajuda a identificar todos os elementos associados a um Seletor CSS. Para alterar apenas um elemento ou alguns elementos, 
você pode criar um novo Seletor CSS para os elementos e editar as propriedades. 


Para identificar elementos de página associados a um seletor CSS, passe o mouse sobre o botão na Visualização dinâmica (com código Ativo 
“desligado”). O Dreamweaver realça os elementos associados com linhas pontilhadas. 
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8) O 


HETSETS IMCKETS CHARS 


fesuredProducts Text p 
festuredProductsText p 


HUGE BACKPACK SALE—$991 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure— 
from day trips to extended excursions, and more 


ErSuIs IaLKETS CHARS 
fosturedProductsText p 


festuredProducts Text p 


HUGE BACKPACK SALE= $091 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure — 
from day trips to extended excursions, and more 


Para remover o realce azul em torno de elementos, use o seletor novamente. 


Nota: a tabela a seguir resume as situações em que o Realce dinâmico não está disponível. 


Modo Código ativo Realce dinâmico exibido? 
Code ND ND 
Design ND ND 
aids LIGADO s 
nene (o botão está pressionado) Boo 
DESLIGADO Sim 


Desativação do realce dinâmico 
O Realce dinâmico está ativado por padrão. Para desativar o Realce dinâmico, clique nas opções de Visualização dinâmica na barra de 
ferramentas Documento, e clique em Desativar realce dinâmico. 


As publicações do Twitter! e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Layouts de Grade fluida (CC) 


Uso de layouts de Grade fluida 
Criação de um layout de Grade fluida 
Inserção de elementos de Grade fluida 
Elementos de aninhamento 


O layout de um site precisa responder e adaptar-se às dimensões do dispositivo em que é exibido. Os layouts de grade fluidos oferecem uma 
maneira visual de criar layouts diferentes que correspondam aos dispositivos em que o site é exibido. 


Por exemplo, o site será exibido em computadores, tablets e celulares. É possível usar layouts de grade fluidos para especificar layouts para cada 
um desses dispositivos. Dependendo de onde o site for exibido (computador, tablet ou celular), o layout correspondente é usado para exibir o 
site. 


Mais informações: Layout adaptativo versus Layout responsivo 


O lançamento da Dreamweaver 12.2 Creative Cloud inclui diversas melhorias para layouts de grade fluidos, como o suporte a elementos 
estruturais HTMLS5 e a edição facilitada de elementos aninhados. Para obter uma visão geral da lista completa de aprimoramentos, clique aqui. 


Nota: o modo de Inspeção para documentos de Grade fluida não está disponível no Dreamweaver 13.1 e posterior. 


Para o início 


Uso de layouts de Grade fluida 


Assista a este tutorial em vídeo para aprender a usar os Layouts de grade fluida: Explorando os layouts de grade fluida. 


Criação de um layout de Grade fluida Para o início 


1. Selecione Arquivo > Novo layout de Grade fluida. 


2. O valor padrão para o número de colunas na grade é exibido no centro do tipo de mídia. Para personalizar o número de colunas para um 
dispositivo, edite o valor conforme necessário. 


3. Para definir a largura de uma página de acordo com o tamanho da tela, defina o valor em porcentagem. 
4. Além disso, você pode mudar a largura da medianiz. A medianiz é o espaço entre duas colunas. 


5. Especifique as opções da CSS para a página. 
Ao clicar em Criar, você deverá especificar um arquivo da CSS. Você pode executar um dos seguintes procedimentos: 


e Crie um arquivo CSS. 
e Abra um arquivo CSS existente. 
e Especifique o arquivo CSS que está sendo aberto como um arquivo de Grade fluida da CSS. 


A grade fluida para celulares é exibida por padrão. Além disso, será exibido o painel Inserir para a grade fluida. Use as opções no painel 
Inserir para criar o layout. 
Para alternar para a criação de layout para outros dispositivos, clique no ícone correspondente nas opções abaixo da visualização de 
design. 

6. Salve o arquivo. Ao salvar o arquivo HTML, você deverá salvar os arquivos dependentes, como boilerplate.css e respond.min.js, em um 
local no computador. Especifique um local e clique em Copiar. 


O boilerplate.css é baseado no padrão estereotipado HTMLS5. Ele é um conjunto de estilos da CSS que garante a consistência no modo 
como sua página da Web é renderizada em vários dispositivos. O respond.min.js é uma biblioteca JavaScript que fornece suporte a 
consultas de mídia em versões antigas de navegadores. 


Para o início 


Inserção de elementos de Grade fluida 


O painel Inserir (Janela >Inserir) lista os elementos que você pode usar em um layout de Grade fluida. Ao inserir elementos, você pode optar por 
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inseri-los como elementos fluidos. 
1. No painel Inserir, selecione o elemento a ser inserido. 


2. Na caixa de diálogo exibida, selecione uma classe ou insira um valor para a ID. O menu Classe exibe as classes do arquivo CSS 
especificado na criação da página. 


3. Marque a caixa de seleção Inserir como um elemento fluido. 


4. Quando você seleciona um elemento inserido, as opções para ocultar, duplicar, bloquear ou excluir o Div são exibidas. Para Divs 
sobrepostos um em cima do outro, a opção para alternar Divs é exibida. 


: Dbservação Todas as tags Div da 
: Mwetamente na tag div "gndContaing 
isão suportadas 


Opção Rótulo Descrição 
Alterna o elemento selecionado no 
A Alternar Div momento com o elemento acima ou 
abaixo. 


Oculta o elemento. 


Para revelar um elemento, siga um 
destes procedimentos: 


Para revelar seletores de ID, altere a 
propriedade display no arquivo CSS 
para block. (display : block) 


B Ocultar 


Para revelar seletores de classe, remova 
a classe aplicada 
(hide <MediaType>) no código-fonte. 


Cc Mover para cima uma linha Move o elemento uma linha para cima. 


Duplica o elemento selecionado no 
D Duplicar momento. A CSS vinculada ao elemento 
também é duplicada. 


Para os seletores de ID, exclui o HTML 
ea Css. Para excluir apenas HTML, 

E Excluir pressione Excluir. 
Para os seletores de classe, apenas o 
HTML é excluído. 


Converte o elemento para um elemento 


F Bloquear e 
q absolutamente posicionado. 


Para os seletores de classe, o botão 
Alinhar funciona como um botão de 

G Alinhar margem zero. 
Para os seletores de ID, o botão Alinhar 
alinha o elemento na grade. 


Os elementos fluidos em uma página podem ser atravessados de modo cíclico usando as teclas de seta para esquerda e direita. 
Selecione o limite de elemento e pressione a tecla de seta. 


. Eq 
Elementos de aninhamento a 


Para aninhar elementos fluidos em outros elementos fluidos, certifique-se de que o foco esteja no elemento pai. Em seguida, insira o elemento 
filho obrigatório. 


A duplicação aninhada também é possível. A duplicação aninhada duplica o HTML (o elemento selecionado) e gera a CSS fluida relevante. Os 
elementos absolutos contidos no elemento selecionado são posicionados corretamente. Os elementos aninhados também podem ser duplicados 
usando o botão Duplicar. 
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Quando você exclui um elemento pai, a CSS correspondente ao elemento, seus filhos e o HTML associado são excluídos. Os elementos 
aninhados também podem ser excluídos usando o botão Excluir (atalho de teclado: Ctrl+Delete). 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Uso de widgets de interface do jQuery no Dreamweaver 


Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets do 
Spry existentes na página, você não pode adicionar novos. 


Os widgets são aplicativos da Web pequenos gravados em linguagens como DHTML e JavaScript que podem ser inseridos e executados em uma 
página da Web. Entre outros coisas, os widgets da Web ajudam a fornecer uma maneira de reproduzir as experiências do desktop em uma 
página da Web. 


Os widgets de interface do jQuery como acordeão, tabulações, seletor de datas, controle deslizante e preenchimento automático levam a 
experiência do desktop para a Web. 


Por exemplo, o widget Tabulações pode ser usado para copiar o recurso de tabulação das caixas de diálogo em aplicativos de desktop. 


Para o início 


Inserção de um widget do jQuery 


Quando você insere um widget do jQuery, os seguintes itens são adicionados automaticamente ao código: 


e Referências a todos os arquivos dependentes 
e Tag de script que contém a API do jQuery do widget. Os widgets adicionais são adicionados à mesma tag de script. 


Para obter mais informações sobre os widgets do jQuery, consulte hitp://jqueryui.com/demos/ 


Nota: para os efeitos do jQuery, a referência externa a jquery-1.8.24.min.js não será adicionada porque este arquivo será incluído 
automaticamente quando você adicionar um efeito. 


1. Verifique se o cursor está em um local da página onde você deseja inserir o widget. 
2. Selecione Inserir > Interface do jQuery e escolha o widget que deseja inserir. 


Se você usar o painel Inserir, os widgets estarão presentes na seção Interface do jQuery do painel Inserir. 


Quando você seleciona um widget do jQuery, as propriedades são exibidas no painel Propriedades. 


Você pode visualizar widgets do jQuery na Visualização dinâmica ou no navegador compatível com widgets do jQuery. 


Para o início 


Modificação de widgets do jQuery 
1. Selecione o widget que deseja modificar. 
2. No painel Propriedades, modifique as propriedades. 
Por exemplo, para adicionar uma tabulação adicional ao widget Tabulações, selecione o widget e clique em “+” no painel Propriedades. 


Tutorial de vídeo 
e Uso de widgets jQuery Mobile em páginas da Web no Dreamweaver 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Uso de efeitos do jQuery no Dreamweaver 


Os efeitos do Spry foram substituídos pelos efeitos do jQuery na Dreamweaver CC. Embora ainda possa modificar os efeitos do Spry existentes 
na página, você não pode adicionar novos. 


Adição de efeitos do jQuery 
Efeitos do jQuery com base no evento 
Remoção de efeitos do jQuery 


Para o início 


Adição de efeitos do jQuery 
1. Na visualização Design ou Código do documento do Dreamweaver, selecione o elemento ao qual você deseja aplicar um efeito do jQuery. 
2. Selecione Janelas > Comportamentos para abrir o painel Comportamentos. 
3. Clique em E, clique em Efeitos e clique no efeito desejado. 
O painel de personalização com as configurações do efeito selecionado é exibido. 


4. Especifique as configurações, como o elemento de destino ao qual o efeito deve ser aplicado, e a duração do efeito. 


O elemento de destino pode ser igual ao elemento selecionado inicialmente ou a um elemento diferente na página. Por exemplo, se desejar 
que os usuários cliquem em um elemento A para ocultar ou mostrar um elemento B, o elemento de destino é B. 


5. Para adicionar vários efeitos do jQuery, repita as etapas acima. 


Ao selecionar vários efeitos, o Dreamweaver aplica os efeitos na ordem em que são exibidos no painel Comportamentos. Para alterar a 
ordem dos efeitos, use as teclas de seta na parte superior do painel. 


O Dreamweaver insere automaticamente o código relevante no documento. Por exemplo, se você selecionar o efeito “Fade”, o seguinte código 
será inserido: 


e Referências de arquivos externos para os arquivos dependentes necessários para que os efeitos do jQuery funcionem: 


<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script 
src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script> 


e O seguinte código é aplicado ao elemento na tag de corpo: 

<li id="earthFrm" onclick="MM DW effectAppearFade($('gearthForms'),'show','fade',1000)"> Earth Forms</li> 
* Uma tag de script com o seguinte código é adicionada: 

<script type="text/javascript"> function MM DW effectAppearFade(obj, method, effect, speed) ( 


obj [method] (effect, (), speed); J</script> 


Para o início 


Efeitos do jQuery com base no evento 


Quando você aplica um efeito do jQuery, ele é atribuído ao evento onClick por padrão. Você pode alterar o evento de disparo do efeito usando 
o painel Comportamentos. 


1. Selecione o elemento de página obrigatório. 
2. No painel Janelas > Comportamentos, clique no ícone Mostrar eventos de grupo. 


3. Clique na linha que corresponde ao efeito que está atualmente aplicado. Observe que a primeira coluna se transforma em uma lista 
suspensa que fornece uma lista de eventos a serem escolhidos. 


4. Clique no evento obrigatório. 
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Remoção de efeitos do jQuery Para o início 


1. Selecione o elemento de página obrigatório. 
O painel Comportamentos lista todos os efeitos aplicados atualmente ao elemento de página selecionado. 


2. Clique no efeito que deseja excluir e clique em =. 


As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Uso de auxílios visuais para layout 


Definição de réguas 

Definição de guias de layout 
Uso de guias com modelos 

Uso da grade de layout 

Uso de uma imagem de decalque 


aa E Re 
Definição de réguas ara o início 


As réguas ajudam a avaliar, organizar e planejar o layout. Elas podem aparecer nas bordas esquerda e superior da página, marcadas em pixels, 
polegadas ou centímetros. 
e Para ativar e desativar as réguas, seleciona Exibir > Réguas > Mostrar. 
e Para alterar a origem, arraste o ícone de origem da régua E] (no canto superior esquerdo da Visualização de design da janela Documento) 
para qualquer lugar da página. 
e Para redefinir a origem para sua posição padrão, selecione Exibir > Réguas > Redefinir origem. 
e Para alterar a unidade de medida, selecione Exibir > Réguas e, em seguida, selecione Pixels, Polegadas ou Centímetros. 


Definição de guias de layout Para o início 


As guias são linhas que você arrasta das réguas para o documento. Elas ajudam a colocar e alinhar os objetos com mais precisão. Você também 
pode usar guias para medir o tamanho dos elementos de página ou emular as dobras (áreas visíveis) dos navegadores da Web. 


Para alinhar os elementos, encaixe-os nas guias e encaixe-as nos elementos. (Os elementos devem ter posição absoluta para que o recurso de 
encaixe funcione.) Você também pode bloquear as guias para impedir que elas sejam movidas acidentalmente por outro usuário. 


Criação de uma guia horizontal ou vertical 
1. Arraste na régua correspondente. 


2. Posicione a guia na janela Documento e libere o botão do mouse (reposicione a guia arrastando-a novamente). 
Nota: Por padrão, as guias são registradas como medições de pixel absolutas no lado superior ou esquerdo do documento, e são exibidas 
em relação à origem da régua. Para registrar a guia como porcentagem, pressione a tecla Shift enquanto cria ou move a guia. 


Mostrar ou ocultar guias 
*& Selecione Exibir > Guias > Mostrar guias. 


Encaixe dos elementos nas guias 
e Para encaixar os elementos nas guias, selecione Exibir > Guias > Encaixar nas guias. 


e Para encaixar as guias nos elementos, selecione Exibir > Guias > Encaixe das guias nos elementos. 
Nota: Quando você redimensiona elementos, como elementos com posição absoluta (elementos PA), tabelas e imagens, os elementos 
redimensionados se encaixam nas guias. 


Bloqueio e desbloqueio de todas as guias 
“ Selecione Exibir > Guias > Bloquear guias. 


Visualização e movimentação de uma guia para uma posição específica 
1. Mantenha o ponteiro do mouse sobre a guia para visualizar sua posição. 
2. Clique duas vezes na guia. 
3. Digite a nova posição na caixa de diálogo Mover guia e clique em OK. 


Visualização da distância entre guias 
“& Pressione Control (Windows) ou Command (Macintosh) e mantenha o ponteiro do mouse em qualquer lugar entre as duas guias. 
Nota: A unidade de medida é a mesma utilizada nas réguas. 


Emulação da dobra (área visível) de um navegador da Web 
*& Selecione Exibir > Guias e, em seguida, selecione um tamanho de navegador predefinido no menu. 
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Remoção de uma guia 
*& Arraste a guia para fora do documento. 


Alteração das configurações da guia 

“& Selecione Exibir > Guias > Editar guias, defina as seguintes opções e clique em OK. 

Cor da guia Especifica a cor das linhas da guia. Clique na amostra de cores e selecione uma cor no seletor de cores ou digite um número 
hexadecimal na caixa de texto. 

Cor da distância Especifica a cor das linhas que aparecem como indicadores de distância quando você mantém o ponteiro do mouse entre as 
guias. Clique na amostra de cores e selecione uma cor no seletor de cores ou digite um número hexadecimal na caixa de texto. 

Mostrar guias Torna as guias visíveis na Visualização de design. 

Encaixar nas guias Faz com que os elementos da página se encaixem nas guias quando você move os elementos pela página. 
Bloquear guias Bloqueia as guias no lugar. 

Encaixe das guias nos elementos Encaixa as guias nos elementos na página enquanto elas são arrastadas. 

Limpar tudo Limpa todas as guias da página. 


Si 
Uso de guias com modelos ia dd 


Quando as guias são adicionadas a um modelo do Dreamweaver, todas as instâncias do modelo herdam as guias. No entanto, as guias nas 
instâncias do modelo são tratadas como regiões editáveis; portanto, os usuários podem modificá-las. As guias modificadas nas instâncias do 
modelo são restauradas para seu local original sempre que a instância é atualizada com o modelo mestre. 


Você também pode adicionar suas próprias guias às instâncias de um modelo. As guias adicionadas desta maneira não são sobregravadas 
quando a instância do modelo é atualizada com o modelo mestre. 


Para o início 


Uso da grade de layout 


A grade exibe um sistema de linhas horizontal e vertical na janela Documento. Ela é útil para posicionar os objetos com precisão. Você pode 
fazer com que os elementos de página com posição absoluta se encaixem automaticamente na grade enquanto os move, além de alterar a grade 
ou controlar o comportamento de encaixe especificando configurações da grade. O encaixe funcionar quer a grade esteja ou não visível. 


Mostrar ou ocultar a grade 
* Selecione Exibir > Grade > Mostrar grade. 


Ativação ou desativação do encaixe 
* Selecione Exibir > Grade > Encaixar na grade. 


Alteração das configurações da grade 
1. Selecione Exibir > Grade > Configurações da grade. 


2. Defina as opções e clique em OK para aplicar as alterações. 
Cor Especifica a cor das linhas da grade. Clique na amostra de cores e selecione uma cor no seletor de cores ou digite um número 
hexadecimal na caixa de texto. 


Mostrar grade Torna a grade visível na Visualização de design. 

Encaixar na grade Faz com que os elementos da página se encaixem nas linhas da grade. 

Espaçamento Controla a distância entre as linhas de grade. Digite um número e selecione Pixels, Polegadas ou Centímetros no menu. 
Display Especifica se as linhas de grade aparecerão como linhas ou pontos. 


Nota: Se Mostrar grade não estiver selecionado, a grade não aparecerá no documento e nenhuma alteração ficará visível. 


a Para o início 
Uso de uma imagem de decalque Ei 


Você pode usar uma imagem de decalque como uma guia para recriar um design de página criado em um aplicativo gráfico como o Adobe 
Freehand ou Fireworks. 


Uma imagem de decalque é uma imagem JPEG, GIF ou PNG colocada no plano de fundo da janela Documento. Você pode ocultar a imagem, 
definir sua opacidade e alterar sua posição. 


A imagem de decalque estará visível somente no Dreamweaver. Você não poderá vê-la quando estiver visualizando a página em um navegador. 
Quando a imagem de decalque estiver visível, a cor e a imagem de fundo real da página não estarão visíveis na janela Documento. No entanto, 
elas estarão visíveis quando a página for visualizada em um navegador. 


Posicionamento de uma imagem de decalque na janela Documento 
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1. Siga um destes procedimentos: 
* Selecione Exibir > Imagem de decalque > Carregar. 
e Selecione Modificar > Propriedades da página e clique em Procurar (ao lado da caixa de texto Imagem de decalque). 


2. Na caixa de diálogo Selecionar origem da imagem, selecione um arquivo de imagem e clique em OK. 


3. Na caixa de diálogo Propriedades da página, especifique a transparência da imagem arrastando o controle deslizante Transparência da 
imagem e clique em OK. 


Para alternar para outra imagem de decalque ou alterar a transparência da imagem de rastreamento atual a qualquer momento, selecione 
Modificar > Propriedades da página. 


Mostrar ou ocultar a imagem de decalque 
“& Selecione Exibir > Imagem de decalque > Mostrar. 


Alteração da posição de uma imagem de decalque 

“& Selecione Exibir > Imagem de decalque > Ajustar posição. 
e Para especificar precisamente a posição da imagem de decalque, digite os valores de coordenada nas caixas de texto X e Y. 
e Para mover a imagem 1 pixel por vez, use as teclas de seta. 


e Para mover a imagem 5 pixels por vez, pressione Shift e uma tecla de seta. 


Redefinição da posição da imagem de decalque 
*& Selecione Exibir > Imagem de decalque > Redefinir posição. 
A imagem de decalque retorna ao canto superior esquerdo da janela Documento (0,0). 


Alinhamento da imagem de decalque a um elemento selecionado 
1. Selecione um elemento na janela Documento. 
2. Selecione Exibir > Imagem de decalque > Alinhar com Seleção. 


O canto superior esquerdo da imagem de decalque é alinhado ao canto superior esquerdo do elemento selecionado. 


Mais tópicos da Ajuda 


(69) ex-ne-sa ] 


Avisos legais | Política de privacidade on-line 
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Uso de quadros 


Como funcionam os quadros e os conjuntos de quadros 

Decidir se os quadros devem ou não ser usados 

Conjuntos de quadros aninhados 

Trabalho com conjuntos de quadros na janela Documento 

Criar quadros e conjuntos de quadros 

Seleção de quadros e conjuntos de quadros 

Abertura de um documento em um quadro 

Salvar arquivos de quadro e conjunto de quadros 

Exibir e definir propriedades e atributos de quadro 

Visualização e definição das propriedades do conjunto de quadros 
Controle do conteúdo do quadro com links 

Fornecimento de conteúdo para navegadores sem suporte a quadros 
Uso de comportamentos JavaScript com quadros 


é E Para o início 
Como funcionam os quadros e os conjuntos de quadros 
Um quadro é uma região de uma janela do navegador que pode exibir um documento HTML independentemente do que está sendo exibido no 
restante da janela do navegador. Os quadros permitem dividir uma janela do navegador em várias regiões, cada uma delas podendo exibir um 
documento HTML diferente. Geralmente, um quadro exibe um documento que contém controles de navegação, enquanto outro quadro exibe um 
documento com o conteúdo. 


Um conjunto de quadros é um arquivo HTML que define o layout e as propriedades de um conjunto de quadros, incluindo o número de quadros, o 
tamanho e o posicionamento dos quadros, e o URL da página que aparece inicialmente em cada quadro. O arquivo de conjunto de quadros 
propriamente não possui conteúdo HTML a ser exibido em um navegador, a não ser a seção noframes. O arquivo de conjunto de quadros 
simplesmente fornece informações para o navegador sobre como deve ser a aparência de um conjunto de quadros e quais documentos devem 
aparecer nele. 


Para visualizar um conjunto de quadros em um navegador, digite o URL do arquivo do conjunto de quadros. O navegador abrirá os documentos 
relevantes a serem exibidos nos quadros. O arquivo do conjunto de quadros de um site é geralmente chamado de index.html, a fim de que ele 
seja exibido por padrão caso um visitante não especifique um nome de arquivo. 


O exemplo a seguir mostra um layout de quadro composto por três quadros: um quadro estreito no lado que contém uma barra de navegação, um 
quadro ao longo da parte superior contendo o logotipo e o título do site, e um quadro grande que ocupa o restante da página e possui o conteúdo 
principal. Cada um desses quadros exibe um documento HTML separado. 
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ROWING CLUB 


The mission of Steel City Rowing is 

to foster rowing for people of all ages. 
Our focus is for each individual to reach 
their maximum potential by encouraging 
teamwork, dedication and hard work. 

The goal for some people becomes national 
and international competition, the 
Olympics. 


Neste exemplo, o documento exibido no quadro superior nunca é alterado quando o visitante navega no site. A barra de navegação de quadro 
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lateral contém links; se você clicar em um desses links, o conteúdo do quadro principal é alterado, mas o conteúdo do quadro lateral permanece 
estático. O quadro de conteúdo principal à direita exibe o documento apropriado para o link que o visitante clica à esquerda. 


Um quadro não é um arquivo. É fácil considerar o documento que aparece atualmente em um quadro como parte integrante do quadro, mas, na 
verdade, o documento não faz parte do quadro. O quadro é um contêiner que retém o documento. 


Nota: Uma “página” se refere a um único documento HTML ou ao conteúdo inteiro de uma janela de documento em um dado momento, mesmo 
que vários documentos HTML apareçam simultaneamente. A frase “uma página que usa quadros”, por exemplo, geralmente se refere a um 
conjunto de quadros e aos documento que aparecem inicialmente nesses quadros. 

Um site que aparece em um navegador como uma página única composta de três quadros consiste, na verdade, de pelo menos quatro 
documentos HTML: o arquivo de conjunto de quadros mais os três documentos que possuem o conteúdo que aparece inicialmente nos quadros. 
Quando você projeta uma página usando conjuntos de quadros no Dreamweaver, deve salvar cada um desses quatro arquivos para que a página 
funcione corretamente no navegador. 


Para obter informações mais abrangentes sobre Quadros, consulte o site da Thierry Koblentz em www.tjkdesign.com/articles/framesy/. 


E E FRRENÇ 
Decidir se os quadros devem ou não ser usados RR 


A Adobe não recomenda o uso de quadros para layout de página da Web. Algumas das desvantagens do uso de quadros incluem: 
e O alinhamento gráfico preciso dos elementos em quadros diferentes podem ser difícil. 
e O teste da navegação pode ser demorado. 


« Os URLs das páginas individuais com quadro não aparecem nos navegadores; portanto, pode ser difícil para um visitante indicar uma 
página específica (a menos que você forneça um código de servidor que os permita carregar uma versão com quadro de uma página) 


Para obter informações completas com os motivos pelos quais você não deve usar quadros, consulte a explicação de Gary White em 
http://apptools.com/rants/framesevil.php. 


Os quadros são mais utilizados para navegação, caso decida usá-los. Um conjunto de quadros geralmente inclui um quadro que contém uma 
barra de navegação e outro quadro para exibir as páginas de conteúdo principais. Usar os quadros desse modo tem algumas vantagens: 


e O navegador de um visitante não precisa recarregar os gráficos relacionados a navegação em cada página. 


e Cada quadro tem sua própria barra de rolagem (se o conteúdo for muito grande para caber em uma janela), portanto, um visitante pode 
rolar os quadros de forma independente. Por exemplo, um visitante que rola para a parte inferior de uma página de conteúdo longa em um 
quadro não precisa rolar novamente para a parte superior a fim de usar a barra de navegação, caso ela esteja em outro quadro. 


Em muitos casos, é possível criar uma página da Web sem quadros que atinja os mesmos objetivos de um conjunto de quadros. Por exemplo, se 
você deseja que uma barra de navegação apareça no lado esquerdo da página, substitua a página por um conjunto de quadros ou apenas inclua 
a barra de navegação em cada página do site. (O Dreamweaver ajuda você a criar várias páginas que usam o mesmo layout.) O exemplo a 
seguir mostra um design de página com um layout semelhante ao de um quadro, mas que não usa quadros. 
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Os sites criados de modo inadequado usam quadros desnecessariamente, com um conjunto de quadros que recarrega o conteúdo dos quadros 
de navegação cada vez que o visitante clica em um botão de navegação. Quando os quadros são bem utilizados (por exemplo, para manter os 
controles de navegação estáticos em um quadro e, ao mesmo tempo, permitir que o conteúdo de outro quadro seja alterado), eles podem ser 
muito úteis para um site. 


and international competition, the 
Olympics. 


Nem todos os navegadores oferecem um suporte satisfatório aos quadros, dificultando o uso dos quadros pelos visitantes com dificuldades de 
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navegação. Portanto, se você usar quadros, sempre forneça uma seção noframes no conjunto de quadros para os visitantes que não podem 
visualizá-los. Você também poderia fornecer um link explícito para uma versão sem quadros do site. 


Para obter informações mais abrangentes sobre Quadros, consulte o site da Thierry Koblentz em www.tjkdesign.com/articles/framesy/. 


é - Para o início 
Conjuntos de quadros aninhados 
Um conjunto de quadros dentro de outro conjunto de quadros é chamado de conjunto de quadros aninhado. Um arquivo de conjunto de quadro 
pode conter vários conjuntos de quadros aninhados. A maioria das páginas da Web que usa quadros está, na verdade, usando quadros 
aninhados, e a maioria dos conjuntos de quadros predefinidos no Dreamweaver também usa o aninhamento. Qualquer conjunto de quadros em 
que haja diferentes números de quadros em diferentes linhas ou colunas requer um conjunto de quadros aninhado. 


Por exemplo, o layout de quadro mais comum tem um quadro na linha superior (onde aparece o logotipo da empresa) e dois quadros na linha 
inferior (um quadro de navegação e um quadro de conteúdo). Esse layout requer um conjunto de quadros aninhado: um conjunto de quadros de 
duas linhas, com um conjunto de quadros de duas colunas aninhado na segunda linha. 


wi STEEL CITY a 
ROWING CLUB — 


The mission of Steel City Rowing is 


to foster rowing for people of all ages. 
Our focus is for each individual to reach 
their maximum potential by encouraging 
teamwork, dedication and hard work. 

The goal for some people becomes national 
and international competition, the 
Olympics. 


A. Conjunto de quadros principal B. O quadro de menu e o quadro de conteúdo estão aninhados dentro do conjunto de quadros principal. 


O Dreamweaver cuida do aninhamento de conjunto de quadros quando necessário. Se você usar as ferramentas de divisão de quadros do 
Dreamweaver, não precisará se preocupar com quais quadros estão aninhados e quais não estão. 


Há duas maneiras de aninhar conjuntos de quadros em HTML: o conjunto de quadros interno pode ser definido no mesmo arquivo que o conjunto 
de quadros externo ou em um arquivo separado. Cada conjunto de quadros predefinido do Dreamweaver define todos os seus conjuntos de 
quadros no mesmo arquivo. 


Os dois tipos de aninhamento produzem os mesmos resultados visuais; não é fácil dizer, sem examinar o código, qual tipo de aninhamento está 
sendo usado. A situação mais provável em que um arquivo de conjunto de quadros externo precisará ser usado no Dreamweaver é quando você 
utiliza o comando Abrir no quadro para abrir um arquivo de conjunto de quadros dentro de um quadro. Isso possivelmente resultará em problemas 
na definição de alvos para links. É geralmente mais simples manter todos os conjuntos de quadros definidos em um único arquivo. 


Para o início 


Trabalho com conjuntos de quadros na janela Documento 


O Dreamweaver permite que você visualize e edite todos os documentos associados a um conjunto de quadros em uma janela Documento. Com 
essa abordagem, será possível ver aproximadamente como as páginas com quadros aparecerão em um navegador enquanto você as edita. No 
entanto, alguns aspectos dessa abordagem pode ser confusa até que você se acostume com elas. Em particular, cada quadro exibe um 
documento HTML separado. Mesmo se os documentos estiverem vazios, você deverá salvá-los para que possa visualizá-los (pois o conjunto de 
quadros só poderá ser visualizado com precisão se contiver o URL de um documento a ser exibido em cada quadro). 


Para garantir que o conjunto de quadros aparecerá corretamente nos navegadores, siga estas etapas gerais: 


1. Crie o conjunto de quadros e especifique um documento para que ele apareça em cada quadro. 


2. Salve cada arquivo que aparecerá em um quadro. Lembre-se de que cada quadro exibe um documento HTML separado e que você deve 
salvar cada documento, juntamente com o arquivo de conjunto de quadros. 


3. Defina as propriedades de cada quadro e do conjunto de quadros (incluindo a nomeação de cada quadro, a definição das opções de 
rolagem e não rolagem). 


4. Defina a propriedade Alvo no Inspetor de propriedades para todos os links, a fim de que o conteúdo vinculado apareça na área correta. 


Para o início 


Criar quadros e conjuntos de quadros 


Há duas maneiras de criar um conjunto de quadros no Dreamweaver: você pode selecionar entre vários conjuntos de quadros predefinidos ou 
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pode criá-lo por sua própria conta. 


A escolha de um conjunto de quadros predefinido configura todos os quadros e conjuntos de quadros necessários para criar o layout e é a 
maneira mais fácil de criar rapidamente um layout baseado em quadro. Você pode inserir um conjunto de quadros predefinido somente na 
Visualização de design da janela Documento. 


Também é possível criar seu próprio conjunto de quadros no Dreamweaver adicionando “divisores” à janela Documento. 


Antes de criar um conjunto de quadros ou trabalhar com quadros, torne as bordas do quadro visíveis na Visualização de design da janela 
Documento selecionando Exibir > Auxílios visuais > Bordas de quadro. 


Criação de um conjunto de quadros predefinido e exibição de um documento existente em um quadro 
1. Posicione o ponto de inserção em um documento e siga um destes procedimentos: 


e Escolha Inserir > HTML > Quadros e selecione um conjunto de quadros predefinido. 
e Na categoria Layout do painel Inserir, clique na seta suspensa no botão Quadros e selecione um conjunto de quadros predefinido. 


Os ícones de conjunto de quadros oferecem uma representação visual de cada conjunto de quadros conforme aplicados ao documento 
atual. A área azul de um ícone de conjunto de quadros representa o documento atual e as áreas brancas representam os quadros que 
exibirão outros documentos. 


2. Se você tiver configurado o Dreamweaver para solicitar atributos de acessibilidade de quadro, selecione um quadro no menu pop-up, digite 
um nome para o quadro e clique em OK. (Para os visitantes que usam leitores de tela, o leitor de tela lerá esse nome quando encontrar o 


quadro em uma página.) 
Nota: Se você clicar em OK sem digitar um novo nome, o Dreamweaver atribuirá ao quadro um nome que corresponde à sua posição 
(quadro esquerdo, quadro direito etc.) no conjunto de quadros. 
Nota: Se você pressionar Cancelar, o conjunto de quadros aparecerá no documento, mas o Dreamweaver não associará tags ou atributos 
de acessibilidade a ele. 

Selecione Janela > Quadros para visualizar um diagrama dos quadros que você está nomeando. 


Criação de um conjunto de quadros predefinido vazio 
1. Selecione Arquivo > Novo. 
Na caixa de diálogo Novo documento, selecione a categoria Página da amostra. 
Selecione a pasta Conjunto de quadros na coluna Pasta de amostra. 
Selecione um conjunto de quadros na coluna Página de amostra e clique em Criar. 


RR wWN 


Se você tiver ativado os atributos de acessibilidade de quadro em Preferências, a caixa de diálogo Atributos de acesso a tag frame 
aparecerá. Preencha a caixa de diálogo de cada quadro e clique em OK. 

Nota: Se você pressionar Cancelar, o conjunto de quadros aparecerá no documento, mas o Dreamweaver não associará tags ou atributos 
de acessibilidade a ele. 


Criação de um conjunto de quadros 
* Selecione Modificar > Conjunto de quadros e, em seguida, selecione um item de divisão (como Dividir quadro à esquerda ou Dividir quadro à 


direita) no submenu. 
O Dreamweaver divide a janela em quadros. Se houver um documento aberto, ele aparecerá em um dos quadros. 


Divisão de um quadro em quadros menores 
* Para dividir o quadro onde está o ponto de inserção, selecione um item de divisão no submenu Modificar > Conjunto de quadros. 


e Para dividir um quadro ou conjunto de quadros vertical ou horizontalmente, arraste uma borda de quadro da borda para o meio da 
Visualização de design. 


e Para dividir um quadro usando uma borda de quadro que não esteja na borda da Visualização de design, mantenha pressionada a tecla Alt 
(Windows) ou mantenha pressionada a tecla Option (Macintosh) enquanto arrasta uma borda de quadro. 


e Para dividir um quadro em quatro, arraste uma borda de quadro de um dos cantos da Visualização de design para o meio de um quadro. 


Para criar três quadros, comece com dois quadros e divida um deles. Não é fácil mesclar dois quadros adjacentes sem editar o código 
do conjunto de quadros. Portanto, transformar quatro quadros em três é mais difícil do que transformar dois quadros em três. 


Exclusão de um quadro 

“& Arraste uma borda de quadro para fora da página ou para uma borda do quadro pai. 

Se houver algum conteúdo não salvo de um documento em um quadro que está sendo removido, o Dreamweaver solicitará que você salve o 
documento. 


Nota: Não é possível remover totalmente um conjunto de quadros arrastando as bordas. Para remover um conjunto de quadros, feche a janela 
Documento que o exibe. Se o arquivo de conjunto de quadros tiver sido salvo, exclua o arquivo. 


Redimensionamento de um quadro 
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e Para definir tamanhos aproximados de quadros, arraste as bordas de quadro na Visualização de design da janela Documento. 


e Para especificar tamanhos exatos e a quantidade de espaço que o navegador alocará para uma linha ou coluna de quadros quando o 
tamanho da janela do navegador não permitir que os quadros sejam exibidos em tamanho integral, use o Inspetor de propriedades. 


Para o início 


Seleção de quadros e conjuntos de quadros 


Para alterar as propriedades de um quadro ou conjunto de quadros, comece selecionando o quadro ou conjunto de quadros a ser alterado. Você 
pode selecionar um quadro ou conjunto de quadros na janela Documento ou usando o painel Molduras. 


O painel Molduras oferece uma representação visual dos quadros em um conjunto de quadros. Ele mostra a hierarquia da estrutura do conjunto 
de quadros de uma maneira que pode não ser visível na janela Documento. No painel Molduras, uma borda muito espessa envolve cada conjunto 
de quadros; cada quadro é contornado por uma linha cinza fina e é identificado por um nome de quadro. 


MOLDURAS 


topFrame 


leftFrame mainFrame 


Na Visualização de design da janela Documento, quando um quadro é selecionado, suas bordas são contornadas com uma linha pontilhada. 
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Quando um conjunto de quadros é selecionado, todas as bordas dos quadros do conjunto de quadros são contornadas com uma linha pontilhada 
clara. 


Nota: O posicionamento do ponto de inserção em um documento exibido em um quadro não é o mesmo que selecionar um quadro. Há várias 
operações (como definir as propriedades do quadro) nas quais você deve selecionar um quadro. 


Seleção de um quadro ou conjunto de quadros no painel Molduras 
1. Selecione Janela > Quadros. 
2. No painel Molduras: 


* Para selecionar um quadro, clique no quadro. (Um contorno de seleção aparece em torno do quadro no painel Molduras e na 
Visualização de design da janela Documento). 


e Para selecionar um conjunto de quadros, clique na borda que envolve o conjunto de quadros. 


Seleção de um quadro ou conjunto de quadros na janela Documento 

e Para selecionar um quadro, clique com as teclas Shift e Alt pressionadas (Windows) ou com as teclas Option e Shift (Macintosh) em um 
quadro na Visualização de design. 

e Para selecionar um conjunto de quadros, clique em uma das bordas de quadro internas do conjunto de quadros na Visualização de design. 
(As bordas de quadro devem estar visíveis para que isso possa ser feito. Selecione Exibir > Auxílios visuais > Bordas de quadro para tornar 
as bordas visíveis, caso elas não estejam.) 

Nota: É geralmente mais fácil selecionar conjuntos de quadros no painel Molduras do que na janela Documento. Para obter mais 
informações, consulte os tópicos anteriores. 


Seleção de outro quadro ou conjunto de quadros 
e Para selecionar o quadro ou conjunto de quadros seguinte ou anterior no mesmo nível hierárquico da seleção atual, pressione Alt+Seta à 
esquerda ou Alt+Seta à direita (Windows) ou Command+Seta à esquerda ou Command+Seta à direita (Macintosh). Usando essas teclas, 
você pode percorrer os quadros e conjuntos de quadros na ordem em que estão definidos no arquivo de conjunto de quadros. 


e Para selecionar o conjunto de quadros pai (o conjunto de quadros que contém a seleção atual), pressione Alt+Seta para cima (Windows) ou 
Command+Seta para cima (Macintosh). 


e Para selecionar o primeiro quadro ou conjunto de quadros filho do conjunto de quadros selecionado (ou seja, o primeiro na ordem em que 
eles estão definidos no arquivo de conjunto de quadros), pressione Alt+Seta para baixo (Windows) ou Command+Seta para baixo 
(Macintosh). 


Para o início 
Abertura de um documento em um quadro ii 


Você pode especificar o conteúdo inicial de um quadro inserindo o novo conteúdo em um documento vazio em um quadro ou abrindo um 
documento existente em um quadro. 


1. Coloque o ponto de inserção em um quadro. 

2. Selecione Arquivo > Abrir no quadro. 

3. Selecione um documento a ser aberto no quadro e clique em OK (Windows) ou Escolher (Macintosh). 
4 


. (Opcional) Para tornar este documento o padrão a ser exibido no quadro quando o conjunto de quadros é aberto em um navegador, salve o 
conjunto de quadros. 


E « P, iníci 
Salvar arquivos de quadro e conjunto de quadros RR 


Para que você possa visualizar um conjunto de quadros em um navegador, salve o arquivo de conjunto de quadros e todos os documentos a 
serem exibidos nos quadros. Você pode salvar cada arquivo de conjunto de quadros e um documento com quadro ou salvar o arquivo de conjunto 
de quadros e todos os documentos que aparecem nos quadros simultaneamente. 


Nota: Quando você usa as ferramentas visuais do Dreamweaver para criar um conjunto de quadros, cada novo documento exibido em um 
quadro recebe um nome de arquivo padrão. Por exemplo, o primeiro arquivo de conjunto de quadros é nomeado como 
ConjuntodequadrosSemTítulo-1, enquanto o primeiro documento de um quadro é nomeado como QuadroSemTítulo-1. 


Salvar um arquivo de conjunto de quadros 
* Selecione o conjunto de quadros no painel Molduras ou na janela Documento. 
e Para salvar o arquivo de conjunto de quadros, selecione Arquivo > Salvar conjunto de quadros. 


e Para salvar o arquivo de conjunto de quadros como um novo arquivo, selecione Arquivo > Salvar conjunto de quadros como. 


Nota: Se o arquivo de conjunto de quadros não tiver sido salvo, esses dois comandos serão equivalentes. 


Salvar um documento que aparece em um quadro 
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*& Clique no quadro, selecione Arquivo > Salvar quadro ou Arquivo > Salvar quadro como. 


Salvar todos os arquivos associados a um conjunto de quadros 

* Selecione Arquivo > Salvar todos os quadros. 

Esse procedimento salva todos os documentos abertos no conjunto de quadros, incluindo o arquivo de conjunto de quadros e todos os 
documentos com quadro. Se o arquivo de conjunto de quadros ainda não tiver sido salvo, uma borda espessa aparecerá em torno do conjunto de 
quadros (ou o quadro não salvo) na Visualização de design e você poderá selecionar um nome de arquivo. 


Nota: Se você usou Arquivo > Abrir no quadro para abrir um documento no quadro, ao salvar o conjunto de quadros, o documento que você 
abriu no quadro se tornará o documento padrão a ser exibido nesse quadro. Caso não queira que o documento seja o padrão, não salve o 
arquivo de conjunto de quadros. 


ai ss : P iníci 
Exibir e definir propriedades e atributos de quadro iii 
Use o Inspetor de propriedades para visualizar e definir a maioria das propriedades de quadro, incluindo bordas, margens e informações que 
especifiquem se as barras de rolagem aparecerão nos quadros. Se você definir uma propriedade de quadro, a configuração dessa propriedade 
será substituída em um conjunto de quadros. 


Talvez você também precise definir alguns atributos de quadro, como o atributo de título (que não é o mesmo que o atributo de nome), para 
melhorar a acessibilidade. Você pode ativar a opção de criação de acessibilidade para quadros a fim de definir atributos ao criar quadros ou pode 
definir atributos após inserir um quadro. Para editar atributos de acessibilidade para um quadro, use o Inspetor de tags para editar diretamente o 
código HTML. 


Visualização ou definição de propriedades de quadro 
1. Selecione um quadro seguindo um destes procedimentos: 


e Mantenha pressionada a tecla Alt enquanto clica (Windows) ou mantenha pressionadas a teclas Shift e Option enquanto clica 
(Macintosh) em um quadro na Visualização de design da janela Documento. 


e Clique em um quadro no painel Molduras (Janela > Quadros). 


2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expansão, no canto inferior direito, para exibir todas as 
propriedades de quadro. 


3. Defina as opções do Inspetor de propriedades de quadro. 
Moldura O nome usado pelo atributo target de um link ou por um script para fazer referência ao quadro. Um nome de quadro deve ser 
uma única palavra. São permitidos sublinhados ( ), mas não são permitidos hífens (-), pontos (.) e espaços. Um nome de quadro deve 
iniciar com uma letra (e não com números). Os nomes de quadro diferenciam minúsculas de maiúsculas. Não use termos que são palavras 
reservadas em JavaScript (por exemplo, top ou navigator) como nomes de quadro. 
Para fazer com que um link altere o conteúdo de outro quadro, você deve atribuir um nome ao quadro de destino. Para facilitar a criação 
de links entre quadros posteriormente, atribua nomes a cada quadro ao criá-los. 


Origem Especifica o documento de origem a ser exibido no quadro. Clique no ícone de pasta desejado e selecione um arquivo. 


Rolar Especifica se as barras de rolagem aparecem no quadro. Se você definir esta opção como Padrão, um valor não será definido para 
o atributo correspondente, permitindo que cada navegador use seu valor padrão. A maioria dos navegadores assume Automático como 
valor padrão, o que significa que as barras de rolagem aparecerão apenas quando não houver espaço suficiente em uma janela de 
navegador para exibir o conteúdo completo do quadro atual. 


Sem redimensionamento Impede que os visitantes arrastem as bordas de quadro para redimensionar o quadro em um navegador. 
Nota: Você sempre poderá redimensionar os quadros no Dreamweaver; esta opção se aplica apenas aos visitantes que visualizam os 
quadros em um navegador. 


Bordas Mostra ou oculta as bordas do quadro atual quando ele é visualizado em um navegador. A seleção da opção Bordas em um 
quadro substitui as configurações de borda do conjunto de quadros. 


As opções de borda são Sim (mostrar bordas), Não (ocultar bordas) e Padrão. A maioria dos navegadores mostra as bordas, por padrão, a 
menos que o conjunto de quadros pai esteja com as opções de borda definidas para Não. Uma borda fica oculta somente quando todos os 
quadros que compartilham a borda estão com as opções de borda definidas para Não, ou quando a propriedade de bordas do conjunto de 
quadros pai está definida para Não e os quadros que compartilham a borda estão com as opções de borda definidas para Padrão. 


Cor da borda Define uma cor para todas as bordas do quadro. Esta cor se aplica a todas as bordas que tocam o quadro e substitui a cor 
de borda especificada do conjunto de quadros. 


Largura da margem Define a largura em pixels das margens esquerda e direita (o espaço entre as bordas de quadro e o conteúdo). 


Altura da margem Define a altura em pixels das margens superior e inferior (o espaço entre as bordas de quadro e o conteúdo). 
Nota: Definir a largura e altura da margem de um quadro não é o mesmo que definir margens na caixa de diálogo Modificar > 
Propriedades da página. 

Para alterar a cor de fundo de um quadro, defina a cor de fundo do documento no quadro, nas propriedades da página. 


Definição dos valores de acessibilidade de um quadro 
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1. No painel Molduras (Janela > Quadros), selecione um quadro colocando o ponto de inserção em um dos quadros. 
2. Selecione Modificar > Editar tag <frameset>. 
3. Selecione Folha de estilos/acessibilidade na lista de categorias à esquerda, digite os valores e clique em OK. 


Edição dos valores de acessibilidade de um quadro 
1. Exiba a Visualização de código ou as visualizações de código e de design do documento, se você estiver na Visualização de design. 


2. No painel Molduras (Janela > Quadros), selecione um quadro colocando o ponto de inserção em um dos quadros. O Dreamweaver realça a 
tag frame no código. 


3. Clique com o botão direito do mouse no código (Windows) ou mantenha pressionada a tecla Control enquanto clica no código (Macintosh) 
e selecione Editar tag. 


4. No editor de tags, faça as alterações e clique em OK. 


Alteração da cor de fundo de um documento em um quadro 
1. Coloque o ponto de inserção no quadro. 
2. Selecione Modificar > Propriedades da página. 
3. Na caixa de diálogo Propriedades da página, clique no menu Cor do fundo e selecione uma cor. 


Visualização e definição das propriedades do conjunto de quadros ici 


Use o Inspetor de propriedades para visualizar e definir a maioria das propriedades do conjunto de propriedades, incluindo o título do conjunto de 
quadros, as bordas e os tamanhos de quadro. 


Definição de um título para um documento de conjunto de quadros 
1. Selecione um conjunto de quadros seguindo um destes procedimentos: 


e Clique em uma borda entre dois quadros do conjunto de quadros na Visualização de design da janela Documento. 
e Clique na borda que envolve um conjunto de quadros no painel Molduras (Janela > Quadros). 
2. Na caixa Título da barra de ferramentas Documento, digite um nome para o documento de conjunto de quadros. 


Quando um visitante visualiza o conjunto de quadros em um navegador, o título aparece na barra de título do navegador. 


Visualização ou definição das propriedades de conjunto de quadros 
1. Selecione um conjunto de quadros seguindo um destes procedimentos: 


e Clique em uma borda entre dois quadros do conjunto de quadros na Visualização de design da janela Documento. 
e Clique na borda que envolve um conjunto de quadros no painel Molduras (Janela > Quadros). 


2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expansão no canto inferior direito e defina as opções de conjunto 
de quadros. 
Bordas Determina se as bordas devem aparecer em torno dos quadros quando o documento é visualizado em um navegador. Para exibir 
bordas, selecione Sim. Para impedir que o navegador exiba as bordas, selecione Não. Para que o navegador determine como as bordas 
serão exibidas, selecione Padrão. 


Largura da borda Especifica uma largura para todas as bordas no conjunto de quadros. 
Cor da borda Define uma cor para as bordas. Use o seletor de cores para selecionar uma cor ou digite o valor hexadecimal de uma cor. 


Seleção de lin.lcol. Define os tamanhos de quadro para as linhas e colunas do conjunto de quadros selecionado. Clique em uma aba no 
lado lado esquerdo ou superior da área Seleção de lin./col. e dic ou superior da área Seleção de lin./col. e digite uma altura ou largura na caixa de texto Valor. 


cd bedo [7] 
0 
Valor Unidades d 
Coluna 30 | Pixels =) Seleção 


3. Para especificar a quantidade de espaço que o navegador alocará para cada quadro, selecione entre as seguintes opções do menu 
Unidades: 
Pixels Define o tamanho da coluna ou linha selecionada para um valor absoluto. Escolha esta opção para um quadro que deve estar 
sempre no mesmo tamanho, como uma barra de navegação. O espaço dos quadros com tamanhos especificados em pixels é alocado 
antes dos quadros com tamanhos especificados como um valor percentual ou relativo. A abordagem mais comum para tamanhos de 
quadro é definir um quadro esquerdo para uma largura de pixel fixa e definir um quadro direito para um valor relativo, o que possibilitará 
que o quadro direito seja alongado de modo a ocupar todo o espaço restante após a largura de pixel ser alocada. 
Nota: Se todas as larguras forem especificadas em pixels e um visitante visualizar o conjunto de quadros de um navegador que seja muito 
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largo ou estreito para a largura especificada, os quadros serão aumentados ou reduzidos proporcionalmente para preencher o espaço 
disponível. O mesmo se aplica às alturas especificadas em pixels. Desse modo, geralmente é recomendável especificar pelo menos uma 
largura ou altura como relativa. 


Percentual Especifica que a coluna ou linha selecionada deve ser uma porcentagem da largura ou altura total do conjunto de quadros. O 
espaço dos quadros com unidades definidas para Percentual é alocado após os quadros com unidades definidas para Pixels, mas antes 
dos quadros com unidades definidas como Relativo. 


Relativo Especifica que a coluna ou linha selecionada deve ser alocada no restante do espaço disponível depois que os quadros definidos 
como Pixels e Percentual estiverem com seus espaços alocados. Esse espaço restante é dividido proporcionalmente entre os quadros com 
tamanhos definidos para Relativo. 

Nota: Quando você seleciona Relativo no menu Unidades, qualquer número digitado no campo Valor desaparecerá. Se você precisar 
especificar um número, deve digitá-lo novamente. No entanto, se houver apenas uma linha ou coluna definida como Relativo, não será 
necessário digitar um número, já que a linha ou coluna recebe todo o espaço restante depois que as outras linhas e colunas tem seus 
espaços alocados. Para ter a certeza da compatibilidade entre navegadores, digite 1 no campo Valor. Isso é o mesmo que não digitar 
nenhum valor. 


, E P. iníci 
Controle do conteúdo do quadro com links da 


Para usar um link em um quadro para abrir um documento em outro quadro, defina um destino para o link. O atributo target de um link especifica 
o quadro ou a janela em que o conteúdo vinculado é aberto. 


Por exemplo, se a barra de navegação estiver no quadro esquerdo e o material vinculado tiver que aparecer no quadro de conteúdo principal à 
direita, especifique o nome do quadro de conteúdo principal como destino para cada um dos links da barra de navegação. Quando um visitante 
clica em um link de navegação, o conteúdo especificado é aberto no quadro principal. 


1. Na Visualização de design, selecione um texto ou um objeto. 
2. Na caixa Link no Inspetor de propriedades (Janela > Propriedades), siga um destes procedimentos: 


e Clique no ícone de pasta e selecione o arquivo ao qual você deseja se vincular. 
e Arraste o Ícone Apontar para arquivo para o painel Arquivos e selecione o arquivo ao qual você deseja se vincular. 

3. No menu Alvo do Inspetor de propriedades, selecione o quadro ou a janela em que o documento vinculado deve aparecer: 
e blank abre o documento vinculado em uma nova janela de navegador, deixando a janela atual inalterada. 


* - parent abre o documento vinculado no conjunto de quadros pai do quadro no qual o link aparece, substituindo o conjunto de quadros 
inteiro. 


e “self abre o link no quadro atual, substituindo o conteúdo nesse quadro. 
e top abre o documento vinculado na janela de navegador atual, substituindo todos os quadros. 


Os nomes de quadro também aparecem neste menu. Selecione um quadro com nome a fim de abrir o documento vinculado nesse 
quadro. 


Nota: Os nomes de quadro só aparecem quando você está editando um documento em um conjunto de quadros. Quando você edita 
um documento em sua própria janela Documento, os nomes de quadro não aparecem no menu pop-up Alvo. Se você estiver editando 
um documento fora do conjunto de quadros, poderá digitar o nome do quadro de destino na caixa de texto Alvo. 
Se você estiver se vinculando a uma página fora do site, sempre use target=" top" ou target=" blank" para deixar claro que a página 
não é parte do site. 


E A Para o início 
Fornecimento de conteúdo para navegadores sem suporte a quadros 


O Dreamweaver permite que você especifique que o conteúdo será exibido em navegadores baseados em texto e em navegadores gráficos mais 
antigos que não oferecem suporte a quadros. Esse conteúdo é armazenado no arquivo de conjunto de quadros, delimitado por uma tag noframes. 
Quando um navegador que não oferece suporte a quadros carrega o arquivo de conjunto de quadros, o navegador exibe somente o conteúdo 
delimitado pela tag noframes. 


Nota: O conteúdo na área noframes deve ser mais que uma simples nota informando “Você deve fazer a atualização para um navegador que 
aceite quadros”. Alguns visitantes de site usam sistemas que não permitem a visualização de quadros. 
1. Selecione Modificar > Conjunto de quadros > Editar conteúdo sem quadros. 


O Dreamweaver limpa a Visualização de design e as palavras “Conteúdo sem quadros” aparecem na parte superior da Visualização de 
design. 


2. Siga um destes procedimentos: 
e Najanela Documento, digite ou insira o conteúdo como você faria em um documento comum. 


e Selecione Janela > Inspetor de código, coloque o ponto de inserção entre as tags body que aparecem nas tags noframes e digite o 
código HTML do conteúdo. 
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3. Selecione Modificar > Conjunto de quadros > Editar conteúdo sem quadros novamente para retornar à visualização normal do documento 
de conjunto de quadros. 


RE 
Uso de comportamentos JavaScript com quadros PRA 


Há vários comportamentos JavaScript e comandos relacionados a navegação que são especificamente apropriados para uso com quadros: 


Definir texto do quadro Substitui o conteúdo e a formatação de um determinado quadro com o conteúdo especificado. O conteúdo pode incluir 
qualquer código HTML válido. Execute esta ação para exibir dinamicamente as informações em um quadro. 

Ir para URL Abre uma nova página na janela atual ou no quadro especificado. Esta ação é especificamente útil para alterar o conteúdo de dois 
ou mais quadros com um clique. 

Inserir menu de salto Configura uma lista de menus de links que abrem arquivos em uma janela de navegador quando eles são clicados. Você 
também pode indicar uma janela ou quadro no qual o documento será aberto. 

Para obter mais informações, consulte Adição de comportamentos JavaScript 


Mais tópicos da Ajuda 


ERES 


Avisos legais | Política de privacidade on-line 


179 


Apresentação do conteúdo em tabelas 


Sobre as tabelas 

Precedência da formatação da tabela em HTML 

Sobre a divisão e mesclagem das células da tabela 
Inserir uma tabela e adicionar conteúdo 

Importação e exportação de dados tabulares 

Seleção de elementos de tabela 

Definição das propriedades da tabela 

Definição das propriedades da célula, linha ou coluna 
Uso do modo Tabelas expandidas para facilitar a edição da tabela 
Formatação de tabelas e células 

Redimensionamento de tabelas, colunas e linhas 
Redimensionamento de tabelas, colunas e linhas 
Adição e remoção de linhas e colunas 

Divisão e mesclagem de células 

Cópia, colagem e exclusão de células 

Aninhamento de tabelas 

Ordenação de tabelas 


Para o início 


Sobre as tabelas 


As tabelas são uma ferramenta eficaz para apresentar dados tabulares e dispor o texto e os gráficos em uma página HTML. Uma tabela consiste 
em uma ou mais linhas; cada linha é formada por uma ou mais células. Embora as colunas não sejam, em geral, especificadas explicitamente no 
código HTML, o Dreamweaver permite que você manipule colunas, bem como linhas e células. 


O Dreamweaver exibe a largura da tabela e a largura da coluna para cada coluna de tabela quando a tabela é selecionada ou quando o ponto de 
inserção está na tabela. Ao lado das larguras, estão as setas do menu de cabeçalho de tabela e dos menus de cabeçalho de coluna. Use os 
menus para obter acesso rápido aos comandos comuns relacionados a tabela. Você pode ativar ou desativar as larguras e os menus. 


Se a largura da tabela ou de uma coluna não for exibida, é sinal de que a tabela ou coluna não tem uma largura especificada no código HTML. 
Se aparecerem dois números, a largura visual conforme é exibida na Visualização de design não corresponde à largura especificada no código 
HTML. Isso pode acontecer quando você redimensiona uma tabela arrastando seu canto inferior direito ou quando você adiciona o conteúdo a 
uma célula maior do que sua largura definida. 


Por exemplo, se você definir a largura de uma coluna para 200 pixels e adicionar um conteúdo que aumente a largura em 250 pixels, dois 
números aparecerão para essa coluna: 200 (a largura especificada no código) e (250) entre parênteses (a largura visual da coluna conforme é 
processada na tela). 


Nota: Você também pode dispor o layout das páginas usando o posicionamento CSS. 


Para o início 


Precedência da formatação da tabela em HTML 


Ao formatar tabelas na Visualização de design, você pode definir propriedades para a tabela inteira ou para linhas, colunas ou células 
selecionadas da tabela. Quando uma propriedade, como alinhamento ou cor de fundo, é definida como um valor para a tabela inteira e outro 
valor para células individuais, a formatação da célula tem precedência sobre a formatação da linha, que, por sua vez, tem precedência sobre a 
formatação da tabela. 


A ordem de precedência da formatação da tabela é a seguinte: 
1. Células 
2. Linhas 
3. Tabela 


Por exemplo, se você definir a cor de fundo de uma única célula para azul e, depois, definir a cor de fundo de toda a tabela para amarelo, a 
célula azul não será alterada para amarelo, já que a formatação da célula tem precedência sobre a formatação da tabela. 


Nota: Quando você define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada célula da coluna. 
Para o início 


Sobre a divisão e mesclagem das células da tabela 


Você pode mesclar qualquer número de células adjacentes, contanto que a seleção inteira seja uma linha ou um retângulo de células, a fim de 
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produzir uma única célula que abranja várias colunas ou linhas. É possível dividir uma célula em qualquer número de linhas ou colunas, 
independentemente de ela ter sido anteriormente mesclada ou não. O Dreamweaver reestrutura automaticamente a tabela (adicionando quaisquer 
atributos colspan ou rowspan necessários) para criar a disposição especificada. 


No exemplo a seguir, as células do meio das primeiras duas linhas foram mescladas em uma única célula que abrange duas linhas. 


z Ea ii Para o início 
Inserir uma tabela e adicionar conteúdo 


Usar o painel Inserir ou o menu Inserir para criar uma nova tabela. Em seguida, adicione texto e imagens às células da tabela da mesma maneira 
que adiciona texto e imagens fora de uma tabela. 


Nota: O recurso Modo de layout está obsoleto desde o Dreamweaver CS4 e posterior. O Modo de layout criava layouts de página usando 
tabelas de layout, o que não é mais recomendado pela Adobe. Para obter mais informações sobre o Modo de layout e sobre por que ele se 
tornou obsoleto, consulte o Blog da Equipe do Dreamweaver. 


1. Na Visualização de design da janela Documento, coloque o ponto de inserção no local em que a tabela deve aparecer. 
Nota: Se o documento estiver em branco, você só poderá colocar o ponto de inserção no início do documento. 


* Selecione Inserir > Tabela. 
e Na categoria Comum do painel Inserir, clique no botão Tabela. 


2. Defina os atributos da caixa de diálogo Tabela e clique em OK para criar a tabela. 
Linhas Determina o número de linhas de tabela. 


Colunas Determina o número de colunas de tabela. 
Largura da tabela Especifica a largura da tabela em pixels ou como porcentagem da largura da janela do navegador. 
Espessura da borda Especifica a largura, em pixels, das bordas da tabela. 


Espaçamento da célula Determina o número de pixels entre as células de tabela adjacentes. 
Quando você não atribui explicitamente valores para espessura de tabela ou espaçamento e preenchimento de célula, a maioria dos 
navegadores exibe a espessura da borda da tabela e o preenchimento da célula definidos como 1 e o espaçamento da célula definido 
como 2. Para garantir que os navegadores exibirão a tabela sem borda, preenchimento ou espaçamento, defina Preenchimento da 
célula e Espaçamento da célula como 0. 


Preenchimento da célula Determina o número de pixels entre a borda de uma célula e seu conteúdo. 
Nenhum Não ativa cabeçalhos de coluna ou linha para a tabela. 


À esquerda Torna a primeira coluna da tabela uma coluna de cabeçalhos, a fim de que você possa digitar um cabeçalho para cada linha 
da tabela. 


Superior Torna a primeira linha da tabela uma linha de cabeçalhos, a fim de que você possa digitar um cabeçalho para cada coluna da 
tabela. 


Ambos Permite que você digite cabeçalhos de coluna e linha na tabela. 
É recomendável usar cabeçalhos caso algum visitante do seu site use leitor de tela. Os leitores de tela leem os cabeçalhos da tabela e 
ajudam os usuários de leitores de tela a controlar as informações da tabela. 


Legenda Fornece um título de tabela que é exibido fora da tabela. 
Alinhar legenda Especifica onde a legenda da tabela aparecerá em relação à tabela. 


Resumo Fornece uma descrição de tabela. Os leitores de tela leem o texto do resumo, mas o texto não aparece no navegador do 
usuário. 


ra " P, iníci 
Importação e exportação de dados tabulares RE 


Você pode importar dados tabulares criados em outro aplicativo (como o Microsoft Excel) e salvos em um formato de texto delimitado (com itens 
separados por tabulações, vírgulas, dois-pontos ou ponto-e-vírgulas) no Dreamweaver e formatá-los como uma tabela. 


Também é possível exportar os dados da tabela do Dreamweaver para um arquivo de texto, com o conteúdo das células adjacentes separado 
por um delimitador. Você pode usar vírgulas, dois-pontos, ponto-e-vírgulas ou espaços como delimitadores. Quando você exporta uma tabela, a 
tabela inteira é exportada. Não é possível selecionar partes de uma tabela a ser exportada. 


Se você precisa apenas de alguns dados de uma tabela, por exemplo, as primeiras seis linhas ou as primeiras seis colunas, copie as células 
que contêm esses dados, cole as células fora da tabela (para criar uma nova tabela) e exporte a nova tabela. 
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Importação de dados de tabela 
1. Siga um destes procedimentos: 


* Selecione Arquivo > Importar > Dados tabulares. 


e Na categoria Dados do painel Inserir, clique no ícone Importar dados tabulares E 
* Selecione Inserir > Objetos de tabela > Importar dados tabulares. 


2. Especifique as opções dos dados tabulares e clique em OK. 
Arquivo de dados O nome do arquivo a ser importado. Clique no botão Procurar para selecionar um arquivo. 


Delimitador O delimitador usado no arquivo que você está importando. 
Se você selecionar Outro, uma caixa de texto aparecerá à direita do menu pop-up. Digite o delimitador usado no arquivo. 


Nota: Especifique o delimitador usado quando o arquivo de dados foi salvo. Se você não fizer isso, o arquivo não será importado 
corretamente e os dados não serão corretamente formatados em uma tabela. 


Largura da tabela A largura da tabela. 

e Selecione Ajustar aos dados para aumentar suficientemente cada coluna para que caiba a sequência de texto mais longa. 

e Selecione Definir para especificar uma largura de tabela fixa em pixels ou como uma porcentagem da largura da janela do navegador. 
Borda Especifica a largura, em pixels, das bordas da tabela. 
Preenchimento da célula O número de pixels entre o conteúdo de uma célula e os limites da célula. 


Espaçamento da célula O número de pixels entre as células de tabela adjacentes. 
Se você não atribuir explicitamente valores para bordas, espaçamento de célula e preenchimento de célula, a maioria dos navegadores 
exibirá a tabela com as bordas e o preenchimento da célula definidos como 1, e o espaçamento da célula definido como 2. Para garantir 
que os navegadores exibirão a tabela sem preenchimento ou espaçamento, defina Preenchimento da célula e Espaçamento da célula 
como 0. Para visualizar os limites da célula e da tabela quando a borda estiver definida como O, selecione Exibir > Auxílios visuais > 
Bordas da tabela. 


Formatar linha superior Determina qual formatação, se houver alguma, está aplicada à linha superior da tabela. Selecione entre as quatro 
opções de formatação: sem formatação, negrito, itálico ou negrito itálico. 


Exportação de uma tabela 
1. Coloque o ponto de inserção em qualquer célula da tabela. 
2. Selecione Arquivo > Exportar > Tabela. 


3. Escolha as seguintes opções: 
Delimitador Especifica qual caractere delimitador deve ser usado para separar itens no arquivo exportado. 


Quebras de linha Especifica em qual sistema operacional você estará abrindo o arquivo exportado: Windows, Macintosh ou UNIX. 
(Diferentes sistemas operacionais têm diferentes formas de indicar o fim de uma linha de texto.) 


4. Clique em Exportar. 
5. Digite um nome para o arquivo e clique em Salvar. 


Para o início 


Seleção de elementos de tabela 
Você pode selecionar uma tabela, linha ou coluna inteira de uma só vez. Também é possível selecionar uma ou mais células individuais. 


Quando você mover o ponteiro sobre uma tabela, linha, coluna ou célula, o Dreamweaver realçará todas as células dessa seleção a fim de que 
você saiba quais células serão selecionadas. Isso será útil quando você tiver tabelas sem bordas, células que abranjam várias colunas ou linhas, 
ou tabelas aninhadas. Você pode alterar a cor do realce nas preferências. 


Se você posicionar o ponteiro sobre a borda de uma tabela, mantenha pressionada a tecla Control (Windows) ou Command (Macintosh), a 
estrutura inteira da tabela, ou seja, todas as células da tabela, será realçada. Isso será útil quando você tiver tabelas aninhadas e precisar ver 
a estrutura de uma das tabelas. 


Seleção de uma tabela inteira 
*& Siga um destes procedimentos: 


e Clique no canto superior esquerdo da tabela, em qualquer lugar da borda superior ou inferior da tabela, ou na borda de uma linha ou coluna. 


Nota: O ponteiro altera-se para o ícone de grade de tabela ka quando você pode selecionar a tabela (a menos que você clique em uma 
borda de linha ou coluna). 


e Clique em uma célula de tabela e selecione a tag <table> no seletor de tags no canto inferior esquerdo da janela Documento. 


e Clique em uma célula de tabela e selecione Modificar > Tabela > Selecionar tabela. 
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e Clique em uma célula de tabela, clique no menu de cabeçalho de tabela e selecione Selecionar tabela. As alças de seleção aparecem nas 
bordas inferior e direita da tabela selecionada. 


Seleção de várias linhas ou colunas ou de linhas ou colunas individuais 
1. Posicione o ponteiro para a borda esquerda de uma linha ou a borda superior de uma coluna. 
2. Quando o ponteiro se transformar em uma seta de seleção, clique para selecionar uma linha ou coluna, ou arraste para selecionar várias 


linhas ou colunas. 
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Seleção de uma única coluna 
1. Clique na coluna. 
2. Clique no menu de cabeçalho de coluna e escolha Selecionar coluna. 
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| Inserir coluna à esquerda 
| Inserir coluna à dreita 


Seleção de uma única célula 
*& Siga um destes procedimentos: 


e Clique na célula e selecione a tag <td> no seletor de tags no canto inferior esquerdo da janela Documento. 
e Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) na célula. 
e Clique na célula e selecione Editar> Selecionar tudo. 


Selecione Editar > Selecionar tudo novamente quando uma célula estiver selecionada a fim de realçar a tabela inteira. 


Seleção de uma linha ou de um bloco retangular de células 
*% Siga um destes procedimentos: 


e Arraste de uma célula para outra célula. 


e Clique em uma célula, mantenha pressionada a tecla Control (Windows) ou a tecla Command (Macintosh) enquanto clica na mesma célula 
para selecioná-la e mantenha pressionada a tecla Shift enquanto clica em outra célula. 


Todas as células da região linear ou retangular definidas pelas duas células são selecionadas. 


Lo 
Lo] 
Lo] 


Seleção de células não adjacentes 

*& Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto clica nas células, linhas 
ou colunas que você deseja selecionar. 

Se cada célula, linha ou coluna em que você mantém pressionada a tecla Control enquanto clica ou mantém pressionada a tecla Command 
enquanto clica ainda não estiver selecionada, ela será adicionada à seleção. Se ela já estiver selecionada, será removida da seleção. 


Alteração da cor de realce dos elementos de tabela 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Selecione Realce na lista de categorias à esquerda, faça uma das seguintes alterações e clique em OK. 


* Para alterar a cor de realce dos elementos de tabela, clique na caixa de cor de Passar o mouse, selecione a cor de realce usando o 
seletor de cores (ou digite o valor hexadecimal para a cor de realce na caixa de texto). 


e Para ativar ou desativar o realce dos elementos de tabela, marque ou desmarque a opção Mostrar de Passar o mouse. 
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Nota: Essas opções afetam todos os objetos, como elementos com posição absoluta (elementos PA), que são realçados 
Dreamweaver quando você move o ponteiro sobre eles. 


Para o início 


Definição das propriedades da tabela 


Você pode usar o Inspetor de propriedades para editar tabelas. 


1. Selecione uma tabela. 


2. Altere propriedades no Inspetor de propriedades (Janela > Propriedades), conforme desejar. 
Ident. da tabela Uma identificação da tabela. 


Linhas e colunas O número de linhas e colunas da tabela. 


W A largura da tabela em pixels ou como uma porcentagem da largura da janela do navegador. 
Nota: Você normalmente não precisa definir a altura de uma tabela. 


PreenchCélula O número de pixels entre o conteúdo de uma célula e os limites da célula. 
EspaçoCélula O número de pixels entre as células de tabela adjacentes. 
Alinhar Determina onde a tabela aparecerá em relação a outros elementos no mesmo parágrafo, como texto ou imagens. 


À esquerda alinha a tabela à esquerda dos outros elementos (a fim de que o texto no mesmo parágrafo seja disposto ao redor da tabela à 
direita); À direita alinha a tabela à direita dos outros elementos (com o texto disposto ao redor dela à esquerda) e Centralizado centraliza a 
tabela (com o texto exibido acima e/ou abaixo da tabela). Padrão indica que o navegador deve usar o alinhamento padrão. 


Quando o alinhamento for definido como Padrão, o outro conteúdo não será exibido ao lado da tabela. Para exibir uma tabela ao lado 
do outro conteúdo, use o alinhamento À esquerda ou À direita. 


Borda Especifica a largura, em pixels, das bordas da tabela. 
Se você não atribuir explicitamente valores para a borda, o espaçamento de célula e o preenchimento de célula, a maioria dos 
navegadores exibirá a tabela com a borda e o preenchimento da célula definidos como 1, e o espaçamento da célula definido como 2. 
Para garantir que os navegadores exibirão a tabela sem preenchimento ou espaçamento, defina Borda, Preenchimento da célula e 
Espaçamento da célula como O. Para visualizar os limites da célula e da tabela quando a borda estiver definida como O, selecione 
Exibir > Auxílios visuais > Bordas da tabela. 


Classe define a classe CSS na tabela. 
Nota: Talvez seja necessário expandir o inspetor Propriedades da tabela para ver as opções a seguir. Para expandir o inspetor Tabela de 
propriedades, clique na seta de expansão, no canto inferior direito. 


Limpar larguras das colunas e Limpar alturas das linhas excluem todos os valores de largura de coluna ou altura de linha explicitamente 
especificados na tabela. 


Converter larguras da tabela em pixels e Converter alturas da tabela em pixels definem a largura ou altura de cada coluna da tabela 
para a largura atual em pixels (também define a largura da tabela inteira para a largura atual em pixels). 


Converter larguras da tabela em porcentagem e Converter alturas da tabela em porcentagem definem a largura ou altura de cada coluna 
da tabela para a largura atual expressa como uma porcentagem da largura da janela Documento (também define a largura da tabela inteira 
para a largura atual como uma porcentagem da largura da janela Documento). 


Se você tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor. 


e E - E Para o início 
Definição das propriedades da célula, linha ou coluna ii 


Você pode usar o Inspetor de propriedades para editar as células e linhas de uma tabela. 


1. Selecione a coluna ou linha. 


2. No Inspetor de propriedades (Janela > Propriedades), defina as seguintes opções: 
Horz Especifica o alinhamento horizontal do conteúdo de uma célula, linha ou coluna. Você pode alinhar o conteúdo à esquerda, à direita 
ou ao centro das células, ou pode indicar se o navegador deve usar o alinhamento padrão (geralmente À esquerda para células regulares e 
Centralizado para células de cabeçalho). 


Vert Especifica o alinhamento vertical do conteúdo de uma célula, linha ou coluna. Você pode alinhar o conteúdo na parte superior, ao 
meio, na parte inferior ou na linha de base das células, ou indicar se o navegador deve usar o alinhamento padrão (geralmente Meio). 


Lea A largura e a altura das células selecionadas em pixels ou como uma porcentagem da largura ou altura da tabela inteira. Para 
especificar uma porcentagem, insira o símbolo de porcentagem (%) após o valor. Para permitir que o navegador determine a largura ou 
altura apropriada com base no conteúdo da célula, e as larguras e alturas das outras colunas e linhas, deixe o campo em branco (o 
padrão). 


Por padrão, um navegador escolhe uma altura de linha ou largura de coluna para acomodar, e a imagem mais larga ou a linha mais longa 
em uma coluna. É por isso que, às vezes, uma coluna se torna muito mais larga que as outras colunas da tabela quando você adiciona 
conteúdo a ela. 
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Nota: É possível especificar uma altura como porcentagem da altura total da tabela, mas a linha pode não ser exibida na altura percentual 
especificada nos navegadores. 


Fundo A cor do fundo para uma célula, coluna ou linha, escolhida com o seletor de cores. 


Mesclar células Combina as células, linhas ou colunas selecionadas em uma única célula. Você pode mesclar as células somente se elas 
formarem um bloco retangular ou linear. 


Dividir célula Divide uma célula, criando duas ou mais células. É possível dividir somente uma célula por vez. Este botão ficará desativado 
se mais de uma célula for selecionada. 


Sem quebra de linha Impede a quebra automática de linha, mantendo todo o texto de uma célula em uma única linha. Se a opção Sem 
quebra de linha estiver ativada, as células aumentarão para acomodar todos os dados enquanto você os digita ou os cola em uma célula. 
(Normalmente, as células se expandem horizontalmente para acomodar a palavra mais longa ou a imagem mais larga na célula; em 
seguida, elas se expandem verticalmente quando necessário para acomodar outro conteúdo.) 


Cabeçalho Formata as células selecionadas como células de cabeçalho de tabela. O conteúdo das células de cabeçalho de tabela estarão 
em negrito e centralizados, por padrão. 


Você pode especificar as larguras e alturas como pixels ou porcentagens, e pode converter de pixels em porcentagens e vice-versa. 


Nota: Quando você define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada célula da 
coluna. No entanto, quando você definir determinadas propriedades para uma linha, o Dreamweaver alterará os atributos da tag tr, em vez 
de alterar os atributos de cada tag td na linha. Quando você estiver aplicando o mesmo formato a todas as células de uma linha, a 
aplicação do formato à tag tr produzirá um código HTML mais limpo e conciso. 


3. Pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor. 


Para o início 


Uso do modo Tabelas expandidas para facilitar a edição da tabela 


O modo Tabelas expandidas adiciona temporariamente o preenchimento e o espaçamento de célula a todas as tabelas de um documento e 
aumenta as bordas da tabela para facilitar a edição. Esse modo permite que você selecione itens nas tabelas ou posicione precisamente o ponto 
de inserção. 


Por exemplo, você poderia expandir uma tabela para colocar o ponto de inserção à esquerda ou à direita de uma imagem, sem selecionar 
inadvertidamente a imagem ou a célula da tabela. 


TRIO DEALERS 


A B 


A. Tabela no modo Padrão B. Tabela no modo Tabelas expandidas 


Nota: Após fazer a seleção ou colocar o ponto de inserção, retorne ao modo Padrão da Visualização de design para fazer as edições. Algumas 
operações visuais, como redimensionamento, não retornarão os resultados esperados no modo Tabelas expandidas. 


Alternância para o modo Tabelas expandidas 
1. Se você estiver trabalhando na Visualização de código, selecione Exibir > Design ou Visualização > Código e design (não é possível 


alternar para o modo Tabelas expandidas na Visualização de código). 


2. Siga um destes procedimentos: 


* Selecione Exibir > Modo Tabela > Modo Tabelas expandidas. 
e Na categoria Layout do painel Inserir, clique em Modo Tabelas expandidas. 


Uma barra chamada Modo Tabelas expandidas aparece na parte superior da janela Documento. O Dreamweaver adiciona o 
preenchimento e o espaçamento de célula a todas as tabelas da página e aumenta as bordas das tabelas. 


Sair do modo Tabelas expandidas 
* Siga um destes procedimentos: 


Clique em Sair na barra Modo Tabelas expandidas na parte superior da janela Documento. 
Selecione Exibir > Modo Tabela > Modo Padrão. 


Na categoria Layout do painel Inserir, clique em Modo Padrão. 


Para o início 


Formatação de tabelas e células 


Você pode alterar a aparência das tabelas definindo as propriedades da tabela e suas células ou aplicando um design predefinido à tabela. Antes 
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de definir as propriedades da tabela e da célula, saiba que a ordem de precedência para formatação é células, linhas e tabelas. 


Para formatar o texto dentro de uma célula de tabela, use os mesmos procedimentos que você usaria para formatar o texto fora de uma 
tabela. 


Alteração do formato de uma tabela, linha, célula ou coluna 
1. Selecione uma tabela, célula, linha ou coluna. 
2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expansão no canto inferior direito e altere as propriedades quando 
necessário. 


3. Altere as propriedades quando necessário. 
Para obter mais informações sobre as opções, clique no ícone Ajuda do Inspetor de propriedades. 


Nota: Quando você define propriedades em uma coluna, o Dreamweaver altera os atributos da tag td correspondente a cada célula da 
coluna. No entanto, quando você define determinadas propriedades de uma linha, o Dreamweaver altera os atributos da tag tr em vez de 
alterar os atributos de cada tag td da linha. Quando você estiver aplicando o mesmo formato a todas as células de uma linha, a aplicação 
do formato à tag tr produzirá um código HTML mais limpo e conciso. 


Adição ou edição dos valores de acessibilidade de uma tabela na Visualização de código 

*& Edite os atributos apropriados no código. 
Para localizar rapidamente as tags no código, clique na tabela, selecione a tag <table> no seletor de tags, na parte inferior da janela 
Documento. 


Adição ou edição dos valores de acessibilidade de uma tabela na Visualização de design 
“& Para editar a legenda da tabela, realce a legenda e digite uma nova. 


e Para editar o alinhamento da legenda, coloque o ponto de inserção na legenda da tabela, clique com o botão direito do mouse (Windows) 
ou mantenha pressionada a tecla Control enquanto clica (Macintosh) e selecione Editar código de tag. 


e Para editar o resumo da tabela, selecione a tabela, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla 
Control enquanto clica (Macintosh) e selecione Editar código de tag. 


E & à P iníci 
Redimensionamento de tabelas, colunas e linhas REM 


Redimensionamento de tabelas 


Você pode redimensionar uma tabela inteira ou linhas e colunas individuais. Quando uma tabela inteira é redimensionada, todas as células da 
tabela mudam proporcionalmente de tamanho. Se as células de uma tabela tiverem larguras ou alturas explícitas especificadas, o 
redimensionamento da tabela alterará o tamanho visual das células na janela Documento, mas não alterará as larguras e alturas especificadas 
das células. 


É possível redimensionar uma tabela arrastando uma de suas alças de seleção. O Dreamweaver exibe a largura da tabela, juntamente com um 
menu de cabeçalho de tabela, na parte superior ou inferior da tabela quando esta é selecionada ou quando o ponto de inserção está na tabela. 


Às vezes, as larguras de coluna definidas no código HTML não correspondem às suas larguras aparentes na tela. Quando isso acontecer, você 
poderá torná-las consistentes. As larguras de tabela e coluna e os menus de cabeçalho aparecem no Dreamweaver para ajudar você a dispor o 
layout das tabelas. Você pode ativar ou desativar as larguras e os menus quando necessário. 


Redimensionamento de colunas e linhas 
Você pode alterar a largura de uma coluna ou a altura de uma linha no Inspetor de propriedades ou arrastando as bordas da coluna ou linha. Se 
você tiver problemas com o redimensionamento, limpe as larguras de coluna ou as alturas de linha e comece novamente. 


Nota: Também é possível alterar as larguras e alturas de célula diretamente no código HTML usando a Visualização de código. 

O Dreamweaver exibe as larguras de coluna, juntamente com os menus de cabeçalho de coluna, nas partes superiores ou inferiores das colunas 
quando a tabela é selecionada ou quando o ponto de inserção está na tabela. É possível ativar ou desativar os menus de cabeçalho de coluna 
quando necessário. 


E E E P iníci 
Redimensionamento de tabelas, colunas e linhas fd 


Redimensionamento de uma tabela 
“+ Selecione a tabela. 


e Para redimensionar a tabela horizontalmente, arraste a alça de seleção à direita. 
e Para redimensionar a tabela verticalmente, arraste a alça de seleção na parte inferior. 


e Para redimensionar a tabela em ambas as dimensões, arraste a alça de seleção no canto inferior direito. 
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Alteração da largura de uma coluna e manutenção da largura geral da tabela 

“& Arraste a borda direita da coluna que você deseja alterar. 

A largura da coluna adjacente também é alterada. Na verdade, você redimensiona duas colunas. O feedback visual mostra como as colunas 
serão ajustadas. A largura geral da tabela não é alterada. 
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Nota: Nas tabelas com larguras baseadas em porcentagem (e não em pixels), se você arrastar a borda direita da coluna da extrema direita, a 
largura da tabela inteira será alterada e todas as colunas serão aumentadas ou diminuídas proporcionalmente. 


Alteração da largura de uma coluna e manutenção do tamanho das outras colunas 

*& Mantenha pressionada a tecla Shift e arraste a borda da coluna. 

A largura de uma coluna é alterada. O feedback visual mostra como as colunas serão ajustadas. A largura geral da tabela é alterada para 
acomodar a coluna que você está redimensionando. 
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+ | 
Alteração visual da altura de uma linha 
“& Arraste a borda inferior da linha. 


Torne as larguras de coluna no código consistentes com as larguras visuais 
1. Clique em uma célula. 
2. Clique no menu de cabeçalho de tabela e selecione Manter consistência de todas as larguras. 


mis 
Selecionar tabela 

Limpar todas as akuras 
Limpar todas as larguras 


todas 


5 às larguras consistentes 


O Dreamweaver redefine a largura especificada no código para que corresponda à largura visual. 


Limpeza de todas as larguras ou alturas definidas em uma tabela 
1. Selecione a tabela. 
2. Siga um destes procedimentos: 


e Selecione Modificar > Limpar larguras das células ou Modificar > Tabela > Limpar alturas das células. 


* No Inspetor de propriedades, (Janela > Propriedades), clique no botão Limpar alturas das linhas I& ou no botão Limpar larguras das 
colunas '&!, 


e Clique no menu de cabeçalho de tabela e selecione Limpar todas as alturas ou Limpar todas as larguras. 


- E 


ir! =! Selecionar tabela 


Limpahgodas as larguras 
Tornar todas as larguras consistentes 
Ocultar larguras de tabela 


Limpeza da largura definida de uma coluna 
*& Clique na coluna, clique no menu de cabeçalho de coluna e selecione Limpar larguras das colunas. 


Ativação ou desativação das larguras de tabela e coluna e dos menus 
1. Selecione Exibir > Auxílios visuais > Larguras de tabela. 
2. Clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) na tabela e selecione 
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Tabela > Larguras de tabela. 


Eras a = P, iníci 
Adição e remoção de linhas e colunas Ee CRE 


Para adicionar e remover linhas e colunas, use Modificar > Tabela ou menu de cabeçalho de coluna. 


Se você pressionar Tab na última célula de uma tabela, outra linha será adicionada automaticamente à tabela. 


Adição de uma única linha ou coluna 
“& Clique em uma célula e siga um destes procedimentos: 


e Selecione Modificar > Tabela > Inserir linha ou Modificar > Tabela > Inserir coluna. 
Uma linha aparecerá acima do ponto de inserção ou uma coluna aparecerá à esquerda do ponto de inserção. 


e Clique no menu de cabeçalho de coluna e selecione Inserir coluna à esquerda ou Inserir coluna à direita. 
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Limpar largura de coluna 


Insert Te âdreita 


Adição de várias linhas ou colunas 
1. Clique em uma célula. 


2. Selecione Modificar > Tabela > Inserir Linhas ou colunas, preencha a caixa de diálogo e clique em OK. 
Inserir Indica se as linhas ou colunas serão inseridas ou não. 


Número de linhas ou Número de colunas O número de linhas ou colunas a ser inserido. 


Onde Especifica se as novas linhas ou colunas devem aparecer antes ou após a linha ou coluna da célula selecionada. 


Exclusão de uma linha ou coluna 
*& Siga um destes procedimentos: 


e Clique em uma célula na linha ou coluna a ser excluída e selecione Modificar > Tabela > Excluir linha ou Modificar > Tabela > Excluir 
coluna. 


* Selecione uma linha ou coluna completa e, em seguida, selecione Editar > Limpar ou pressione Delete. 


Adição ou exclusão de linhas ou colunas usando o Inspetor de propriedades 
1. Selecione a tabela. 


2. No Inspetor de propriedades (Janela > Propriedades), siga destes procedimentos: 
e Para adicionar ou excluir linhas, aumente ou diminuir o valor Linhas. 


e Para adicionar ou excluir colunas, aumente ou diminuir o valor Colunas. 


Nota: O Dreamweaver não avisará se você estiver excluindo linhas e colunas que contenham dados. 


Re cair a » Para o início 
Divisão e mesclagem de células 

Use o Inspetor de propriedades ou os comandos no submenu Modificar > Tabela para dividir ou mesclar células. 

Mesclagem de duas ou mais células em uma tabela 


1. Selecione as células em uma linha contígua e sob a forma de um retângulo. 


Na ilustração a seguir, a seleção é um retângulo de células. Portanto, as células podem ser mescladas. 


Baltimore-'Washington International [Baltimore MD 


Caro International Cairo Egypt 
Canbera Australia 
E 5 


Cape Town Airport Cape Town South África 
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Na ilustração a seguir, a seleção não é um retângulo de células. Portanto, as células não podem ser mescladas. 


ton Name City 
Baltimore-W'ashington International [Baltimore 
Cairo International Cairo Egypt 


Canberra [Canbema Jtnsrata 
Cairns 


Cape Town Airport Cape Town South Africa 


or Country 


E] 


2. Siga um destes procedimentos: 
* Selecione Modificar > Tabela > Mesclar células. 
e No Inspetor de propriedades HTML expandido (Janela > Propriedades), clique em Mesclar células E). 


Nota: Se o botão não for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para ver todas as 
opções. 


O conteúdo das células individuais é colocado na célula mesclada resultante. As propriedades da primeira célula selecionada são 
aplicadas à célula mesclada. 


Divisão de uma célula 
1. Clique na célula e siga um destes procedimentos: 


* Selecione Modificar > Tabela > Dividir célula. 
e No Inspetor de propriedades HTML expandido (Janela > Propriedades), clique em Dividir célula dE. 


Nota: Se o botão não for exibido, clique na seta do expansor, no canto inferior direito do Inspetor de propriedades, para ver todas as 
opções. 


2. Na caixa de diálogo Dividir célula, especifique como a célula deve ser dividida: 
Dividir célula em: Especifica se a célula será dividida em linhas ou colunas. 


Número de linhas/Número de colunas Especifica em quantas linhas ou colunas a célula será dividida. 


Aumento ou diminuição do número de linhas ou colunas ocupadas por uma célula 
* Siga um destes procedimentos: 


Selecione Modificar > Tabela > Aumentar extensão da linha ou Modificar > Tabela > Aumentar extensão da coluna. 


Selecione Modificar > Tabela > Diminuir extensão da linha ou Modificar > Tabela > Diminuir extensão da coluna. 


Ea ” - Para o início 
Cópia, colagem e exclusão de células 


Você pode copiar, colar ou excluir uma única célula de tabela ou várias células de uma só vez, preservando a formatação da célula. 


É possível colar células no ponto de inserção ou no lugar de uma seleção em uma tabela existente. Para colar várias células de tabela, o 
conteúdo da área de transferência deve ser compatível com a estrutura da tabela ou a seleção na tabela em que as células serão coladas. 


Recorte ou cópia das células de tabela 


1. Selecione uma ou mais células em uma linha contígua e sob a forma de um retângulo. 


Na ilustração a seguir, a seleção é um retângulo de células. Portanto, as células podem ser recortadas ou copiadas. 


Location Name City 
Baltimore-W'ashington International [Baltimore MD 
Cairo International Cairo Egypt 
Queensland 
Cape Town Airport Cape Town South Africa 


Na ilustração a seguir, a seleção não é um retângulo. Portanto, as células não podem ser recortadas ou copiadas. 
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Baltimore-Washington International [Baltimore MD 
Cairo International Cair Egypt 


1ro 
Cube == Ts 
came 


Cape Town Airport Cape Town South África 


2. Selecione Editar > Recortar ou Editar > Copiar. 
Nota: Se você selecionou uma linha ou coluna inteira e clicar em Editar > Recortar, toda a linha ou coluna será removida da tabela (e não 
apenas o conteúdo das células). 


Colagem das células de tabela 
1. Selecione o local onde você deseja colar as células: 
e Para substituir as células existentes pelas células que você está colando, selecione um conjunto de células existentes com o mesmo 


layout das células na área de transferência. (Por exemplo, se você copiou ou recortou um bloco de células de 3 x 2, poderá selecionar 
outro bloco de células de 3 x 2 a ser substituído pela colagem.) 


e Para colar uma linha completa de células acima de uma célula específica, clique nessa célula. 
e Para colar uma coluna completa de células à esquerda de uma célula específica, clique nessa célula. 


Nota: Se você tiver menos de uma linha ou coluna completa de células na área de transferência, e clicar em uma célula e colar as 
células da área de transferência, a célula em que você clicou e suas vizinhas possivelmente serão substituídas (dependendo do local 
dela na tabela) pelas células que estão sendo coladas. 


e Para criar uma nova tabela com as células coladas, coloque o ponto de inserção fora da tabela. 
2. Selecione Editar > Colar. 


Se você estiver colando linhas ou colunas inteiras em uma tabela existente, as linhas ou colunas serão adicionadas à tabela. Se você 
estiver colando uma célula individual, o conteúdo da célula selecionada será substituído. Se você estiver fazendo a colagem fora de uma 
tabela, as linhas, colunas ou células serão usadas para definir uma nova tabela. 


Remoção do conteúdo da célula mantendo as células intactas 


1. Selecione uma ou mais células. 
Nota: Assegure que a seleção não é inteiramente constituída de linhas ou colunas completas. 


2. Selecione Editar > Limpar ou pressione Delete. 
Nota: Se apenas linhas ou colunas completas estiverem selecionadas quando você clicar em Editar > Limpar ou pressionar Delete, as 
linhas ou colunas inteiras, e não apenas seu conteúdo, serão removidas da tabela. 


Exclusão de linhas ou colunas que contêm células mescladas 
1. Selecione a linha ou coluna. 
2. Selecione Modificar > Tabela > Excluir linha ou Modificar > Tabela > Excluir coluna. 


Para o início 


Aninhamento de tabelas 


Uma tabela aninhada é uma tabela dentro de uma célula de outra tabela. Você pode formatar uma tabela aninhada como faria em qualquer outra 
tabela. No entanto, sua largura é limitada pela largura da célula em que ela aparece. 


1. Clique em uma célula da tabela existente. 
2. Selecione Inserir > Tabela, defina as opções Inserir tabela e clique em OK. 


Para o início 


Ordenação de tabelas 


Você pode ordenar as linhas de um tabela com base no conteúdo de uma única coluna. Também é possível executar uma ordenação de tabela 
mais complexa com base no conteúdo de duas colunas. 


Você não pode ordenar tabelas que contenham o atributo colspan ou rowspan, ou seja, tabelas que contenham células mescladas. 


1. Selecione a tabela ou clique em qualquer célula. 


2. Selecione Comandos > Ordenar tabela, defina as opções na caixa de diálogo e clique em OK. 
Ordenar por Determina quais valores de coluna serão usados para ordenar as linhas da tabela. 


Ordem Determina se a coluna será ordenada alfabética ou numericamente, e se ela será ordenada em ordem crescente (de A a Z, dos 
números menores para os maiores) ou decrescente. 
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Quando o conteúdo de uma coluna for composto por números, selecione Numericamente. Uma ordenação alfabética aplicada a uma lista 
de números de um e dois dígitos resulta na ordenação dos números como se eles fossem palavras (por exemplo, 1, 10, 2, 20, 3, 30), e não 
como números realmente (por exemplo, 1, 2, 3, 10, 20, 30). 


Depois, por/Ordem Determina a ordem de uma ordenação secundária em uma coluna diferente. Especifica a coluna de ordenação 
secundária no menu pop-up Depois, por e a ordem da ordenação secundária nos menus pop-up Ordem. 


A ordenação inclui a primeira linha Especifica se a primeira linha da tabela deve ser incluída na ordenação. Se a primeira linha for um 
cabeçalho que não deve ser movido, não selecione esta opção. 


Ordenar linhas do cabeçalho Especifica que todas as linhas da seção thead (se houver alguma) da tabela devem ser ordenadas usando 
os mesmos critérios das linhas do corpo. (Observe que as linhas thead permanecem na seção thead e ainda aparecerão na parte superior 
da tabela, até mesmo depois da ordenação.) Para obter informações sobre a tag thead, consulte o painel Referência (selecione Ajuda > 
Referência). 


Ordenar linhas do rodapé Especifica que todas as linhas da seção tfoot (se houver alguma) da tabela devem ser ordenadas usando os 
mesmos critérios das linhas do corpo. (Observe que as linhas tfoot permanecem na seção tfoot e ainda aparecerão na parte inferior da 
tabela, até mesmo depois da ordenação.) Para obter informações sobre a tag tfoot, consulte o painel Referência (selecione Ajuda > 
Referência). 


Manter todas as cores de linha inalteradas após a ordenação Especifica que os atributos de linha de tabela (como cor) devem 
permanecer associados ao mesmo conteúdo após a ordenação. Se as linhas de tabela forem formatadas com duas cores alternativas, não 
selecione esta opção para garantir que a tabela classificada ainda terá linhas com cores alternativas. Se os atributos de linha forem 
específicos do conteúdo de cada linha, selecione esta opção para garantir que esses atributos permanecerão associados às linhas corretas 
na tabela ordenada. 


Mais tópicos da Ajuda 
[imprimir]Layout das páginas com CSS 


(69) ex-nc-sa ] 


Avisos legais | Política de privacidade on-line 
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Exibição de dados com o Spry 


Sobre os conjuntos de dados do Spry 

Criar um conjunto de dados do Spry 

Criar uma região do Spry 

Criar uma região repetitiva do Spry 

Criar uma região de listas de repetição do Spry 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


E Para o início 
Sobre os conjuntos de dados do Spry : 
Um conjunto de dados do Spry é essencialmente um objeto JavaScript que contém uma coleção de dados especificados por você. Com o 
Dreamweaver, você pode rapidamente criar esse objeto e carregar nele dados de uma fonte de dados (como um arquivo XML ou HTML). O 
conjunto de dados resulta em uma matriz de dados na forma de uma tabela padrão, contendo linhas e colunas. Enquanto cria um conjunto de 
dados do Spry com o Dreamweaver, você pode também especificar como deseja exibir os dados em uma página da Web. 


Considere um conjunto de dados como um contêiner virtual com uma estrutura de linhas e colunas. Ele existe como um objeto JavaScript cujas 
informações só ficam visíveis quando você especifica exatamente como exibi-lo na página da Web. Você pode exibir todos os dados nesse 
contêiner ou optar por exibir somente partes selecionadas. 


Para obter informações completas sobre o funcionamento dos conjuntos de dados do Spry, consulte 
www.adobe.com/go/learn dw sdg sprydataset br. 


Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre como trabalhar com conjuntos de dados do Spry, consulte 
www.adobe.com/go/dw1Odatasets br. 


Para assistir a um tutorial em vídeo sobre como trabalhar com conjuntos de dados do Spry, consulte www.adobe.com/go/lrvid4047 dw br. 


Criar um conjunto de dados do Spry Para o início 


Criar um conjunto de dados HTML do Spry 
1. Se você está apenas criando um conjunto de dados, não precisa se preocupar com o ponto de inserção. Mas, se está criando um conjunto 
de dados e inserindo um layout, verifique se o ponto de inserção está onde você deseja inserir o layout na página. 
2. Escolha Inserir > Spry > Conjunto de dados do Spry. 


3. Natela Especificar fonte de dados, faça o seguinte: 


e Selecione HTML no menu pop-up Selecionar tipo de dados. (Ele é selecionado por padrão.) 


* Especifique um nome para o novo conjunto de dados. Da primeira vez que você criar um conjunto de dados, o nome padrão será ds1. 
O nome do conjunto de dados pode conter letras, números e sublinhados, mas não pode começar com um número. 


e Especifique os elementos HTML na fonte de dados que você deseja que o Dreamweaver detecte. Por exemplo, se você tiver 
organizado seus dados dentro de uma tag div e quiser que o Dreamweaver detecte tags div em vez de tabelas, selecione Divs no 
menu pop-up Detectar. A opção Personalizar permite digitar qualquer nome de tag que você deseje selecionar. 


e Especifique o caminho para o arquivo que contém a fonte de dados HTML. Pode ser um caminho relativo para um arquivo local no seu 
site (por exemplo, dados/dados html.html), ou então um URL absoluto para uma página da Web ao vivo (usando HTTP ou HTTPS). 
Você pode clicar no botão Procurar para navegar até um arquivo local e selecioná-lo. 


O Dreamweaver processa a fonte de dados HTML na janela Seleção de dados e exibe marcadores visuais para os elementos 
qualificados para serem contêineres do conjunto de dados. O elemento que você deseja usar já deve ter uma ID exclusiva atribuída a 
ele. Se não tiver, o Dreamweaver exibirá uma mensagem de erro, e você precisará voltar ao arquivo de fonte de dados e atribuir a ele 
uma ID exclusiva. Além disso, os elementos qualificados no arquivo de fonte de dados não podem residir em regiões do Spry nem 
conter outras referências de dados. 


Como alternativa, você pode especificar um Feed em tempo de design como sua fonte de dados. Para obter mais informações, consulte 
Usar um feed em tempo de design. 


e Selecione o elemento para o seu contêiner de dados clicando em uma das setas amarelas que aparecem na janela Seleção de dados, 
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ou então escolhendo uma ID no menu pop-up Contêineres de dados. 


Specily Datas Source 


senianpa fam o 
mens Duarte Soralhtrd dota avi (rovme. JE 


Ea o Chet a yada mentor tu che a cube corteres 


Check to saber the elamere no data container, | 


1 fere salad [sata nm! Organic buster iettuce with apçies, blood aranges, gorgonzola, and raspberry viraigrette. 


2 b- Noadie Salad nooedies. htm Liphtly sautemd in sesame cul mth baby bak cho portobeiio mushrocens. mod scnlhons. 


5 fem Facés Setran justmonhimi Terved wah new cotstoss. dicsd besta, Fisher partem, amd heman amet. 


A seleção do elemento para dados de contêiner do conjunto de dados HTML. 


No caso de arquivos grandes, você pode clicar na seta Expandir/reduzir, na parte inferior da janela Seleção de dados, para ver mais 
dados. 


Depois que você selecionar o elemento de contêiner para o conjunto de dados, o Dreamweaver exibirá uma visualização do conjunto de 
dados na janela Visualização de dados. 


e (Opcional) Selecione Seleção avançada de dados se quiser especificar seletores de dados CSS para o conjunto de dados. Por exemplo, 
se você especificar .product na caixa de texto Seletores de linha e .boximage na caixa de texto Seletores de coluna, o conjunto de 
dados incluirá somente as linhas com a classe .product atribuída e somente as colunas com a classe .boximage atribuída. 


Se quiser digitar mais de um seletor em determinada caixa de texto, separe-os com vírgula. 
Para obter mais informações, consulte Sobre os seletores de dados do Spry. 


* Quando terminar de usar a tela Especificar fonte de dados, clique em Concluído para criar o conjunto de dados imediatamente, ou 
então em Avançar para passar à tela Definir opções de dados. Se você clicar em Concluído, o conjunto de dados ficará disponível no 
painel Ligações (Janela > Ligações). 


4. Natela Definir opções de dados, faça o seguinte: 


e (Opcional) Defina os tipos de colunas do conjunto de dados selecionando uma coluna e escolhendo um tipo de coluna no menu pop-up 
Tipo. Por exemplo, se uma coluna no conjunto de dados contém números, selecione-a e escolha number no menu pop-up Tipo. Essa 
opção só será importante se você quiser que seus usuários possam ordenar os dados por essa coluna. 


Você pode selecionar uma coluna do conjunto de dados clicando em seu cabeçalho, escolhendo-a no menu pop-up Nome da coluna ou 
navegando até ela com as setas para a esquerda e para a direita no canto superior esquerdo da tela. 


e (Opcional) Especifique como deseja ordenar os dados selecionando a coluna a partir da qual deseja fazer a ordenação no menu pop-up 
Ordenar colunas. Depois de selecionar a coluna, você poderá especificar o uso de ordem crescente ou decrescente. 


e (Opcional: somente tabelas) Desmarque a opção Usar primeira linha como cabeçalho se quiser usar nomes de colunas genéricos (ou 
seja, column0, column1, column2 etc.) em vez de nomes de colunas especificados na sua fonte de dados HTML. 


Nota: Se você tiver selecionado algo diferente de uma tabela como elemento de contêiner do seu conjunto de dados, essa opção e a 
próxima não estarão disponíveis. O Dreamweaver usa automaticamente columnoO, column1, column? etc. como nomes de colunas de 
conjuntos de dados não baseados em tabelas. 


* (Opcional: somente tabelas) Selecione Usar colunas como linhas para reverter a orientação horizontal e vertical dos dados no conjunto 
de dados. Se você selecionar essa opção, as colunas serão usadas como linhas. 

e (Opcional) Selecione Filtrar linhas duplicadas para excluir as linhas duplicadas de dados do conjunto de dados. 

e (Opcional) Selecione Desativar cache de dados se quiser ter sempre acesso aos dados mais recentes no conjunto de dados. Se quiser 


que os dados sejam atualizados automaticamente, selecione Atualizar dados automaticamente e especifique um tempo de atualização 
em milissegundos. 


* Quando terminar de usar a tela Definir opções de dados, clique em Concluído para criar o conjunto de dados imediatamente, ou então 
em Avançar para passar à tela Escolher opções de inserção. Se você clicar em Concluído, o conjunto de dados ficará disponível no 
painel Ligações (Janela > Ligações). 
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5. 


6. 


Na tela Escolher opções de inserção, siga um destes procedimentos: 


* Selecione um layout para o novo conjunto de dados e especifique as opções de configuração adequadas. Para obter mais informações, 
consulte Escolher um layout para o conjunto de dados. 


e Selecione Não inserir HTML. Se você selecionar essa opção, o Dreamweaver criará o conjunto de dados, mas não adicionará HTML à 
página. O conjunto de dados ficará disponível no painel Ligações (Janela > Ligações), e você poderá arrastar dados manualmente do 
conjunto de dados para a página. 


Clique em Concluído. 


O Dreamweaver criará o conjunto de dados e, se você tiver selecionado uma opção de layout, exibirá na sua página o layout e os 
alocadores de espaço para os dados. Se observar a Visualização de código, você verá que o Dreamweaver adicionou ao cabeçalho 
referências aos arquivos SpryData.js e SpryHTMLDataSet.js. Esses arquivos são ativos importantes do Spry que funcionam em conjunto 
com a página. Não remova esse código da sua página, ou então o conjunto de dados não funcionará. Quando carregar sua página em um 
servidor, você precisará carregar também esses arquivos como dependentes. 


Criar um conjunto de dados XML do Spry 


2, 


Se você está apenas criando um conjunto de dados, não precisa se preocupar com o ponto de inserção. Mas, se está criando um conjunto 
de dados e inserindo um layout, verifique se o ponto de inserção está onde você deseja inserir o layout na página. 


Escolha Inserir > Spry > Conjunto de dados do Spry. 
Na tela Especificar fonte de dados, faça o seguinte: 


* Selecione XML no menu pop-up Selecionar tipo de dados. 


* Especifigque um nome para o novo conjunto de dados. Da primeira vez que você criar um conjunto de dados, o nome padrão será ds1. 
O nome do conjunto de dados pode conter letras, números e sublinhados, mas não pode começar com um número. 


e Especifique o caminho para o arquivo que contém a fonte de dados XML. Pode ser um caminho relativo para um arquivo local no seu 
site (por exemplo, arquivos de dados/dados.xmtl), ou então um URL absoluto para uma página da Web (usando HTTP ou HTTPS). 
Você pode clicar no botão Procurar para navegar até um arquivo local e selecioná-lo. 


O Dreamweaver processa a fonte de dados XML na janela Elementos de linha, exibindo a árvore XML de elementos de dados 
disponíveis para seleção. Os elementos repetidos são marcados com um sinal de adição (+) e os elementos-filho são recuados. 


Como alternativa, você pode especificar um Feed em tempo de design como sua fonte de dados. Para obter um feed de projeto- tempo. 


e Selecione o elemento que contém os dados que você deseja exibir. Geralmente é um elemento repetido como <menu item>, com 
vários elementos-filho como <item>, <link>, <description> etc. 
Specily Data Source 


Sadat Dota Tyçe (om 


mpetêyOutardo detakpsoss or 


Sah apocialsimanu tam 


Data Preshem 
item | [ | descrigtan 


Summer Esisd salsa him argana bues letiuce mah soples, Bicod oranges. gorponzola, and respberry 
vrmgrette 


Thai Noodie Ssisd rosdies hem Tantiy Ssused 1 sesame Di will Dairy DO DOncbaio mushrooms, and seniores. 


Grãea Pacfic Ssimem | ssiman ami served with new potatoes, diced Deets, Mabon parisey. ard lemon mes 


Seleção de um elemento repetido para um conjunto de dados XML. 


Depois que você selecionar o elemento de contêiner para o conjunto de dados, o Dreamweaver exibirá uma visualização do conjunto de 
dados na janela Visualização de dados. A caixa de texto XPath exibe uma expressão que mostra onde o nó selecionado está localizado 
no arquivo XML de origem. 


Nota: XPath (XML Path Language) é uma sintaxe para lidar com trechos de um documento XML. Na maioria das vezes, essa sintaxe é 
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usada como uma linguagem de consulta para dados XML, assim como a linguagem SQL é usada para bancos de dados de consulta. Para 
obter mais informações sobre o XPath, consulte a especificação da linguagem XPath no site da W3C em www.w3.0org/TR/xpath. 


e Quando terminar de usar a tela Especificar fonte de dados, clique em Concluído para criar o conjunto de dados imediatamente, ou 
então em Avançar para passar à tela Definir opções de dados. Se você clicar em Concluído, o conjunto de dados ficará disponível no 
painel Ligações (Janela > Ligações). 


4. Natela Definir opções de dados, faça o seguinte: 


e (Opcional) Defina os tipos de colunas do conjunto de dados selecionando uma coluna e escolhendo um tipo de coluna no menu pop-up 
Tipo. Por exemplo, se uma coluna no conjunto de dados contém números, selecione-a e escolha number no menu pop-up Tipo. Essa 
opção só será importante se você quiser que seus usuários possam ordenar os dados por essa coluna. 


Você pode selecionar uma coluna do conjunto de dados clicando em seu cabeçalho, escolhendo-a no menu pop-up Nome da coluna ou 
navegando até ela com as setas para a esquerda e para a direita no canto superior esquerdo da tela. 


e (Opcional) Especifique como deseja ordenar os dados selecionando a coluna a partir da qual deseja fazer a ordenação no menu pop-up 
Ordenar coluna. Depois de selecionar a coluna, você poderá especificar o uso de ordem crescente ou decrescente. 


e (Opcional) Selecione Filtrar linhas duplicadas para excluir as linhas duplicadas de dados do conjunto de dados. 


e (Opcional) Selecione Desativar cache de dados se quiser ter sempre acesso aos dados mais recentes no conjunto de dados. Se quiser 
atualizar os dados automaticamente, selecione Atualizar dados automaticamente e especifique um tempo de atualização em 
milissegundos. 


e Quando terminar de usar a tela Definir opções de dados, clique em Concluído para criar o conjunto de dados imediatamente, ou então 
em Avançar para passar à tela Escolher opções de inserção. Se você clicar em Concluído, o conjunto de dados ficará disponível no 
painel Ligações (Janela > Ligações). 


5. Natela Escolher opções de inserção, siga um destes procedimentos: 


e Selecione um layout para o novo conjunto de dados e especifique as opções de configuração adequadas. Para obter mais informações, 
consulte Escolher um layout para o conjunto de dados. 


e Selecione Não inserir HTML. Se você selecionar essa opção, o Dreamweaver criará o conjunto de dados, mas não adicionará HTML à 
página. O conjunto de dados ficará disponível no painel Ligações (Janela > Ligações), e você poderá arrastar dados manualmente do 
conjunto de dados para a página. 


6. Clique em Concluído. 


O Dreamweaver criará o conjunto de dados e, se você tiver selecionado uma opção de layout, exibirá na sua página o layout e os 
alocadores de espaço para os dados. Se observar a Visualização de código, você verá que o Dreamweaver adicionou ao cabeçalho 
referências aos arquivos xpath.js e SpryData.js. Esses arquivos são ativos importantes do Spry que funcionam em conjunto com a página. 
Não remova esse código da sua página, ou então o conjunto de dados não funcionará. Quando carregar sua página em um servidor, você 
precisará carregar também esses arquivos como dependentes.. 


Escolher um layout para o conjunto de dados 


A tela Escolher opções de inserção permite selecionar diferentes opções de exibição para os valores do conjunto de dados na página. Você pode 
exibir os dados usando uma tabela dinâmica do Spry, um layout mestre/detalhado, um layout de contêineres empilhados (uma única coluna) ou 
um layout de contêineres empilhados com área de destaque (duas colunas). Uma representação em miniatura da aparência de cada layout é 
mostrada na tela Escolher opções de inserção. 


Layout de tabela dinâmica 


Selecione essa opção se quiser exibir seus dados em uma tabela dinâmica do Spry. As tabelas do Spry permitem a ordenação dinâmica de 
colunas e outros comportamentos interativos. 


Depois de selecionar essa opção, clique no botão Configurar para abrir a caixa de diálogo Inserir tabela e siga estas etapas: 
1. No painel Colunas, ajuste as colunas da tabela seguindo este procedimento: 
e Selecione um nome de coluna e clique no sinal de subtração (-) para excluir a coluna da tabela. Clique no sinal de adição (+) e 
selecione um nome de coluna para adicionar novas colunas à tabela. 
* Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. A coluna movida para cima fica mais à 
esquerda da tabela exibida, e a coluna movida para baixo aparece à direita. 
2. Para tornar uma coluna ordenável, selecione-a no painel Colunas e escolha Ordenar coluna quando o cabeçalho estiver selecionado. Todas 
as colunas são ordenáveis por padrão. 


Se quiser tornar uma coluna não ordenável, selecione seu nome no painel Colunas e desmarque Ordenar coluna quando o cabeçalho 
estiver selecionado. 
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3. Se você tem estilos CSS associados à página, seja como uma folha de estilos anexada ou como um conjunto de estilos individuais na 
página HTML, pode aplicar uma classe CSS a uma ou mais das seguintes opções: 


Classe Linha ímpar Altera a aparência das linhas com numeração ímpar na tabela dinâmica, de acordo com o estilo de classe 
selecionado. 


Classe Linha par Altera a aparência das linhas com numeração par na tabela dinâmica, de acordo com o estilo de classe selecionado. 


Classe Focalização Altera a aparência de uma linha da tabela quando você move o mouse sobre ela, de acordo com o estilo de classe 
selecionado. 


Classe Seleção Altera a aparência de uma linha da tabela quando você clica nela, de acordo com o estilo de classe selecionado. 


Nota: A ordem das classes ímpar, par, de focalização e de seleção na sua folha de estilos é muito importante. As regras devem estar na 
ordem exata indicada acima (ímpar, par, focalização, seleção). Se a regra de focalização aparecer abaixo da regra de seleção na folha de 
estilos, o efeito de focalização não aparecerá até que o usuário mova o mouse sobre outra linha. Se as regras de focalização e seleção 
aparecerem acima das regras par e ímpar na folha de estilos, os efeitos de par e ímpar não funcionarão. Você pode arrastar as regras no 
painel CSS para ordená-las corretamente, ou então manipular o código CSS diretamente. 


4. Se a tabela que você está criando for se tornar uma tabela mestre dinâmica do Spry, selecione Atualizar regiões de detalhes quando a linha 
estiver selecionada. Para obter mais informações, consulte Sobre tabelas mestre dinâmicas do Spry e atualização de regiões de detalhes. 


5. Clique em OK para fechar a caixa de diálogo. Depois, clique em Concluído na tela Escolher opções de inserção. 


Se estiver na Visualização de design, você verá a tabela aparecer com uma linha de cabeçalhos e uma linha de referências de dados. As 
referências de dados aparecem realçadas e entre chaves ((). 


Layout mestreldetalhado 

Selecione essa opção se quiser exibir seus dados usando um layout mestre/detalhado. O layout mestre/detalhado permite aos usuários clicar em 
um item na região mestre (à esquerda) que atualiza as informações na região detalhada (à direita). Normalmente, a região mestre contém uma 
longa lista de nomes; por exemplo, uma lista dos produtos disponíveis. Quando o usuário clica em um dos nomes de produtos, a região detalhada 
exibe muito mais informações detalhadas sobre a seleção. 


Depois de selecionar essa opção, clique no botão Configurar para abrir a caixa de diálogo Inserir layout mestre/detalhado e siga estas etapas: 
1. No painel Colunas mestre, ajuste o conteúdo da sua região mestre da seguinte forma: 


e Selecione um nome de coluna e clique no sinal de subtração (-) para excluir a coluna da região mestre. Clique no sinal de adição (+) e 
selecione um nome de coluna para adicionar novas colunas à região mestre. Por padrão, o Dreamweaver preenche a região mestre 
com dados da primeira coluna do conjunto de dados. 


e Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna para cima ou para 
baixo no painel Colunas mestre define a ordem de aparecimento dos dados na região mestre da página. 


2. Repita as etapas acima para o painel Colunas detalhadas. Por padrão, o Dreamweaver preenche a região detalhada com todos os dados 
que não aparecem na região mestre (ou seja, todas as colunas, exceto a primeira do conjunto de dados). 


3. (Opcional) Defina diferentes tipos de contêiner para os dados na região detalhada. Para fazer isso, selecione o nome de uma coluna 
detalhada e escolha o contêiner que deseja usar para ela no menu pop-up Tipo de contêiner. Você pode escolher entre as tags DIV, P, 
SPAN ou H1-H6. 


4. Clique em OK para fechar a caixa de diálogo. Depois, clique em Concluído na tela Escolher opções de inserção. 


Se estiver na Visualização de design, você verá que as regiões mestre/detalhada aparecerão preenchidas com as referências de dados 
selecionadas por você. As referências de dados aparecem realçadas e entre chaves (()). 


Layout de contêineres empilhados 


Selecione essa opção se quiser exibir seus dados usando uma estrutura de contêineres repetidos na página. Por exemplo, se você tem quatro 
colunas de dados no conjunto de dados, cada contêiner pode incluir as quatro colunas, e a estrutura de contêineres se repetirá para cada linha 
no conjunto de dados. 


Depois de selecionar essa opção, clique no botão Configurar para abrir a caixa de diálogo Inserir contêineres empilhados e siga estas etapas: 
1. No painel Colunas, ajuste o conteúdo dos seus contêineres empilhados da seguinte forma: 
* Selecione um nome de coluna e clique no sinal de subtração (-) para excluir a coluna dos contêineres empilhados. Clique no sinal de 


adição (+) e selecione um nome de coluna para adicionar novas colunas aos contêineres. Por padrão, o Dreamweaver preenche os 
contêineres empilhados com dados de todas as colunas do conjunto de dados. 
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* Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna para cima ou para 
baixo no painel Colunas define a ordem de aparecimento dos dados nos contêineres empilhados da página. 


2. (Opcional) Defina diferentes tipos de contêiner para os dados nos contêineres empilhados. Para fazer isso, selecione o nome de uma 
coluna do conjunto de dados e escolha o contêiner que deseja usar para ela no menu pop-up Tipo de contêiner. Você pode escolher entre 
as tags DIV, P, SPAN ou H1-H6. 


3. Clique em OK para fechar a caixa de diálogo. Depois, clique em Concluído na tela Escolher opções de inserção. 


Se estiver na Visualização de design, você verá o contêiner preenchido com as referências de dados selecionadas por você. As referências 
de dados aparecem realçadas e entre chaves (()). 


Layout de contêineres empilhados com área de destaque 

Selecione essa opção se quiser exibir seus dados usando uma estrutura de contêineres repetidos na página, com uma área de destaque em 
cada contêiner. Normalmente, a área de destaque contém uma imagem. O layout de área de destaque é semelhante ao de contêineres 
empilhados. A diferença é que, no layout de área de destaque, a exibição dos dados é dividida em duas colunas separadas (dentro do mesmo 
contêiner). 


Depois de selecionar essa opção, clique no botão Configurar para abrir a caixa de diálogo Inserir layout de área de destaque e siga estas etapas: 
1. No painel Colunas de destaque, ajuste o conteúdo da sua área de destaque da seguinte forma: 


e Selecione um nome de coluna e clique no sinal de subtração (-) para excluir a coluna da área de destaque. Clique no sinal de adição 
(+) e selecione um nome de coluna para adicionar novas colunas à área de destaque. Por padrão, o Dreamweaver preenche a área de 
destaque com dados da primeira coluna do conjunto de dados. 


* Selecione um nome de coluna e clique nas setas para cima ou para baixo para mover a coluna. Mover uma coluna para cima ou para 
baixo no painel Colunas de destaque define a ordem de aparecimento dos dados na área de destaque da página. 


2. (Opcional) Defina diferentes tipos de contêiner para os dados na área de destaque. Para fazer isso, selecione o nome de uma coluna do 
conjunto de dados e escolha o contêiner que deseja usar para ela no menu pop-up Tipo de contêiner. Você pode escolher entre as tags 
DIV, P, SPAN ou H1-H6. 


3. Repita as etapas acima para o painel Colunas empilhadas. Por padrão, o Dreamweaver preenche as colunas empilhadas com todos os 
dados que não aparecem na área de destaque (ou seja, todas as colunas, exceto a primeira do conjunto de dados). 


4. Clique em OK para fechar a caixa de diálogo. Depois, clique em Concluído na tela Escolher opções de inserção. 


Se estiver na Visualização de design, você verá a área de destaque com os contêineres empilhados ao longo dela, preenchida com as 
referências de dados selecionadas por você. As referências de dados aparecem realçadas e entre chaves (()). 


Não inserir HTML 
Selecione essa opção se quiser criar um conjunto de dados, mas não quiser que o Dreamweaver insira nele um layout HTML. O conjunto de 
dados ficará disponível no painel Ligações (Janela > Ligações), e você poderá arrastar dados manualmente do conjunto de dados para a página. 


Mesmo que você crie um conjunto de dados sem inserir um layout, ainda poderá inserir um dos layouts HTML disponíveis a qualquer momento. 
Para fazer isso, clique duas vezes no nome do conjunto de dados no painel Ligações, continue clicando para chegar à tela Escolher opções de 
inserção, selecione o layout e clique em Concluído. 


Nota: Você também pode arrastar o nome do conjunto de dados do painel Ligações para o ponto de inserção na página. Quando você fizer isso, 
a tela Escolher opções de inserção será aberta. Selecione o layout e clique em Concluído. 


Editar um conjunto de dados 
Depois de criar um conjunto de dados do Spry, você poderá editá-lo a qualquer momento. 


e No painel Ligações (Janela > Ligações), clique duas vezes no nome do seu conjunto de dados e edite-o. 


Nota: Quando você edita um conjunto de dados e seleciona um novo layout na tela Escolher opções de inserção, o Dreamweaver não substitui o 
layout que já está na página. Em vez disso, insere um novo. 


Usar um feed em tempo de design 

Se você está trabalhando com dados que ainda estão em desenvolvimento, talvez seja útil usar um feed em tempo de design. Por exemplo, se o 
desenvolvedor do servidor ainda estiver finalizando o banco de dados por trás do seu arquivo de dados XML, você pode usar uma versão de 
teste do arquivo para criar sua página separadamente do desenvolvimento do banco de dados. 


Quando você usa um feed em tempo de design, o Dreamweaver preenche seu ambiente de trabalho somente com dados desse feed. As 
referências à fonte de dados existentes no código da página permanecem como referências à fonte de dados real que você deseja utilizar. 
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1. Comece criando um conjunto de dados do Spry (consulte os procedimentos anteriores para obter instruções). 
2. Natela Especificar fonte de dados, clique no link Feed em tempo de design. 


3. Clique no botão Procurar para localizar o feed em tempo de design e clique em OK. 


Sobre os seletores de dados do Spry 

Quando você usa o Dreamweaver para criar um conjunto de dados do Spry, por padrão, o Dreamweaver inclui todos os dados em um contêiner 
selecionado. Você pode refinar essa seleção usando seletores de dados CSS. Os seletores de dados CSS permitem incluir somente uma parte 
dos dados da fonte de dados, possibilitando que você especifique regras CSS anexadas a determinados dados. Por exemplo, se você especificar 
«product na caixa de texto Seletores de linha da tela Especificar fonte de dados, o Dreamweaver criará um conjunto de dados contendo somente 
linhas com a classe .product atribuída. 


Você precisa selecionar a opção Seleção avançada de dados, na tela Especificar fonte de dados, para que as caixas dos seletores de dados se 
tornem ativas. Se você inserir seletores de dados e desmarcar essa opção, o Dreamweaver irá reter o que você digitar nas caixas, mas não os 
utilizará como filtros para o conjunto de dados. 


Sobre tabelas mestre dinâmicas do Spry e atualização de regiões de detalhes 

Um dos usos mais comuns dos conjuntos de dados do Spry é criar uma ou mais tabelas HTML que atualizam dinamicamente outros dados da 
página em resposta a uma ação do usuário. Por exemplo, se um usuário seleciona um produto em uma lista de produtos de uma tabela, o 
conjunto de dados pode atualizar imediatamente os dados em outra parte da página com as informações detalhadas sobre o produto selecionado. 
Com o Spry, essas atualizações não exigem uma atualização de página. 


Essas regiões separadas da página são conhecidas como regiões mestre e de detalhes. Normalmente, uma área da página (a região mestre) 
exibe uma lista de itens categorizados (por exemplo, uma lista de produtos), e outra área da página (a região de detalhes) exibe mais 
informações sobre um registro selecionado. 


Cada conjunto de dados mantém a noção de uma linha atual e, por padrão, a linha atual é definida como a primeira linha de dados no conjunto 
de dados. Quando um usuário faz seleções diferentes em uma região mestre (novamente, adotando o exemplo de uma lista de produtos 
distintos), na verdade, o Spry altera a linha atual do conjunto de dados. Como a região de detalhes é dependente da região mestre, todas as 
alterações ocorridas a partir da interação do usuário com a região mestre (por exemplo, a seleção de produtos diferentes) resultam em alterações 
nos dados exibidos na região de detalhes. 


O Dreamweaver cria layouts mestre/detalhados automaticamente, para que todas as associações corretas entre regiões mestre e de detalhes 
estejam presentes. Mas, se você quiser criar uma tabela mestre dinâmica por conta própria, terá a opção de prepará-la para a associação 
posterior com uma região de detalhes. Quando você seleciona a opção Atualizar regiões de detalhes quando a linha estiver selecionada (na caixa 
de diálogo Inserir tabela), o Dreamweaver insere uma tag spry: setrow dentro da tag da linha repetitiva na sua tabela dinâmica. Esse atributo 
prepara a tabela como mestre, com a capacidade de redefinir a linha atual do conjunto de dados à medida que o usuário interage com a tabela. 


Para obter mais informações sobre como criar regiões mestre/de detalhes, consulte o Guia do desenvolvedor do Spry em 
www.adobe.com/go/learn dw sdg masterdetail br. 


: a Rae Rr 
Criar uma região do Spry ara o início 


A estrutura do Spry usa dois tipos de regiões: uma é a região do Spry ao redor de objetos de dados como tabelas e listas de repetições, a outra é 
uma região de detalhes do Spry usada com um objeto de tabela mestre para permitir a atualização dinâmica de dados em uma página do 
Dreamweaver. 


Todos os objetos de dados do Spry devem estar em uma região do Spry. Se você tentar adicionar um objeto de dados do Spry antes de 
adicionar uma região do Spry a uma página, o Dreamweaver solicitará a inclusão de uma região do Spry. Por padrão, as regiões do Spry estão 
em contêineres div HTML. Você pode adicioná-las antes de adicionar uma tabela, adicioná-las automaticamente ao inserir uma tabela ou lista 
de repetições ou colocá-las em torno de tabelas ou objetos de lista de repetições existentes. 


Ao adicionar uma região de detalhes, normalmente você adiciona o objeto de tabela mestre primeiro e seleciona a opção Atualizar regiões de 
detalhes (consulte Layout de tabela dinâmica). O único valor diferente e específico para uma região de detalhes é a opção Tipo na caixa de 
diálogo Inserir região do Spry. 


1. Selecione Inserir > Spry > Região do Spry. 
Você também pode clicar no botão Região do Spry, na categoria Spry do painel Inserir. 


2. Para o objeto recipiente, selecione a opção <div> ou <span>. O padrão é usar um recipiente <div>. 
3. Escolha uma das seguintes opções: 


e Para criar uma Região do Spry, selecione Região (a padrão) como o tipo de região a inserir. 


e Para criar uma Região de detalhes do Spry, selecione a opção Região de detalhes. Você só usaria uma região de detalhes se quisesse 
ligar os dados dinâmicos que são atualizados como dados em outras alterações de região do Spry. 


Nota: É preciso inserir uma região de detalhes em um <div> diferente da região da tabela mestre. Convém usar a Visualização de código 
para posicionar o ponto de inserção corretamente. 
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4. Escolha o conjunto de dados do Spry no menu. 
5. Se quiser criar ou alterar a região definida para um objeto, selecione o objeto e escolha uma destas opções: 


Quebra de linha da seleção Coloca uma nova região em torno de um objeto. 


Substituir seleção Substitui uma região existente de um objeto. 


6. Ao clicar em OK, o Dreamweaver coloca um alocador de espaço de região na página com o texto “O conteúdo da região do Spry é inserido 
aqui.” Você pode substituir o texto desse alocador de espaço por um objeto de dados do Spry, como uma tabela ou lista de repetições, ou 
por dados dinâmicos no painel Ligações (Janela > Ligações). 


Nota: No painel Ligações, existem alguns elementos internos do Spry, ds RowlD, ds CurrentRowilD e ds RowCount, também listados. O 
Spry os utiliza para definir a linha na qual o usuário clicou ao determinar como atualizar as regiões de detalhes dinâmicas. 


Inter 


O painel Ligações exibe os dados disponíveis no conjunto de dados. 


7. Para substituir o texto do alocador de espaço por um objeto de dados do Spry (por exemplo, uma tabela do Spry), clique no botão 
apropriado do objeto de dados do Spry, na categoria Spry do painel Inserir. 


8. Para substituir o texto do alocador de espaço por dados dinâmicos, use um dos seguintes métodos: 
e Arraste um ou mais elementos no painel Ligações sobre o texto selecionado. 


e Na Visualização de código, digite o código de um ou mais elementos diretamente. Use este formato: (dataset - name: :element - 
name), como em (ds1::category). ou (dsProducts:: desc). Se você está usando somente um conjunto de dados no arquivo ou 
elementos de dados do mesmo conjunto de dados definido para a região, é possível omitir o nome do conjunto de dados e apenas 
gravar (category) ou (desc). 


Independentemente do método que você usar para definir o conteúdo de sua região, estas linhas serão adicionadas ao código HTML: 


<div spry:region="ds1">(name)(category)</div> 
<div spry:region="ds2">(ds1::nameJ(ds1::descheader)</div> 


Para o início 


Criar uma região repetitiva do Spry 


Você pode adicionar regiões repetitivas para exibir os dados. Uma região repetitiva é uma estrutura de dados simples que você pode formatar 
quando necessário para apresentar seus dados. Por exemplo, você pode usar uma região repetida para exibir um conjunto de miniaturas 
fotográficas, uma depois da outra, em um objeto de layout de página como um elemento AP div. 


1. Selecione Inserir > Spry > Repetição do Spry. 
Você também pode clicar no botão Repetição do Spry, na categoria Spry do painel Inserir. 


2. Para o recipiente do objeto, selecione a opção <div> ou <span> dependendo do tipo de tag desejado. O padrão é usar um recipiente <div>. 

3. Selecione a opção Repetir (padrão) ou Repetir filhos. 
Se você quiser mais flexibilidade, convém usar a opção Repetir filhos que valida os dados de cada linha de uma lista no nível filho. Por 
exemplo, se você tem uma lista <ul>, os dados são verificados no nível <li>. Se você escolher a opção Repetir, os dados serão 
verificados no nível <ul>. A opção Repetir filhos pode ser especialmente útil se você usar expressões condicionais no código. 

4. Escolha o conjunto de dados do Spry no menu. 

5. Se já há texto ou elementos selecionados, você pode envolvê-los ou substituí-los. 

6. Clique em OK para exibir uma região de repetição na página. 


Nota: Todos os objetos de dados do Spry precisam estar em regiões. Então, verifique se você criou uma região do Spry na sua página 
antes de inserir uma região repetitiva. 


7. Ao clicar em OK, o Dreamweaver insere um alocador de espaço de região na página com o texto “O conteúdo da região do Spry é inserido 
aqui.” Você pode substituir o texto desse alocador de espaço por um objeto de dados do Spry, como uma tabela ou lista de repetições, ou 
por dados dinâmicos no painel Ligações (Janela > Ligações). 
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Nota: No painel Ligações, existem alguns elementos internos do Spry, ds RowlD, ds CurrentRowlD e ds RowCount, também listados. O 
Spry os utiliza para definir a linha na qual o usuário clicou ao determinar como atualizar as regiões de detalhes dinâmicas. 


O ds RowiD 
O ds CurertRonD 
O ds RomCount 


| inte 


O painel Ligações exibe os dados disponíveis no conjunto de dados. 


8. Para substituir o texto do alocador de espaço por um objeto de dados do Spry, clique no botão apropriado do objeto de dados do Spry no 
painel Inserir. 


9. Para substituir o texto do alocador de espaço por um ou mais dados dinâmicos, use um dos seguintes métodos: 
e Arraste um ou mais elementos no painel Ligações sobre o texto selecionado. 


e Na Visualização de código, digite o código de um ou mais elementos diretamente. Use este formato: (dataset - name: :element - 
name), como em (ds1::category). ou (dsProducts:: desc). Se você está usando somente um conjunto de dados no arquivo ou 
elementos de dados do mesmo conjunto de dados definido para a região, é possível omitir o nome do conjunto de dados e apenas 
gravar (category) ou fdesc+. 


Independentemente do método que você usar para definir o conteúdo de sua região, estas linhas serão adicionadas ao seu código HTML: 


<div spry:region="ds1">(name)fcategory)</div> 
<div spry:region="ds2">(ds1::nameJ(ds1::descheader)</div> 


Criar uma região de listas de repetição do Spry cada 


Você pode adicionar listas de repetição para exibir os dados como uma lista ordenada, uma lista não ordenada (com marcadores), uma lista de 
definições ou uma lista suspensa. 


1. Selecione Inserir > Spry > Lista de repetição do Spry. 
Você também pode clicar no botão Lista de repetição do Spry, na categoria Spry do painel Inserir. 


2. Selecione a tag recipiente a ser usada: UL, OL, DL ou SELECT. As outras opções variam de acordo com o recipiente escolhido. Se você 
escolher SELECT, defina os seguintes campos: 


e Exibir coluna: é isto que aparece quando os usuários visualizam a página no navegador. 
* Coluna de valor: este é o valor real enviado ao servidor em segundo plano. 
Por exemplo, é possível criar uma lista de estados e mostrar os usuários Alabama e Alaska, mas enviar AL ou AK ao servidor. Você 


também pode usar SELECT como uma ferramenta de navegação e mostrar os nomes de produto como “Adobe Dreamweaver” e “Adobe 
Acrobat” aos usuários, mas enviar URLs como “support/products/dreamweaver.html” e “support/products/acrobat.html” ao servidor. 


3. Escolha o conjunto de dados do Spry no menu. 
4. Escolha as colunas a serem exibidas. 


5. Clique em OK para exibir uma região de lista de repetição na página. Na Visualização de código, você pode ver que as tags HTML <ul>, 
<ol>, <dl> ou as tags de seleção FORM são inseridas no arquivo. 


Nota: Se você tentar inserir uma região de lista de repetição sem ter criado uma região, o Dreamweaver solicitará a inclusão de uma para que 
você possa inserir a tabela. Todos os objetos de dados do Spry devem estar contidos nas regiões. 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Exibição de registros de banco de dados 


Sobre os registros do banco de dados 

Comportamentos de servidor e elementos de formatação 

Aplicação de elementos tipográficos e de layout de página a dados dinâmicos 
Navegação em resultados do conjunto de recursos do banco de dados 
Criar uma barra de navegação do conjunto de registros 

Barras de navegação do conjunto de registros personalizadas 

Tarefas de design da barra de navegação 

Exibir e ocultar regiões com base nos resultados do conjunto de registros 
Exibir vários resultados do conjunto de registros 

Criar uma tabela dinâmica 

Criar contadores de registros 

Usar formatos de dados predefinidos 


E Para o início 
Sobre os registros do banco de dados 
A exibição de registros do banco de dados envolve a recuperação de informações armazenadas em um banco de dados ou em outra fonte de 
conteúdo, além do processamento dessas informações em uma página da Web. O Dreamweaver fornece vários métodos de exibição de 
conteúdo dinâmico, além de muitos comportamentos de servidor incorporados que permitem aprimorar a apresentação de conteúdo dinâmico e 
possibilitam aos usuários percorrer e navegar nas informações retornadas de um banco de dados com mais facilidade. 


Os bancos de dados e as demais fontes de conteúdo dinâmico oferecem mais eficiência e flexibilidade na pesquisa, na classificação e na 
visualização de grandes armazenamentos de informações. O uso de um banco de dados para armazenar conteúdo de sites se justifica quando 
você precisa armazenar grandes quantidades de informações e, em seguida, recuperar e exibir essas informações de maneira significativa. O 
Dreamweaver oferece várias ferramentas e comportamentos predefinidos para ajudá-lo a recuperar e a exibir as informações armazenadas em 
um banco de dados de maneira eficiente. 


E Es P, iníci 
Comportamentos de servidor e elementos de formatação REA 


O Dreamweaver fornece os seguintes comportamentos de servidor e elementos de formatação para permitir a exibição de dados dinâmicos: 


Formatos Permitem que você aplique tipos diferentes de valores numéricos, monetários, de data/hora e porcentagem a textos dinâmicos. 

Por exemplo, caso o preço de um item em um conjunto de registros seja 10.989, você pode exibir o preço na página como US$ 10.99 
selecionando o formato “Moeda - 2 casas decimais” do Dreamweaver. Esse formato exibe um número usando duas casas decimais. Caso o 
número tenha mais de duas casas decimais, o formato de dados arredonda o número para o decimal mais próximo. Caso o número não tenha 
casas decimais, o formato de dados adiciona uma casa decimal e dois zeros. 


Região repetitiva Comportamentos de servidor permitem exibir vários itens retornados de uma consulta de banco de dados e especificar o 
número de registros a ser exibido por página. 

Navegação do conjunto de registros Comportamentos de servidor permitem inserir elementos de navegação que permitem aos usuários passar 
ao grupo de conjuntos de registros anteriores ou posteriores retornados pelo conjunto de registros. Por exemplo, caso opte por exibir 10 registros 
por página usando o objeto de servidor Região repetitiva e o conjunto retorne 40 registros, você pode navegar em 10 registros por vez. 

Barra de status Conjunto de registros Comportamentos de servidor permitem incluir um contador que mostra aos usuários onde eles estão 
dentro de um conjunto de registros em relação ao número total de registros retornados. 

Mostrar região Comportamentos de servidor permitem optar por mostrar ou ocultar itens na página com base na relevância dos registros 
exibidos no momento. Por exemplo, caso um usuário tenha navegado até o último registro de um conjunto, você pode ocultar o link Próximo e 
exibir apenas o link Anterior. 


: Ba , E vs Ea 2 ALAS Para o início 
Aplicação de elementos tipográficos e de layout de página a dados dinâmicos 
Um recurso eficiente do Dreamweaver é a possibilidade de apresentar dados dinâmicos dentro de uma página estruturada e de aplicar 
formatação tipográfica usando HTML e CSS. Para aplicar formatos a dados dinâmicos no Dreamweaver, formate as tabelas e os alocadores de 
espaço para os dados dinâmicos usando as ferramentas de formatação do Dreamweaver. Quando são inseridos usando a fonte de dados, os 
dados adotam automaticamente a formatação da fonte, do parágrafo e da tabela especificada por você. 


as . P, iníci 
Navegação em resultados do conjunto de recursos do banco de dados di 
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Os links para navegação no conjunto de registros permitem aos usuários mover de um registro para o próximo ou de um conjunto de registros 
para o próximo. Por exemplo, depois de criar uma página para exibir cinco registros por vez, você talvez queira adicionar links como, por 
exemplo, Próximo ou Anterior que permitem aos usuários exibir os cinco registros próximos ou anteriores. 


Você pode criar quatro tipos de links de navegação para percorrer um conjunto de registros: Primeiro, Anterior, Próximo e Último. Uma única 
página pode conter qualquer número desses links, desde que todos funcionem em um único conjunto de registros. Você não pode adicionar links 
para percorrer um segundo conjunto de registros na mesma página. 


Os links para navegação no conjunto de registros exigem os seguintes elementos dinâmicos: 
* Um conjunto de registros para navegação 
e Conteúdo dinâmico na página para exibir o(s) registro(s) 
e Texto ou imagens na página para funcionar como uma barra de navegação clicável 
* Um conjunto Mover para registro dos comportamentos de servidor para navegar no conjunto de registros 


Você pode adicionar os dois últimos elementos usando o objeto de servidor Barras para navegação em registros ou adicioná-los 
separadamente usando as ferramentas de design e o painel Comportamentos de servidor. 


: a . ] PRERERA 
Criar uma barra de navegação do conjunto de registros E 


Você pode criar uma barra de navegação do conjunto de registros em uma única operação usando o comportamento de servidor Barra de 
navegação do conjunto de registros. O objeto de servidor adiciona os seguintes blocos de criação à página: 


e Uma tabela em HTML com links de texto ou imagem 
* Um conjunto de comportamentos de servidor Mover para 


* Um conjunto de comportamentos de servidor Mostrar região 


A versão em texto de Barra de navegação do conjunto de registros é semelhante a: 


Antes de colocar a barra de navegação na página, verifique se a página contém um conjunto de registros para navegação e um layout de 
página no qual exibir os registros. 


Depois de colocar a barra de navegação na página, você pode usar as ferramentas de design para personalizar a barra. Você também pode 
editar os comportamentos de servidor Mover para e Mostrar região clicando duas vezes neles no painel Comportamentos de servidor. 


O Dreamweaver cria uma tabela que contém links de texto ou de imagem que permitem ao usuário navegar no conjunto de registros 
selecionado quando clicado. Quando o primeiro registro do conjunto é exibido, os links Primeiro e Anterior ou as imagens permanecem 
ocultos. Quando o último registro do conjunto é exibido, os links Próximo e Último ou as imagens permanecem ocultos. 


Você pode personalizar o layout da barra de navegação usando as ferramentas de design e o painel Comportamentos de servidor. 


1. Na Visualização de design, coloque o ponto de inserção no local da página onde você deseja que a barra de navegação seja exibida. 


2. Exiba a caixa de diálogo Barra de navegação do conjunto de registros (Inserir > Objetos de dados > Paginação do conjunto de registros > 
Barra de navegação do conjunto de registros). 


3. Selecione o conjunto de registros em que você deseja navegar no menu pop-up Conjunto de registros. 


4. Na seção Exibir usando, selecione o formato para exibir os links de navegação na página e clique em OK. 
Texto Coloca links de texto na página. 


Imagens Inclui imagens gráficas como links. O Dreamweaver usa arquivos de imagem próprios. Você pode substituir essas imagens por 
arquivos de imagem próprios depois de colocar a barra na página. 


ra a É ã P iníci 
Barras de navegação do conjunto de registros personalizadas RR 


Você pode criar sua própria barra de navegação do conjunto de registros que usa layout e estilos de formatação mais complexos do que os da 
tabela simples criada pelo objeto de servidor Barra de navegação do conjunto de registros. 


Para criar sua própria barra de navegação do conjunto de registros, você deve: 
e Criar links de navegação em texto ou imagens 


e Colocar os links na página usando a Visualização de design 
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e Atribuir comportamentos de servidor individuais a cada link de navegação 


Esta seção descreve como atribuir comportamentos de servidor individuais aos links de navegação. 


Criar e atribuir comportamentos de servidor a um link de navegação 
1. Na Visualização de design, selecione a sequência de caracteres de texto ou a imagem que você deseja usar como link para navegação em 
registros. 
2. Abra o painel Comportamentos do servidor (Janela > Comportamentos do servidor) e clique no botão de adição (+). 
3. Selecione Paginação do conjunto de registros no menu pop-up e, depois, selecione um comportamento de servidor apropriado no link dos 
comportamentos de servidor listados. 


Caso o conjunto contenha vários registros, o comportamento de servidor Mover para último registro pode demorar muito para ser executado 
quando o usuário clica no link. 


4. No menu pop-up Conjunto de registros, selecione o conjunto que contém os registros e clique em OK. 


O comportamento de servidor é atribuído ao link de navegação. 


Definir as opções da caixa de diálogo Mover para (comportamento de servidor) 
Adicione links que permitam ao usuário navegar nos registros de um conjunto. 


1. Caso você não tenha selecionado nada na página, selecione um link no menu pop-up. 


2. Selecione o conjunto que contém os registros a serem percorridos e clique em OK. 
Nota: Caso o conjunto contenha vários registros, o comportamento de servidor Mover para último registro pode demorar muito para ser 
executado quando o usuário clica no link. 


, as Para o início 
Tarefas de design da barra de navegação 
Ao criar uma barra de navegação personalizada, comece criando sua representação visual usando as ferramentas de design de página do 
Dreamweaver. Você não precisa criar um link para a sequência de caracteres de texto ou a imagem; o Dreamweaver cria um para você. 


A página para a qual a barra de navegação foi criada deve conter um conjunto de registros para navegar. Uma barra de navegação do conjunto 
de registros simples pode ser semelhante a esta com botões de link criados fora das imagens ou outros elementos de conteúdo: 


Depois de adicionar um conjunto de registros a uma página e criar uma barra de navegação, você deve aplicar comportamentos de servidor a 
cada elemento de navegação. Por exemplo, uma barra de navegação do conjunto de registros típica contém representações dos seguintes links 
correspondentes ao comportamento apropriado: 


Link de navegação Comportamento de servidor 
Ir para primeira página Mover para primeira página 

Ir para página anterior Mover para página anterior 

Ir para próxima página Mover para próxima página 

Ir para última página Mover para última página 


a2cê a q a P. iníci 
Exibir e ocultar regiões com base nos resultados do conjunto de registros int 


Você também pode especificar que uma região seja exibida ou ocultada com base no preenchimento do conjunto de registros. Caso um conjunto 
de registros esteja vazio (por exemplo, nenhum registro foi encontrado correspondente à consulta), você pode exibir uma mensagem informando 
o usuário de que nenhum registro retornou. Isso é especialmente útil quando se criam páginas de pesquisa que dependam dos termos de 
pesquisa de entrada para executar consultas. Da mesma forma, você pode exibir uma mensagem de erro caso haja um problema na conexão 
com um banco de dados ou caso o nome de usuário e a senha de um usuário não correspondam aos reconhecidos pelo servidor. 


Os comportamentos de servidor Mostrar região são: 
e Mostrar se conjunto de registros estiver vazio 
e Mostrar se conjunto de registros não estiver vazio 
e Mostrar se for primeira página 
e Mostrar se não for primeira página 


e Mostrar se for última página 
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e Mostrar se não for última página 


1. Na Visualização de design, selecione a região na página a ser mostrada ou ocultada. 
2. No painel Comportamentos do servidor (Janela > Comportamentos do servidor), clique no botão de adição (+). 


3. Selecione Mostrar região no menu pop-up, selecione um dos comportamentos de servidor listados e clique em OK. 


ab E E E Para o início 
Exibir vários resultados do conjunto de registros 


O comportamento de servidor Região repetitiva permite exibir vários registros de um conjunto dentro de uma página. Qualquer seleção de dados 
dinâmicos pode ser transformada em uma região repetitiva. No entanto, as regiões mais comuns são tabelas, linhas de tabelas ou uma série de 
linhas de tabelas. 


1. Na Visualização de design, selecione uma região que apresente conteúdo dinâmico. 
A seleção pode ser qualquer item, incluindo uma tabela, uma linha de tabela ou mesmo um parágrafo do texto. 


Para selecionar uma região na página com precisão, você pode usar o seletor de tags no canto esquerdo da janela do documento. Por 
exemplo, caso a região seja uma linha de tabela, clique dentro da linha na página e, depois, clique na tag <tr> à direita no seletor para 
selecionar a linha da tabela. 

Selecione Janela > Comportamentos de servidor para exibir o painel Comportamentos de servidor. 

Clique no botão de adição (+) e selecione Região repetitiva. 


Selecione o nome do conjunto de registros a ser usado no menu pop-up. 


rw 


Selecione o número de registros a serem exibidos por página e clique em OK. 


Na janela Documento, um fino contorno cinza com abas é exibido em torno da região repetitiva. 


Modificar regiões repetitivas no Inspetor de propriedades 
*& Modifique a região repetitiva selecionada alterando qualquer uma das seguintes opções: 


e O nome da região repetitiva. 
e O conjunto que fornece os registros à região repetitiva. 
* O número de registros exibidos 


Quando você seleciona uma nova opção, o Dreamweaver atualiza a página. 


Reutilizar conjuntos de registros PHP 
Para obter um tutorial sobre como reutilizar os conjuntos de registros PHP, consulte o tutorial de David Powers, Como reutilizar um Conjunto de 
dados PHP em mais de uma região de repetição? 


a EA E P iníci 
Criar uma tabela dinâmica a fdicês 


O seguinte exemplo ilustra como o comportamento Região repetitiva é aplicado à linha de uma tabela e especifica que são exibidos nove 
registros por página. A própria linha exibe quatro registros diferentes: cidade, estado, endereço e CEP. 
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Para criar uma tabela como, por exemplo, a do exemplo anterior, você deve criar uma tabela que tenha conteúdo dinâmico e aplicar o 
comportamento de servidor Região repetitiva à linha da tabela com o conteúdo dinâmico. Quando a página é processada pelo servidor de 
aplicativo, a linha é repetida o número de vezes especificado no objeto de servidor Região repetitiva com um registro diferente inserido em cada 
linha nova. 


1. Escolha uma destas opções para inserir uma tabela dinâmica: 
* Selecione Inserir > Objetos de dados > Dados dinâmicos > Tabela dinâmica para exibir a caixa de diálogo Tabela dinâmica. 
e Na categoria Dados do painel Inserir, clique no botão Dados dinâmicos e selecione o ícone Tabela dinâmica no menu pop-up. 


2. Selecione o conjunto de registros no menu pop-up Conjunto de registros. 
3. Selecione o número de registros a serem exibidos por página. 
4. (Opcional) Insira os valores da borda da tabela, do preenchimento da célula e do espaçamento da célula. 


A caixa de diálogo Tabela dinâmica mantém os valores que você insere para bordas da tabela, preenchimento da célula e espaçamento da 
célula. 


Nota: Caso você esteja trabalhando em um projeto que exija várias tabelas dinâmicas com a mesma aparência, insira os valores de layout 
da tabela, o que simplifica ainda mais o desenvolvimento da página. Você pode ajustar esses valores depois de inserir a tabela usando o 
Inspetor de propriedades da tabela. 


5. Clique em OK. 


Uma tabela e os alocadores de espaço do conteúdo dinâmico definido no conjunto de registros associado são inseridos na página. 


q ==) Dividir LE Design | || Visualização dinâmica |. Titulo; Documento sem titulo Mu 
ES UERR ERP ERRAR ES PRN Ci RARA 5: PRA ERRA ERRAR 6 PRA 6 PRA CPR Cie PRRRA E PRA si À 


T 
u 


Nesse exemplo, o conjunto de registros contém quatro colunas: AUTHORID, FIRSTNAME, LASTNAME e BIO. A linha de cabeçalho da 
tabela é preenchida com os nomes de cada coluna. Você pode editar os cabeçalhos usando qualquer texto descritivo ou substituí-los por 
imagens representativas. 


RID (Nome [Sobrenome BIO 
(rsBooks. AUTHORID) [(1sBooks Nome) ((rsBooks. Sobrenome) (rsBooks BIO) 


Para o início 


Criar contadores de registros 


Os contadores de registros dão aos usuários um ponto de referência ao navegarem em um conjunto de registros. Normalmente, eles exibem o 
número total de registros retornados e os registros visualizados no momento. Por exemplo, se um conjunto retornasse 40 registros individuais e 8 
fossem exibidos por página, o contador de registros na primeira página indicaria “Exibindo registros 1-8 de 40”. 


Para criar um contador de registros em uma página, você deve criar um conjunto de registros para a página, um layout de página apropriado ao 
conteúdo dinâmico e, em seguida, uma barra de navegação do conjunto de registros. 


Criar contadores de registros simples 
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Os contadores de registros permitem aos usuários saber onde estão em um determinado conjunto de registros em relação ao número total de 
registros retornados. Por essa razão, os contadores de registros são um comportamento útil capaz de agregar à usabilidade de uma página da 
Web de maneira significativa. 


Crie um contador de registros simples usando o objeto de servidor Status de navegação do conjunto de registros. Esse objeto de servidor cria 
uma entrada de texto na página para exibir o status de registro atual. Você pode personalizar o contador de registros usando as ferramentas de 
design de página do Dreamweaver. 


1. Coloque o ponto de inserção onde você deseja inserir um contador de registros. 


2. Selecione Inserir > Objetos de dados > Exibir contagem de registros > Status de navegação do conjunto de registros e, depois, selecione o 
conjunto de registros no menu pop-up Conjunto de registros e, em seguida, clique em OK. 


O objeto de servidor Status de navegação do conjunto de registros insere um contador de registros de texto semelhante ao seguinte 
exemplo: 


Records (Employees first) a (Employees last) de (Employees total) 


Quando exibido na Visualização dinâmica, o contador exibido é semelhante ao seguinte exemplo: 
Records 1 a 1de22 


Criar e adicionar o contador de registros na página 
“& Na caixa de diálogo Status de navegação do conjunto de registros, selecione o conjunto de registros a ser controlado e clique em OK. 


Criar contadores de registros personalizados 

Você usa comportamentos de contagem de registros para criar contadores de registros personalizados. A criação de um contador de registros 
personalizado permite criar um contador de registros que vai além da tabela simples, de linha única, inserida pelo objeto de servidor Status de 
navegação do conjunto de registros. Você pode organizar elementos de design de várias formas criativas e aplicar um comportamento de servidor 
apropriado a cada elemento. 


Os comportamentos de servidor Contagem de registros são: 
e Exibir número de registro inicial 
e Exibir número de registro final 
e Exibir total de registros 


Para criar um contador de registros personalizado em uma página, você deve criar inicialmente um conjunto de registros para a página, um layout 
de página apropriado ao conteúdo dinâmico e, em seguida, uma barra de navegação do conjunto de registros. 


Este exemplo cria um contador de registros semelhante ao do exemplo em “Contadores de registros simples”. Nesse exemplo, o texto na fonte 
sans-serif representa os alocadores de espaço da contagem de registros que serão inseridos na página. O contador de registros do exemplo é 
exibido da seguinte forma: 


Exibindo registros de StartRow a EndRow de RecordSet.RecordCount. 


1. Na Visualização de design, digite o texto do contador na página. O texto pode ser o que você quiser, por exemplo: 
Displaying records thru of 
2. Coloque o ponto de inserção ao final da sequência de caracteres de texto. 


3. Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor). 


4. Clique no botão de adição (+) no canto superior esquerdo e, depois, clique em Exibir contagem de registros. Nesse submenu, selecione 
Exibir total de registros. O comportamento Exibir total de registros é inserido na página, e um alocador de espaço é inserido onde estava o 
ponto de inserção. A sequência de caracteres de texto é exibida da seguinte forma: 


Displaying records thru of (Recordset1.RecordCount+. 


5. Coloque o ponto de inserção depois da palavra records e selecione Exibir número de registro inicial no painel Comportamentos de 
servidor > botão de adição (+) > Contagem de registros. A sequência de caracteres de texto é exibida da seguinte forma: 


Displaying records fStartRow Recordset1) thru of (Recordset1.RecordCount+. 


6. Agora coloque o ponto de inserção entre as palavras thru e of e selecione Exibir número de registro inicial no painel Comportamentos de 
servidor > botão de adição (+) > Contagem de registros. A sequência de caracteres de texto é exibida da seguinte forma: 


Displaying records (StartRow Recordset1) thru (EndRow Recordset1) of(Recordset1.RecordCount+. 


7. Confirme se o contador está funcionando corretamente exibindo a página na Visualização dinâmica; o contador é semelhante ao do 
seguinte exemplo: 


Displaying records 1 thru 8 of 40. 


206 


Caso a página de resultados tenha um link de navegação para se mover para o próximo conjunto de registros, o clique no link atualiza o 
contador de registros para que ele exiba o seguinte: 


Showing records 9 thru 16 of 40. 


Para o início 


Usar formatos de dados predefinidos 


O Dreamweaver inclui vários formatos de dados predefinidos que você pode aplicar a elementos de dados dinâmicos. Entre os estilos de formato 
de dados estão data e hora, moeda e formatos numérico e percentuais. 


Aplicar formatos de dados a conteúdo dinâmico 


1. 
2: 
3. 


Na janela Documento, selecione o alocador de espaço do conteúdo dinâmico. 
Selecione Janela > Ligações para exibir o painel Ligações. 
Clique no botão de seta para baixo na coluna Formato. 


Caso a seta para baixo não esteja visível, expanda o painel. 


. No menu pop-up Formato, selecione a categoria do formato de dados que você deseja. 


Verifique se o formato de dados é apropriado ao tipo de dado que você está formatando. Por exemplo, os formatos Moeda só funcionam 
caso os dados dinâmicos consistam em dados numéricos. Observe que você não pode aplicar mais de um formato aos mesmos dados. 


. Verifique se o formato foi aplicado corretamente ao visualizar a página na Visualização dinâmica. 


Personalizar um formato de dados 


d: 
2: 


Abra uma página que contenha dados dinâmicos na Visualização de design. 
Selecione os dados dinâmicos cujo formato você deseja personalizar. 


O item de dados ligado cujo texto dinâmico você selecionou é realçado no painel Ligações (Janela > Ligações). O painel exibe duas 
colunas para o item selecionado — Ligação e Formato. Caso a coluna Formato não esteja visível, alargue o painel Ligações para mostrá-la. 


. No painel Ligações, clique na seta para baixo na coluna Formato para expandir o menu pop-up dos formatos de dados disponíveis. 


Caso a seta para baixo não esteja visível, alargue ainda mais o painel Ligações. 


4. Selecione Editar lista de formatos no menu pop-up. 


. Complete a caixa de diálogo e clique em OK. 


a. Selecione o formato na lista e clique em Editar. 
b. Altere qualquer um dos seguintes parâmetros nas caixas Moeda, Número ou Porcentagem e clique em OK. 


e O número de dígitos a serem exibidos após a casa decimal 

e Se um zero deve ser colocado antes das frações 

e Se os parênteses ou um sinal de subtração devem ser usados em valores negativos 
* Se os dígitos devem ser agrupados 


c. Para excluir um formato de dados, clique no formato na lista e clique no botão de subtração (-). 


Criar um formato de dados (apenas ASP) 


1. 


No an 


Abra uma página que contenha dados dinâmicos na Visualização de design. 

Selecione os dados dinâmicos para os quais você deseja criar um formato personalizado. 

Selecione Janela > Ligações para exibir o painel Ligações e clique na seta para baixo na coluna Formato. Caso a seta para baixo não 
esteja visível, expanda o painel. 

Selecione Editar lista de formatos no menu pop-up. 

Clique no botão de adição (+) e selecione um tipo de formato. 

Defina o formato e clique em OK. 

Digite um nome para o novo formato na coluna Nome e clique em OK. 

Nota: Embora o Dreamweaver suporte somente a criação de formatos de dados para páginas em ASP, os usuários do ColdFusion e do 
PHO podem baixar formatos que outros desenvolvedores criaram ou criar formatos de servidor e postá-los no Dreamweaver Exchange. 
Para obter mais informações sobre a API Formato de servidor, consulte Extensão do Dreamweaver(Ajuda > Extensão do Dreamweaver > 
Formatos de servidor). 


Mais tópicos da Ajuda 
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Criação de consultas de mídia 


Você pode usar consultas de mídia para especificar arquivos CSS com base nas características informadas de um dispositivo (design 
responsivo). O navegador em um dispositivo verifica a consulta de mídia e usa o arquivo CSS correspondente para exibir a página da web. 


Por exemplo, a seguinte consulta de mídia especifica o arquivo phone.css para dispositivos de 300-320 pixels. 


<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max- 
width: 320px)"> 


Para uma obter introdução extensa às consultas de mídia, leia o artigo de Don Booth no Adobe Developer Center 
www.adobe.com/go/learn dw medquery don br. 


Para obter mais informações sobre consultas de mídia da W3C, consulte www.w3.org/TR/css3-mediaqueries/. 


Criar consulta de mídia 

Usar um arquivo de consultas de mídia existente 

Escolher um arquivo de consultas de mídia para todo o site diferente 
Visualização de páginas da Web com base em consulta de mídia 


Consulte também: 
e Design responsivo usando layouts de grade fluida 


Para o início 


Criar consulta de mídia 

No Dreamweaver, você pode criar um arquivo de consulta de mídia para todo o site ou uma consulta de mídia para um documento específico. 
Arquivo de consulta de mídia para todo o site 

Especifica configurações de exibição de todas as páginas em seu site que incluem o arquivo. 


O arquivo de consulta de mídia para todo o site age como repositório central de todas as consultas de mídia em seu site. Depois de criar o 
arquivo, vincule-o a páginas em seu site que precisem usar consultas de mídia para a exibição do arquivo. 


Consulta de mídia para documento específico 


A consulta de mídia é inserida diretamente no documento, e a página é exibida com base na consulta de mídia inserida. 
1. Crie uma página da web. 


2. Selecione Modificar > Consultas de mídia. 


vo 


Siga um destes procedimentos: 
e Para criar um arquivo de consulta de mídia para todo o site, selecione Arquivo de consultas de mídia para todo o site. 


e Para criar uma consulta de mídia específica de um documento, selecione Este documento. 
4. Para fazer uma consulta de mídia para todo o site, faça o seguinte: 

a. Clique em Especificar. 

b. Selecione Criar novo arquivo. 

c. Especifique um nome para o arquivo e clique em OK. 


5. É possível que alguns dispositivos não informem a largura real. Para forçar dispositivos a informar a largura real, verifique se a opção 
Forçar dispositivos a informar largura real está ativada. 


O seguinte código é inserido no arquivo quando você escolhe essa opção. 


<meta name="viewport" content="width=device-width"> 


6. Siga um destes procedimentos: 
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FÊ 


8. 


9. 


Clique em "+" para definir as propriedades do arquivo de consulta de mídia. 


e Clique em Predefinições Padrão se quiser começar com predefinições padrão. 
Selecione linhas na tabela e edite as respectivas propriedades usando as opções em Propriedades. 
Descrição A descrição do dispositivo para o qual o arquivo CSS deve ser usado. Por exemplo, telefone, televisão, mesa digitalizadora, etc. 


Largura mínima e máxima O arquivo CSS é usado para dispositivos cuja largura informada está dentro dos valores especificados. 


Nota: Deixe a Largura mínima ou a Largura máxima em branco se não desejar especificar um intervalo explícito para um dispositivo. Por 
exemplo, é comum deixar a Largura mínima em branco para telefones, cuja largura é de 320px ou menos. 


Arquivo CSS Selecione Usar arquivo existente e navegue até o arquivo CSS do dispositivo. 


Se deseja especificar um arquivo CSS que ainda será criado, selecione Criar novo arquivo. Digite o nome do arquivo CSS. O arquivo é 
criado quando você pressiona OK. 


Clique em OK. 


Um novo arquivo é criado para um consulta de mídia para todo o site. Salve-o. 


Consulta de mídia para todo o site: Em páginas existentes, verifique se você incluiu o arquivo de consulta de mídia em todas as páginas na tag 
<head>. 


Exemplo de um link de consulta de mídia onde mediaquery adobedotcom.css é o arquivo de consulta de mídia para todo o site 
www.adobe.com/br de site: 


<link href="mediaquery adobedotcom.css" rel="stylesheet" type="text/css"> 


Usar um arquivo de consultas de mídia existente 


4. 


Escolher um arquivo de consultas de mídia para todo o site diferente 


Para o início 


Crie uma página da Web ou abra uma existente. 

Selecione Modificar > Consultas de mídia. 

Selecione o arquivo de consultas de mídia para todo o site. 

Clique em Especificar. 

Selecione Usar arquivo existente se você já tiver criado um arquivo CSS com a Consulta de mídia. 
Clique no ícone de busca para procurar e especifique o arquivo. Clique em OK. 

Selecione o arquivo de consultas de mídia para todo o site. 


Para forçar dispositivos a informar a largura real, verifique se a opção Forçar dispositivos a informar largura real está ativada. O seguinte 
código é inserido no arquivo quando você escolhe essa opção. 


<meta name="viewport" content="width=device-width"> 


Clique em OK. 


Para o início 


Use este procedimento para alterar o arquivo de consultas de mídia para todo o site que você definiu na caixa de diálogo Consultas de mídia. 


1. 


Selecione Site > Gerenciar sites. 

Na caixa de diálogo Gerenciar sites, selecione o seu site. 

Clique em Editar. A caixa de diálogo Configuração de site é exibida. 

Em Configurações avançadas no painel esquerdo, selecione Informações locais. 


No arquivo de consulta de mídia para todo o site, no painel direito, clique em Procurar para selecionar o arquivo CSS da consulta de mídia. 
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Nota: A alteração do arquivo de consulta de mídia para todo o site não afeta documentos vinculados a um arquivo de consulta de mídia 
para todo o site diferente ou anterior. 


6. Clique em Salvar. 


: ti gicia oe eRagara 
Visualização de páginas da Web com base em consulta de mídia cdi io 


As dimensões especificadas em uma consulta de mídia aparecem nas opções de tamanho de botão/janela de várias telas. Quando você 
seleciona uma dimensão do menu, as seguintes modificações são vistas: 


e O tamanho da visualização muda para refletir as dimensões especificadas. O tamanho do quadro de documento permanece inalterado. 


e O arquivo CSS especificado na consulta de mídia é usado para exibir a página. 


As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 


211 


Cores 


Cores aceitas pela Web 
Usar o seletor de cores 


E ER: 
Cores aceitas pela Web ara o início 


Em HTML, as cores são expressas como valores hexadecimais (por exemplo, 4FF0000) ou como nomes de cor (red). Uma cor aceita pela Web é 
aquela que aparece idêntica no SAfari e Microsoft Internet Explorer, nos sistemas Windows e Macintosh, quando a execução é feita no modo de 
256 cores. Em geral, sabe-se que há 216 cores comuns e que nenhum valor hexadecimal que combina os pares 00, 33, 66, 99, CC, ou FF 
(valores RGB 0, 51, 102, 153, 204 e 255, respectivamente) representa uma cor aceita pela Web. 


Os testes, no entanto, revelam que há somente 212 cores aceitas pela Web, em vez de 216, pois o Internet Explorer do Windows não processa 
corretamente as cores 40033FF (0,51,255), 43300FF (51,0,255), 400FF33 (0,255,51) e 433FF00 (51,255,0). 


Quando os navegadores da Web compuseram inicialmente sua aparência, a maioria dos computadores exibia somente 265 cores (8 bits por canal 
(bpc)). Hoje, a maioria dos computadores exibem milhares ou milhões de cores (16 e 32 bpc). Portanto, a justificativa para o uso da paleta aceita 
por navegadores será consideravelmente reduzida se você estiver desenvolvendo o site para usuários de sistemas de computador atuais. 


Um motivo para o uso da paleta de cores aceitas pela Web é o desenvolvimento de dispositivos alternativos da Web, como PDA e visores de 
telefone celular. Muitos desses dispositivos oferecem apenas visores em preto-e-branco (1 bpc) ou visores de 256 cores (8 bpc). 


As paletas Cubos de cor (padrão) Tom contínuo do Dreamweaver usam a paleta de 216 cores aceitas pela Web. A seleção de uma cor nessas 
paletas exibe o valor hexadecimal da cor. 


Para selecionar uma cor fora do intervalo de cores aceitas pela Web, abra o seletor de cores do sistema clicando no botão Roda de cores no 
canto superior direito do seletor de cores do Dreamweaver. O seletor de cores do sistema não se limita às cores aceitas pela Web. 


As versões UNIX dos navegadores usam uma paleta de cores diferente da oferecida pelas versões do Windows e Macintosh. Se você estiver 
desenvolvendo dispositivos exclusivamente para navegadores UNIX (ou se seu público-alvo for usuários do Windows ou Macintosh com 
monitores de 24 bpc e usuários do UNIX com monitores de 8 bpc), recomenda-se o uso de valores hexadecimais que combinam os pares 00, 40, 
80, BF, ou FF, que produzem cores aceitas pela Web para SunOS. 


Para o início 
Usar o seletor de cores 


No Dreamweaver, várias das caixas de diálogo, bem como o Inspetor de propriedades de vários elementos de página, contêm uma caixa de 
cores, que abre um seletor de cores. Use o seletor de cores para selecionar uma cor para um elemento de página. Você também pode definir a 
cor de texto padrão dos elementos de página. 


1. Clique em uma caixa de cores em qualquer caixa de diálogo ou no Inspetor de propriedades. 
O seletor de cores é exibido. 
2. Siga um destes procedimentos: 


* Use conta-gotas para selecionar uma amostra de cores na paleta. Todas as cores das paletas Cubos de cor (padrão) ou Tom 
contínuo são aceitas pela Web; as outras paletas não. 


e Use conta-gotas para selecionar uma cor em qualquer lugar da tela, mesmo que seja fora das janelas do Dreamweaver. Para 
selecionar uma cor na área de trabalho ou em outro aplicativo, mantenha pressionado o botão do mouse. Isso permitirá que o conta- 
gotas retenha o foco e selecione uma cor fora do Dreamweaver. Se você clicar na área de trabalho ou em outro aplicativo, o 
Dreamweaver selecionará a cor em que você clicou. No entanto, se você alternar para outro aplicativo, talvez seja necessário clicar em 
uma janela do Dreamweaver para continuar trabalhando no Dreamweaver. 


e Para expandir a seleção de cor, use o menu pop-up no canto superior direito do seletor de cores. Você pode selecionar Cubos de cor, 
Tom contínuo, SO Windows, Mac OS e Tons de cinza. 


Nota: As paletas Cubos de cor e Tom contínuo são aceitas pela Web, ao passo que SO Windows, Mac OS e Tons de cinza não. 
* Para limpar a cor atual sem escolher outra cor, clique no botão Cor padrão [A. 


« Para abrir o seletor de cores do sistema, clique no botão Roda de cores 8. 
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Sobre a estrutura do Spry 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


A estrutura do Spry é uma biblioteca JavaScript que permite aos designers criar páginas da Web que garantam experiências mais interessantes 
aos visitantes do site. Com o Spry, você pode usar HTML, CSS e o mínimo de JavaScript para incorporar dados XML aos documentos HTML, 
criar widgets como acordeões e barras de menu, e adicionar diferentes tipos de efeitos a vários elementos de página. A estrutura do Spry foi 
elaborada para simplificar e facilitar o uso do markup aos que têm conhecimentos básicos de HTML, CSS e JavaScript. 


A estrutura do Spry destina-se principalmente aos profissionais de design na Web ou designers não profissionais avançados. Essa não é uma 
estrutura integral de aplicativos da Web para o desenvolvimento de conteúdo da Web em nível empresarial (embora ela possa ser usada com 
outras páginas de nível empresarial). 


Para obter mais informações sobre a estrutura do Spry, consulte www.adobe.com/go/learn dw spryframework br. 


A Adobe também recomenda 
e Guia do desenvolvedor do Spry 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Css 


Planejamento de páginas no Dreamweaver com CSS3 
Janine Warner (24-feb-11) 
tutorial 


Dreamweaver CS5: Inspeção de CSS 
Geoff Blake (23-apr-10) 
tutorial em vídeo 
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Atualização das folhas de estilos da CSS em um site do Contribute 


Nota: Na Dreamweaver CC e posterior, o painel CSS Styles foi substituído pelo CSS Designer. Para obter mais informações, consulte CSS 
Designer. 


Os usuários do Adobe Contribute não podem fazer alterações em uma folha de estilos CSS. Para alterar uma folha de estilos em um site do 
Contribute, use o Dreamweaver. 


1. Edite a folha de estilos usando as ferramentas de edição de folhas de estilos do Dreamweaver. 


2. Instrua os usuários do Contribute que estão trabalhando no site a publicar páginas que usam essa folha de estilos e edite novamente essas 
páginas para visualizar a nova folha de estilos. 


Veja a seguir os fatores importantes que você deve ter em mente ao atualizar as folhas de estilos para um site do Contribute: 


e Se você fizer alterações em uma folha de estilos enquanto o usuário do Contribute estiver editando uma página que a utilize, o usuário só 
verá as alterações efetuadas na folha de estilos depois que publicar a página. 


e Se você excluir um estilo de uma folha de estilos, o nome do estilo não será excluído das páginas que a utilizam. Como o estilo não existe 
mais, ele não será exibido da maneira esperada pelo usuário do Contribute. Desse modo, se um usuário informar a você que nada acontece 
quando ele aplica um determinado estilo, talvez o estilo tenha sido excluído da folha de estilos. 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Definir propriedades do CSS 


Na Dreamweaver CC e posterior, o painel CSS Styles foi substituído pelo CSS Designer. Para obter mais informações, consulte CSS Designer. 


Você pode definir as propriedades das regras CSS como fonte do texto, imagem e cor do fundo, propriedades de espaçamento e layout, e a 
aparência dos elementos de lista. Primeiro crie uma nova regra e defina qualquer uma das propriedades a seguir. 


Definição de propriedades do tipo CSS 

Definição de propriedades do fundo de estilo CSS 

Definição de propriedades do bloco de estilo CSS 

Definição de propriedades da caixa de estilo CSS 

Definição de propriedades da borda de estilo CSS 

Definição de propriedades da lista de estilo CSS 

Definição de propriedades do posicionamento de estilo CSS 
Definição de propriedades da extensão de estilo CSS 


Para o início 


Definição de propriedades do tipo CSS 


Use a categoria Tipo na caixa de diálogo Definição de regra CSS para definir as configurações básicas de fonte e tipo para um estilo CSS. 


1. Abra o painel CSS Styles (Shift + F11) caso ele ainda não esteja aberto. 
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles. 
3. Na caixa de diálogo Definição de regra CSS, selecione Tipo e defina as propriedades de estilo. 


Deixe qualquer uma das seguintes propriedades vazias caso elas não sejam importantes para o estilo: 


Font-family Define a família de fontes (ou série de famílias) para o estilo. Os navegadores exibem o texto na primeira fonte da série 
instalada no sistema do usuário. Para fins de compatibilidade com o Internet Explorer, liste uma fonte do Windows primeiro. O atributo de 
fonte é compatível com ambos os navegadores. 


Font-size Define o tamanho do texto. Você pode escolher um tamanho específico selecionando o número e a unidade de medida, ou você 
pode escolher um tamanho relativo. Pixels impede que os navegadores distorçam o texto. O atributo de tamanho é compatível com ambos 
os navegadores. 


Font-style Especifica Normal, Italic ou Oblique como estilo de fonte. A configuração padrão é Normal. O atributo de estilo é compatível 
com ambos os navegadores. 


Line-height Define a altura da linha em que o texto é colocado. Esta configuração é tradicionalmente chamada de leading. Selecione 
Normal para que a altura da linha do tamanho da fonte seja calculada automaticamente ou digite um valor exato e selecione uma unidade 
de medida. O atributo de altura da linha é compatível com ambos os navegadores. 


Text-decoration Adiciona uma sublinha, sobrelinha ou tachado ao texto ou torna o texto intermitente. A configuração padrão é None. A 
configuração padrão para links é Underline. Quando você define a configuração de link para none, pode remover a sublinha dos links 
definindo uma classe especial. O atributo de decoração é compatível com ambos os navegadores. 


Font-weight Aplica um valor específico ou relativo de negrito à fonte. Normal equivale a 400; Bold equivale a 700. O atributo de espessura 
é compatível com ambos os navegadores. 


Font-variant Define a variante de versalete no texto. O Dreamweaver não exibe esse atributo na janela Documento. O atributo de variante 
é compatível com o Internet Explorer, mas não com o Navigator. 


Text-transform Coloca a primeira letra de cada palavra da seleção em maiúscula ou define o texto para todas maiúsculas ou todas 
minúsculas. O atributo de maiúsculas ou minúsculas é compatível com ambos os navegadores. 


Cor Define a cor do texto. O atributo de cor é compatível com ambos os navegadores. 


4. Quando você terminar de definir essas opções, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades 
de estilo ou clique em OK. 


Para o início 


Definição de propriedades do fundo de estilo CSS 
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Use a categoria Fundo da caixa de diálogo Definição de regra CSS para definir as configurações de fundo de um estilo CSS. Você pode aplicar 
as propriedades de fundo a qualquer elemento em uma página da Web. Por exemplo, crie um estilo que adicione uma cor ou imagem do fundo a 
qualquer elemento de página, ou seja, atrás do texto, de uma tabela, da página etc. Você também pode definir o posicionamento de uma imagem 
do fundo. 

1. Abra o painel CSS Styles (Shift+F11) caso ele ainda não esteja aberto. 

2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles. 

3. Na caixa de diálogo Definição de regra CSS, selecione Fundo e defina as propriedades de estilo. 


Deixe qualquer uma das seguintes propriedades vazias caso elas não sejam importantes para o estilo: 
Cor de fundo Define a cor de fundo do elemento. O atributo de cor de fundo é compatível com ambos os navegadores. 
Imagem de fundo Define a imagem de fundo do elemento. O atributo de imagem de fundo é compatível com ambos os navegadores. 


Background Repeat Determina se e como a imagem de fundo será repetida. O atributo de repetição é compatível com ambos os 
navegadores. 


e No Repeat exibe uma imagem uma vez, no início do elemento. 
e Repeat coloca a imagem lado a lado, horizontalmente ou verticalmente atrás do elemento. 


* Repeat-x e Repeat-y exibem uma faixa horizontal e vertical de imagens, respectivamente. As imagens são recortadas para que não 
ultrapassem os limites do elemento. 


Nota: use a propriedade de repetição para redefinir a tag de corpo e definir uma imagem do fundo que não se organize lado a lado ou 
repita. 


Background Attachment Determina se a imagem de fundo se manterá fixa na sua posição original ou rolará juntamente com o conteúdo. 
Observe que alguns navegadores podem tratar a opção Fixa como Rolar. Há suporte para esse atributo no Internet Explorer, mas não no 
Netscape Navigator. 


Background Position (X) e Background Position (Y) Especifica a posição inicial da imagem de fundo em relação ao elemento. Este 
recurso pode ser usado para alinhar uma imagem de fundo ao centro da página, verticalmente (Y) e horizontalmente (X). Se a propriedade 
de anexo for Fixa, a posição será relativa à janela Documento, e não ao elemento. 


4. Quando você terminar de definir essas opções, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades 
de estilo ou clique em OK. 


Para o início 


Definição de propriedades do bloco de estilo CSS 


Use a categoria Bloco da caixa de diálogo Definição de regra CSS para definir as configurações de espaçamento e alinhamento das tags e 
propriedades. 
1. Abra o painel CSS Styles (Shift+F11) caso ele ainda não esteja aberto. 
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles. 
3. Na caixa de diálogo Definição de regra CSS, selecione Bloco e defina qualquer uma das propriedades de estilo a seguir. (Deixe a 
propriedade em branco caso ela não seja importante para o estilo.) 


Word Spacing Define o espaçamento entre palavras. Para definir um valor específico no menu pop-up, selecione Value e digite um valor 
numérico. No segundo menu pop-up, selecione uma unidade de medida (por exemplo, pixel, points etc.). 


Nota: você pode especificar valores negativos, mas a exibição depende do navegador. O Dreamweaver não exibe esse atributo na janela 


Documento. 


Letter Spacing Aumenta ou diminui o espaço entre as letras ou caracteres. Para diminuir o espaço entre os caracteres, especifique um 
valor negativo, por exemplo (-4). As configurações de espaçamento entre letras substitui as configurações de texto justificado. Há suporte 
para o atributo de espaçamento entre letras no Internet Explorer 4 e posterior, e no Netscape Navigator 6. 


Vertical Align Especifica o alinhamento vertical do elemento ao qual ele é aplicado. O Dreamweaver exibe esse atributo na janela 
Documento somente quando é aplicado à tag <img>. 


Text Align Define como o texto é alinhado no elemento. O atributo de alinhamento de texto é compatível com ambos os navegadores. 
Recuo do texto Especifica a distância em que a primeira linha de texto será recuada. Um valor negativo pode ser usado para diminuir o 
recuo, mas a exibição dependerá do navegador. O Dreamweaver exibe esse atributo na janela Documento somente quando a tag é 


aplicada aos elementos de nível de bloco. O atributo de recuo do texto é compatível com ambos os navegadores. 


Whitespace Determina como o espaço em branco será tratado no elemento. Selecione entre três opções: Normal diminui o espaço em 
branco; Pre trata o espaço em branco como se o texto estivesse delimitado por tags pre (ou seja, todo o espaço em branco é respeitado, 
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Definição de propriedades da caixa de estilo CSS 


incluindo espaços, tabulações e retornos); Nowrap especifica que só ocorre uma quebra de linha automática no texto quando uma tag br é 
encontrada. O Dreamweaver não exibe esse atributo na janela Documento. Há suporte para o atributo de espaço em branco no Netscape 
Navigator e no Internet Explorer 5.5. 


Display Especifica se um elemento será exibido e, em caso afirmativo, como ele será exibido. None desativa a exibição de um elemento 
ao qual ele é atribuído. 


Quando você terminar de definir essas opções, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades 
de estilo ou clique em OK. 


Para o início 


Use a categoria Caixa da caixa de diálogo Definição de regra CSS para definir as configurações das tags e propriedades que controlam o 
posicionamento dos elementos na página. 


Você pode aplicar as configurações a cada lado de um elemento separadamente quando aplica as configurações de preenchimento e margem, 
ou usar a configuração Igual para tudo a fim de aplicar a mesma configuração a todos os lados de um elemento. 


1. 
2: 
3. 


Definição de propriedades da borda de estilo CSS 


Abra o painel CSS Styles (Shift + F11) caso ele ainda não esteja aberto. 
Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles. 


Na caixa de diálogo Definição de regra CSS, selecione Caixa e defina qualquer uma das propriedades de estilo a seguir. (Deixe a 
propriedade em branco caso ela não seja importante para o estilo.) 


Largura e Altura Define a largura e altura do elemento. 

Float Especifica o lado pelo qual outros elementos circulam ao redor do elemento flutuado. O elemento flutuado está fixo no lado da 
flutuação e outros conteúdos circulam ao seu redor, no lado oposto. 

Por exemplo, uma imagem flutuada para a direita é fixada à direita e o conteúdo que você adicionar depois flui para a esquerda da imagem. 


Para obter mais informações, consulte http://css-tricks.com/all-about-floats/ 
Clear Especifica os lados de um elemento que não permitem outros elementos flutuantes. 


Padding Especifica a quantidade de espaço entre o conteúdo de um elemento e sua borda (ou margem, caso não haja borda). Desmarque 
a opção Igual para tudo a fim de definir o preenchimento de cada lado do elemento separadamente. 


Igual para tudo Define as mesmas propriedades de preenchimento para os lados superior, direito, inferior e esquerdo do elemento ao qual 
elas são aplicadas. 


Margin Especifica a quantidade de espaço entre a borda de um elemento (ou o preenchimento, caso não haja borda) e outro elemento. O 
Dreamweaver exibe esse atributo na janela Documento somente quando aplicado aos elementos de nível de bloco (parágrafos, títulos, 
listas e etc). Desmarque a opção Igual para tudo a fim de definir a margem de cada lado do elemento separadamente. 


Igual para tudo Define as mesmas propriedades de margem para os lados superior, direito, inferior e esquerdo do elemento ao qual elas 
são aplicadas. 


Quando você terminar de definir essas opções, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades 
de estilo ou clique em OK. 


Para o início 


Use a categoria Borda da caixa de diálogo Definição de regra CSS a fim de definir configurações, como largura, cor e estilo, para as bordas em 
torno dos elementos. 


4 
2: 
3. 


Abra o painel CSS Styles (Shift+F11) caso ele ainda não esteja aberto. 

Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles. 

Na caixa de diálogo Definição de regra CSS, selecione Borda e defina qualquer uma das propriedades de estilo a seguir. (Deixe a 
propriedade em branco caso ela não seja importante para o estilo.) 


Tipo Define a aparência do estilo da borda. A maneira como o estilo aparecerá depende do navegador. Desmarque a opção Igual para 
tudo a fim de definir o estilo de borda de cada lado do elemento separadamente. 


Igual para tudo Define as mesmas propriedades de estilo de borda para os lados superior, direito, inferior e esquerdo do elemento ao qual 
elas são aplicadas. 


Largura Define a espessura da borda do elemento. O atributo de largura é compatível com ambos os navegadores. Desmarque a opção 
Igual para tudo a fim de definir a largura de borda de cada lado do elemento separadamente. 
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Igual para tudo Define a mesma largura de borda para os lados superior, direito, inferior e esquerdo do elemento ao qual ela é aplicada. 


Cor Define a cor da borda. Você pode definir a cor de cada lado de modo independente, mas a exibição dependerá do navegador. 
Desmarque a opção Igual para tudo a fim de definir a cor de borda de cada lado do elemento separadamente. 
Igual para tudo Define a mesma cor de borda para os lados superior, direito, inferior e esquerdo do elemento ao qual ela é aplicada. 


4. Quando você terminar de definir essas opções, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades 
de estilo ou clique em OK. 


Para o início 


Definição de propriedades da lista de estilo CSS 


A categoria Lista da caixa de diálogo Definição de regra CSS define as configurações de lista, como tamanho e tipo de marcador, para as tags de 
lista. 


1. Abra o painel CSS Styles (Shift+F11) caso ele ainda não esteja aberto. 
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles. 


3. Na caixa de diálogo Definição de regra CSS, selecione Lista e defina qualquer uma das propriedades de estilo a seguir. (Deixe a 
propriedade em branco caso ela não seja importante para o estilo.) 


List style type Define a aparência dos marcadores ou números. O tipo é compatível em ambos os navegadores. 


List style image Permite que você especifique uma imagem personalizada para os marcadores. Clique em Procurar (Windows) ou 
Escolher (Macintosh) para navegar até uma imagem ou digite o caminho da imagem. 


List style position Define se haverá quebra de linha automática e recuo do texto do item de linha (externo) ou se o texto será deslocado 
para a margem esquerda (interno). 


4. Quando você terminar de definir essas opções, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades 
de estilo ou clique em OK. 


Definição de propriedades do posicionamento de estilo CSS dd 


As propriedades de estilo de posicionamento determinam como o conteúdo relacionado ao estilo CSS selecionado está posicionado na página. 


1. Abra o painel CSS Styles (Shift+F11) caso ele ainda não esteja aberto. 
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles. 
3. Na caixa de diálogo Definição de regra CSS, selecione Posicionamento e defina as propriedades de estilo desejadas. 


Deixe qualquer uma das seguintes propriedades vazias caso elas não sejam importantes para o estilo: 


Position Determina como o navegador deve posicionar o elemento selecionado: 


e Absolute coloca o conteúdo usando as coordenadas digitadas nas caixas Placement, relativo ao predecessor com posição relativa ou 
absoluta, ou, se não houver nenhum predecessor com posição relativa ou absoluta, relativo ao canto superior esquerdo da página. 


e Relative coloca o bloco de conteúdo usando as coordenadas digitadas nas caixas Placement relativas à posição do bloco no fluxo de 
texto do documento. Por exemplo, atribuir a um elemento uma posição relativa, e as coordenadas superior e esquerda de 20px 
deslocará o elemento 20px para a direita e 20px para baixo de sua posição normal no fluxo. Os elementos também podem ser 
posicionados de forma relativa, com ou sem as coordenadas superior, esquerda, direita ou inferior, a fim de estabelecer um contexto 
para os filhos com posição absoluta. 


e Fixed coloca o conteúdo usando as coordenadas digitadas nas caixas Placement, relativo ao canto superior esquerdo do navegador. O 
conteúdo permanecerá fixo nesta posição quando o usuário rolar a página. 


e Static coloca o conteúdo em seu local no fluxo de texto. Esta é a posição padrão de todos os elementos HTML posicionáveis. 
Visibilidade Determina a condição de exibição inicial do conteúdo. Se você não especificar uma propriedade de visibilidade, o conteúdo 
herdará o valor da tag-mãe, por padrão. A visibilidade padrão da tag body está visível. Selecione uma das seguintes opções de visibilidade: 

e Inherit herda a propriedade de visibilidade do pai do conteúdo. 

e Visible exibe o conteúdo, independentemente do valor do pai. 

e Hidden oculta o conteúdo, independentemente do valor do pai. 

Z-Index Determina a ordem de empilhamento do conteúdo. Os elementos com um índice z superior aparecem acima dos elementos com 


um índice z inferior (ou com nenhum índice). Os valores podem ser positivos ou negativos. (Se o conteúdo tiver uma posição absoluta, será 
mais fácil alterar a ordem de empilhamento usando o painel Elementos PA.) 
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Estouro Determina o que acontecerá se o conteúdo de um contêiner (por exemplo, DIV ou P) ultrapassar seu tamanho. Essas 
propriedades controlam a expansão da seguinte maneira: 


e Visible aumenta o tamanho do contêiner a fim de que todo o seu conteúdo fique visível. O contêiner se expande para baixo e para a 
direita. 


e Hidden mantém o tamanho do contêiner e recorta qualquer conteúdo de modo a ajustá-lo dentro do contêiner. Nenhuma barra de 
rolagem é fornecida. 


e Scroll adiciona barras de rolagem ao contêiner, não importando se o conteúdo ultrapassa ou não o tamanho do contêiner. O 
fornecimento de barras de rolagem evita a confusão ocasionada pelo aparecimento e desaparecimento das barras de rolagem em um 
ambiente dinâmico. Esta opção não é exibida na janela Documento. 


e Auto faz com que as barras de rolagem apareçam somente quando o conteúdo do contêiner exceder seus limites. Esta opção não é 
exibida na janela Documento. 


Placement Especifica o local e o tamanho do bloco de conteúdo. A maneira como o navegador interpretará o local depende da 
configuração de tipo. Os valores de tamanho serão substituídos se o conteúdo do bloco de conteúdo exceder o tamanho especificado. 


As unidades padrão de local e tamanho são pixels. Você também pode especificar as seguintes unidades: pc (paicas), pt (pontos), in 
(polegadas), mm (milímetros), cm (centímetros), (ems), (exs) ou % (porcentagem do valor do pai). As abreviações devem seguir o valor, 
sem espaços: por exemplo, 3mm. 


Corte Define a parte do conteúdo que está visível. Se você especificar uma região de corte, poderá acessá-la com uma linguagem de 
script, como JavaScript, e manipular as propriedades para criar efeitos especiais como borrachas. Essas borrachas podem ser configuradas 
usando o comportamento Alterar propriedade. 


. Quando você terminar de definir essas opções, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades 
de estilo ou clique em OK. 


Para o início 


Definição de propriedades da extensão de estilo CSS 


As propriedades de estilo Extensões incluem filtros, quebra de página e opções de ponteiro. 


Nota: Há diversas outras propriedades de extensão disponíveis no Dreamweaver, mas, para acessá-las, você precisa percorrer o painel CSS 
Styles. Para ver uma lista das propriedades de extensão disponíveis, basta abrir o painel CSS Styles (Janelas > CSS Styles), clicando no botão 
Mostrar visualização de categoria, na parte inferior do painel, e expandindo a categoria Extensões. 


1. Abra o painel CSS Styles (Shift + F11) caso ele ainda não esteja aberto. 
2. Clique duas vezes em uma regra ou propriedade existente no painel superior do painel CSS Styles. 
3. Na caixa de diálogo Definição de regra CSS, selecione Extensões e defina qualquer uma das propriedades de estilo a seguir. (Deixe a 


propriedade em branco caso ela não seja importante para o estilo.) 


Quebra de página antes Força uma quebra de página durante a impressão, antes ou após o objeto controlado pelo estilo. Selecione a 
opção desejada no menu pop-up. Não há suporte para esta opção em nenhum navegador 4.0, mas os navegadores posteriores podem 
oferecer suporte a ela. 


Cursor Altera a imagem de ponteiro quando o ponteiro está sobre o objeto controlado pelo estilo. Selecione a opção desejada no menu 
pop-up. O Internet Explorer 4.0 e posterior, e o Netscape Navigator 6 oferecem suporte a este atributo. 
Filtro Aplica efeitos especiais ao objeto controlado pelo estilo, incluindo desfoque e inversão. Selecione um efeito no menu pop-up. 


. Quando você terminar de definir essas opções, selecione outra categoria CSS no lado esquerdo do painel para definir outras propriedades 
de estilo ou clique em OK. 


As publicações do Twitter?” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 


221 


Configurar as propriedades de link da CSS para uma página inteira 


Nota: A interface de usuário foi simplificada na Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das 
opções descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo. 


Você pode especificar fontes, tamanhos da fonte, cores e outros itens para seus links. Por padrão, o Dreamweaver cria regras de CSS para seus 
links e aplica-os a todos os links que você usa na página. (As regras são incorporadas na seção título da página.) 


Nota: Se quiser personalizar links individuais em uma página, você deverá criar regras de CSS individuais e, em seguida, aplicá-las aos links 
separadamente. 


1. Selecione Modificar > Propriedades da página ou clique no botão Propriedades da página no Inspetor de propriedades de texto. 
2. Escolha a categoria Links (CSS) e defina as opções. 


Fonte do link Especifica a família de fontes padrão a ser usada como texto do link. Por padrão, o Dreamweaver usa a família de fontes 
especificada para a página inteira, a menos que você especifique outra fonte. 


Tamanho Especifica o tamanho de fonte padrão a ser usado no texto do link. 

Cor do link Especifica a cor a ser aplicada ao texto do link. 

Links visitados Especifica a cor a ser aplicada aos links visitados. 

Links de sobreposição Especifica a cor a ser aplicada quando o ponteiro do mouse é colocado sobre um link. 

Links ativos Especifica a cor a ser aplicada quando o mouse é clicado em um link. 

Estilo sublinhado Especifica o estilo de sublinhado a ser aplicado aos links. Se a página já tiver um estilo de link sublinhado definido 
(através de uma folha de estilos CSS externa, por exemplo), o valor padrão do menu Estilo sublinhado será a opção “não alterar”. Esta 


opção informa sobre um estilo de link não definido. Se você modificar o estilo de link sublinhado usando a caixa de diálogo Propriedades da 
página, o Dreamweaver alterará a definição de link anterior. 


As publicações do Twitter?” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Definição das preferências de estilos CSS 


As preferências de estilo CSS determinam como o Dreamweaver gravará o código que define os estilos CSS. Os estilos CSS podem ser escritos 
em uma forma abreviada mais fácil para algumas pessoas trabalharem. No entanto, algumas versões mais antigas de navegadores não 
interpretam corretamente esse formato abreviado. 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e, na lista Categoria, selecione Estilos CSS. 


2. Defina as opções de estilo CSS que deseja aplicar: 
Ao criar regras CSS, use o formato abreviado para Permite que você selecione quais propriedades de estilo CSS o Dreamweaver 
escreverá no formato abreviado. 


Ao editar regras CSS, use o formato abreviado Determina se o Dreamweaver reescreverá os estilos existentes em formato abreviado. 
Selecione Se original usou formato abreviado para deixar todos os estilos como estão. 


Selecione De acordo com as configurações acima para reescrever os estilos em formato abreviado para as propriedades 
selecionadas em Usar formato abreviado para. 


Ao clicar duas vezes em painel CSS Permite que você selecione uma ferramenta para edição das regras CSS. 


3. Clique em OK. 


[63] ex-ne-sa ] 
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Configurar propriedades de cabeçalho da CSS para uma página 
inteira 


Nota: A interface de usuário foi simplificada na Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das 
opções descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo. 


Pode especificar fontes, tamanhos da fonte e cores dos títulos da sua página. Por padrão, o Dreamweaver cria regras de CSS para seus títulos e 
aplica-os a todos os títulos que você usa na página. (As regras são incorporadas na seção título da página.) 


Os cabeçalhos estão disponíveis para seleção no Inspector de propriedades de HTML. 


1. Selecione Modificar > Propriedades da página ou clique no botão Propriedades da página no Inspetor de propriedades de texto. 
2. Escolha a categoria Cabeçalhos (CSS) e defina as opções. 


Fonte do cabeçalho Especifica a família de fontes padrão a ser usada como cabeçalhos. O Dreamweaver usará a família de fontes 
especificada, a menos que outra fonte seja definida para um elemento de texto. 


Cabeçalho 1 a Cabeçalho 6 Especifica o tamanho e a cor da fonte a serem usados em até seis níveis de tags de cabeçalho. 


As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 
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Movimentação/exportação de regras CSS 


Movimentação/exportação de regras CSS para uma nova folha de estilos 
Movimentação/exportação de regras CSS para uma folha de estilos existente 
Reorganização ou movimentação das regras CSS arrastando-as 

Seleção de várias regras antes de movê-las 


Os recursos de gerenciamento de CSS do Dreamweaver facilita a movimentação ou a exportação de regras CSS para diferentes locais. Você 
pode mover regras de um documento para outro, do cabeçalho de um documento para uma folha de estilos externa, entre arquivos CSS externos 
e muito mais. 

Nota: Se a regra que você está tentando mover estiver em conflito com uma regra na folha de estilos de destino, o Dreamweaver exibirá a caixa 
de diálogo Já existe regra com nome igual. Se você optar por mover a regra conflitante, o Dreamweaver colocará a regra movida imediatamente 
ao lado da regra conflitante na folha de estilos de destino. 


Movimentação/exportação de regras CSS para uma nova folha de estilos id 


1. Siga um destes procedimentos: 


e No painel Estilos CSS, selecione a(s) regra(s) que deseja mover. Em seguida, clique com o botão direito do mouse na seleção e 
selecione Mover regras CSS no menu de contexto. Para selecionar várias regras, mantenha pressionada a tecla Control (Windows) ou 
mantenha pressionada a tecla Command (Macintosh) enquanto clica nas regras a serem selecionadas. 


e Na Visualização de código, selecione a(s) regra(s) que você deseja mover. Em seguida, clique com o botão direito do mouse na 
seleção e selecione Estilos CSS > Mover regras CSS no menu de contexto. 


e Nota: A seleção parcial de uma regra resultará na realocação de toda a regra. 
2. Na caixa de diálogo Mover para folha de estilos externa, selecione a opção de nova folha de estilos e clique em OK. 
3. Na caixa de diálogo Salvar arquivo de folha de estilos como, digite um nome para a nova folha de estilos e clique em Salvar. 
Quando você clica em Salvar, o Dreamweaver salva uma nova folha de estilos com as regras selecionadas e a anexa ao documento atual. 


Também é possível mover as regras usando a barra de ferramentas Codificação. A barra de ferramentas Codificação está disponível 
somente na Visualização de código. 


Movimentação/exportação de regras CSS para uma folha de estilos existente ii 


1. Siga um destes procedimentos: 


e No painel Estilos CSS, selecione a(s) regra(s) que deseja mover. Em seguida, clique com o botão direito do mouse na seleção e 
selecione Mover regras CSS no menu de contexto. Para selecionar várias regras, mantenha pressionada a tecla Control (Windows) ou 
mantenha pressionada a tecla Command (Macintosh) enquanto clica nas regras a serem selecionadas. 


e Na Visualização de código, selecione a(s) regra(s) que você deseja mover. Em seguida, clique com o botão direito do mouse na 
seleção e selecione Estilos CSS > Mover regras CSS no menu de contexto. 


e Nota: A seleção parcial de uma regra resultará na realocação de toda a regra. 


2. Na caixa de diálogo Mover para folha de estilos externa, selecione uma folha de estilos existente no menu pop-up ou vá até uma folha de 
estilos existente e clique em OK. 
Nota: O menu pop-up exibe todas as folhas de estilos vinculadas ao documento atual. 
Também é possível mover as regras usando a barra de ferramentas Codificação. A barra de ferramentas Codificação está disponível 
somente na Visualização de código. 


à ” z ai Para o início 
Reorganização ou movimentação das regras CSS arrastando-as 
*& No painel Estilos CSS (modo Tudo), selecione uma regra e arraste-a para o local desejado. Você pode selecionar e arrastar para reordenar as 
regras em uma folha de estilos ou mover uma regra para outra folha de estilos ou cabeçalho de documento. 
É possível mover mais de uma regra por vez, mantendo pressionada a tecla Control (Windows) ou mantendo pressionada a tecla Command 
(Macintosh) enquanto clica em várias regras para selecioná-las. 


” lia A Para o início 
Seleção de várias regras antes de movê-las 


225 


*& No painel Estilos CSS, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto 
clica nas regras a serem selecionadas. 
Mais tópicos da Ajuda 
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Vinculação a uma folha de estilos CSS externa 


Quando você edita uma folha de estilos CSS externa, todos os documentos vinculados a essa folha de estilos CSS são atualizados para refletir 
essas edições. É possível exportar os estilos CSS localizados em um documento para criar uma nova folha de estilos CSS, e anexar ou vincular- 
se a uma folha de estilos externa para aplicar os estilos encontrados nesse local. 


Você pode anexar às páginas qualquer folha de estilos criada ou copiada no site. Além disso, o Dreamweaver é fornecido com folhas de estilos 
predefinidas que podem ser movidas automaticamente para o site e anexadas às páginas. 


1. Abra o painel Estilos CSS seguindo um destes procedimentos: 
* Selecione Janela > Estilos CSS. 
e Pressione Shift + F11. 


2. No painel Estilos CSS, clique no botão Anexar folha de estilos. (Ele está localizado no canto inferior direito do painel.) 


3. Siga um destes procedimentos: 
e Clique em Procurar para ir até uma folha de estilos CSS externa. 
e Digite o caminho para a folha de estilos na caixa Arquivo/URL. 
4. Em Adicionar como, selecione uma das opções: 


e Para criar um link entre o documento atual e uma folha de estilos externa, selecione Link. Esse procedimento criará uma tag de link 
href no código HTML e referencia o URL no local em que a folha de estilos publicada está localizada. O Microsoft Internet Explorer e o 
Netscape Navigator oferecem suporte a esse método. 


e Você não pode usar uma tag de link para adicionar uma referência de uma folha de estilos externa a outra. Para aninhar folhas de 
estilos, use uma diretiva de importação. A maioria dos navegadores também reconhece a diretiva de importação em um página (e não 
apenas nas folhas de estilos). Há diferenças sutis na maneira como as propriedades conflitantes são resolvidas quando existem regras 
sobrepostas em folhas de estilos externas vinculadas a uma página ou importadas para uma página. Para importar uma folha de estilos 
externa, em vez de vincular-se a ela, selecione Importar. 


5. No menu pop-up Mídia, especifique a mídia de destino da folha de estilos. 


Para obter mais informações sobre as folhas de estilos dependentes de mídia, consulte o site da World Wide Web Consortium em 
Wwww.w3.org/TR/CSS21/media.html. 


6. Clique no botão Visualizar para verificar se a folha de estilos aplica os estilos desejados à página atual. 


Se os estilos aplicados não forem o que você espera, clique em Cancelar para remover a folha de estilos. A aparência da página será 
revertida para o estado anterior. 


7. Clique em OK. 


Mais tópicos da Ajuda 
Criar uma página baseada em um arquivo de amostra do Dreamweaver 


(65) ev-nc-sa ] 
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Inspecionar CSS na visualização ativa 


O modo de inspeção funciona junto com a visualização ativa para ajudá-lo a identificar rapidamente os elementos HTML e seus estilos CSS 
associados. Com o modo Inspeção acionado, você pode passar com o mouse sobre elementos da página para ver os atributos do modelo da 
caixa CSS para qualquer elemento de nível de bloqueio. 


Nota: Para obter mais informações sobre o modelo de caixa de CSS, consulte a especificação CSS 2.1. 

Além de ver uma representação visual do modelo de caixa no modo Inspeção, você também pode usar o painel Estilos CSS, conforme passar o 
mouse sobre os elementos na janela Documento. Quando você tem o painel Estilos CSS aberto no modo Atual e passa com o mouse sobre um 
elemento da página, as regras e as propriedades do painel Estilos CSS são atualizadas automaticamente para mostrar as regras e propriedades 
desse elemento. Além disso, qualquer visualização ou painel relacionado ao elemento sobre o qual você passa o mouse é atualizado também 
(por exemplo, Visualização de código, o Seletor de tags, o Inspetor de propriedades e assim por diante). 


1. Com o documento aberto na janela Documento, clique no botão Inspecionar (ao lado do botão Visualização ativa na barra de ferramentas 
do documento) 


Nota: Se ainda não estiver na visualização Ativa, o modo Inspeção a ativará automaticamente. 


2. Passe o mouse sobre elementos da página para ver o modelo de caixa de CSS. O modo Inspeção destaca diferentes cores para a borda, a 
margem, o preenchimento e o conteúdo. 


3. (Opcional) Pressione a seta para a esquerda no teclado do computador para destacar o pai do elemento atualmente destacado. Pressione 
a seta para a direita para retornar o destaque para o elemento filho. 


4. (Opcional) Clique em um elemento para bloquear uma seção destacada. 


Nota: Clicar em um elemento para bloquear uma seleção destacada desativa o modo Inspeção. 


Adobe recomenda EM Há algum tutorial que você gostaria de compartilhar? 


Dreamweaver CS5 - CSS 


Inspect 
A Scott Fegette, gerente de produto 
Dreamweaver 


Tutorial de vídeo que mostra o CSS 
Inspect 


Mais tópicos da Ajuda 
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Layouts de Grade fluida (CC) 


Uso de layouts de Grade fluida 
Criação de um layout de Grade fluida 
Inserção de elementos de Grade fluida 
Elementos de aninhamento 


O layout de um site precisa responder e adaptar-se às dimensões do dispositivo em que é exibido. Os layouts de grade fluidos oferecem uma 
maneira visual de criar layouts diferentes que correspondam aos dispositivos em que o site é exibido. 


Por exemplo, o site será exibido em computadores, tablets e celulares. É possível usar layouts de grade fluidos para especificar layouts para cada 
um desses dispositivos. Dependendo de onde o site for exibido (computador, tablet ou celular), o layout correspondente é usado para exibir o 
site. 


Mais informações: Layout adaptativo versus Layout responsivo 


O lançamento da Dreamweaver 12.2 Creative Cloud inclui diversas melhorias para layouts de grade fluidos, como o suporte a elementos 
estruturais HTMLS5 e a edição facilitada de elementos aninhados. Para obter uma visão geral da lista completa de aprimoramentos, clique aqui. 


Nota: o modo de Inspeção para documentos de Grade fluida não está disponível no Dreamweaver 13.1 e posterior. 


Para o início 


Uso de layouts de Grade fluida 


Assista a este tutorial em vídeo para aprender a usar os Layouts de grade fluida: Explorando os layouts de grade fluida. 


Criação de um layout de Grade fluida Para o início 


1. Selecione Arquivo > Novo layout de Grade fluida. 


2. O valor padrão para o número de colunas na grade é exibido no centro do tipo de mídia. Para personalizar o número de colunas para um 
dispositivo, edite o valor conforme necessário. 


3. Para definir a largura de uma página de acordo com o tamanho da tela, defina o valor em porcentagem. 
4. Além disso, você pode mudar a largura da medianiz. A medianiz é o espaço entre duas colunas. 


5. Especifique as opções da CSS para a página. 
Ao clicar em Criar, você deverá especificar um arquivo da CSS. Você pode executar um dos seguintes procedimentos: 


e Crie um arquivo CSS. 
e Abra um arquivo CSS existente. 
e Especifique o arquivo CSS que está sendo aberto como um arquivo de Grade fluida da CSS. 


A grade fluida para celulares é exibida por padrão. Além disso, será exibido o painel Inserir para a grade fluida. Use as opções no painel 
Inserir para criar o layout. 
Para alternar para a criação de layout para outros dispositivos, clique no ícone correspondente nas opções abaixo da visualização de 
design. 

6. Salve o arquivo. Ao salvar o arquivo HTML, você deverá salvar os arquivos dependentes, como boilerplate.css e respond.min.js, em um 
local no computador. Especifique um local e clique em Copiar. 


O boilerplate.css é baseado no padrão estereotipado HTMLS5. Ele é um conjunto de estilos da CSS que garante a consistência no modo 
como sua página da Web é renderizada em vários dispositivos. O respond.min.js é uma biblioteca JavaScript que fornece suporte a 
consultas de mídia em versões antigas de navegadores. 


Para o início 


Inserção de elementos de Grade fluida 


O painel Inserir (Janela >Inserir) lista os elementos que você pode usar em um layout de Grade fluida. Ao inserir elementos, você pode optar por 
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inseri-los como elementos fluidos. 
1. No painel Inserir, selecione o elemento a ser inserido. 


2. Na caixa de diálogo exibida, selecione uma classe ou insira um valor para a ID. O menu Classe exibe as classes do arquivo CSS 
especificado na criação da página. 


3. Marque a caixa de seleção Inserir como um elemento fluido. 


4. Quando você seleciona um elemento inserido, as opções para ocultar, duplicar, bloquear ou excluir o Div são exibidas. Para Divs 
sobrepostos um em cima do outro, a opção para alternar Divs é exibida. 


: Dbservação Todas as tags Div da 
: Mwetamente na tag div "gndContaing 
isão suportadas 


Opção Rótulo Descrição 
Alterna o elemento selecionado no 
A Alternar Div momento com o elemento acima ou 
abaixo. 


Oculta o elemento. 


Para revelar um elemento, siga um 
destes procedimentos: 


Para revelar seletores de ID, altere a 
propriedade display no arquivo CSS 
para block. (display : block) 


B Ocultar 


Para revelar seletores de classe, remova 
a classe aplicada 
(hide <MediaType>) no código-fonte. 


Cc Mover para cima uma linha Move o elemento uma linha para cima. 


Duplica o elemento selecionado no 
D Duplicar momento. A CSS vinculada ao elemento 
também é duplicada. 


Para os seletores de ID, exclui o HTML 
ea Css. Para excluir apenas HTML, 

E Excluir pressione Excluir. 
Para os seletores de classe, apenas o 
HTML é excluído. 


Converte o elemento para um elemento 


F Bloquear e 
q absolutamente posicionado. 


Para os seletores de classe, o botão 
Alinhar funciona como um botão de 

G Alinhar margem zero. 
Para os seletores de ID, o botão Alinhar 
alinha o elemento na grade. 


Os elementos fluidos em uma página podem ser atravessados de modo cíclico usando as teclas de seta para esquerda e direita. 
Selecione o limite de elemento e pressione a tecla de seta. 


. Eq 
Elementos de aninhamento a 


Para aninhar elementos fluidos em outros elementos fluidos, certifique-se de que o foco esteja no elemento pai. Em seguida, insira o elemento 
filho obrigatório. 


A duplicação aninhada também é possível. A duplicação aninhada duplica o HTML (o elemento selecionado) e gera a CSS fluida relevante. Os 
elementos absolutos contidos no elemento selecionado são posicionados corretamente. Os elementos aninhados também podem ser duplicados 
usando o botão Duplicar. 
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Quando você exclui um elemento pai, a CSS correspondente ao elemento, seus filhos e o HTML associado são excluídos. Os elementos 
aninhados também podem ser excluídos usando o botão Excluir (atalho de teclado: Ctrl+Delete). 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Aplicação de degradês ao fundo 


Processamento de degradês em navegadores da Web 
Troca de imagens e degradês de fundo 


Usando o painel CSS Designer, é possível aplicar degradês ao plano de fundo de seus sites. A propriedade de degradê está disponível na 
categoria Fundo. 


Propriedades + 

m [7 0) = (+= [1 Exib. conj. 
border-collapse voe dp 

border-spacing 1: Opx O px 

[3 Fundo 

background-color 1 14] undefined 


background-image 


ur Caminho do arquivo 


backg ound- E E: 
position it 
background-size 1: auto auto 
background-clip : border-box 
background-repeat = 

V um us no" 
background-origin : gaciding-bos 
backg ound- Re” 
aktachment dolo 


propriedade “degradê” 


Clique em [A perto da propriedade degradê para abrir o painel degradês. Com esse painel, você pode: 
e Escolher cores de modelos de cor diferente (RGBa, Hexadecimal ou HSLa) e salvar as combinações de cores como amostras de cores. 
e Para redefinir a nova cor como a cor original, clique na cor original (K). 
e Para alterar a ordem das amostras, arraste-as até a posição desejada. 
e Para excluir uma amostra de cores, arraste a amostra para fora do painel. 
e Usar os delimitadores de cor para criar degradês complexos. Clique em qualquer lugar entre os delimitadores de cores padrão para criar um 
delimitador de cor. Para excluir o delimitador de cor, arraste o delimitador de cor para fora do painel. 
e Especificar o ângulo do degradê linear. 
e Para repetir o padrão, selecione Repetição. 
e Salvar os degradês personalizados como amostras. 
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rgba(160,212,228,1.00) | RGBa F 


Caixa de diálogo Degradê 

A. Interrupção de cor B. Amostra de degradê C. Adicionar amostra de degradê D. Repetição linear E. Modelos de cor F. Conta-gotas G. Controle 
deslizante de cores H. Controle deslizante de claridade I. Controle deslizante de opacidade J. Adicionar amostra de cor K. Amostra de cor L. Cor 
original M. Cor selecionada N. Ângulo do degradê linear 


Nota: A ferramenta Conta-gotas está disponível no Dreamweaver 13.1 e posterior. 


Vamos entender o seguinte código: 


background- image: linear-gradient(57deg, rgba(255, 255,255,1.00) 0%, rgba(21,8,8,1.00) 46.63%, rgba(255,0,0,1.00) 
100%) 


e 57deg: indica o ângulo do degradê linear 
e rgba(255, 255, 255, 1.00): indica a cor da primeira interrupção de cor 
e 0%: indica a interrupção de cor 
Nota: somente os valores "%" de delimitadores de cor são permitidos no Dreamweaver. Se você usar outros valores, como px ou em, o 


Dreamweaver irá interpretá-los como "nil". Além disso, o Dreamweaver não oferece suporte a cores CSS e, se você especificar essas cores no 
código, tais cores serão lidas como "nil”. 


à Ri 
Processamento de degradês em navegadores da Web fi 


Ao usar degradês como fundo, configure o Dreamweaver para renderizar corretamente os degradês em navegadores da Web diferentes. O 
Dreamweaver adiciona prefixos do fornecedor ao código que permitem que os navegadores da Web exibam degradês de modo apropriado. 
O Dreamweaver pode gravar os seguintes prefixos do fornecedor no formato w3c: 

e Webkit 

e Mozilla 

- Opera 

* Visualização dinâmica do Dreamweaver (formato do Webkit antigo) 


Por padrão, o Dreamweaver grava prefixos do fornecedor para o WebKit e a visualização dinâmica do Dreamweaver. É possível escolher os 
outros fornecedores necessários na caixa de diálogo Preferências (Preferências > Estilos CSS). 


Nota: Para as gerações de sombra de Caixa, os prefixos do Webkit e w3c sempre são gerados independentemente de terem sido selecionados 
ou não em Preferências. 


As alterações feitas nos degradês também são refletidas nas sintaxes específicas do fornecedor. Se você abrir um arquivo existente que contém 
sintaxes específicas do fornecedor na Dreamweaver CC, escolha os prefixos do fornecedor obrigatórios em Preferências. Isso acontece porque, 
por padrão, o Dreamweaver atualiza somente o Webkit e o código relacionado à visualização dinâmica do Dreamweaver quando você usa ou 
altera degradês. Portanto, as outras sintaxes específicas do fornecedor no seu código não são atualizadas. 


Para o início 


Troca de imagens e degradês de fundo 


Você pode alterar a ordem (em que aparecem no código) de imagens e degradês de fundo com um único clique. 
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Clique no lado do URL ou na propriedade de degradê no CSS Designer. 


background-image 


gradient E repeating-inear-gradient(250... 
ur ..fimages/arrow gif 


Trocar o fundo 


Nota: o Dreamweaver CC contém uma implementação básica do recurso de troca de fundo. Quando você tiver vários valores ou imagens, a 
troca talvez não funcione como esperado. Além disso, suponha que você tenha uma imagem, a segunda imagem e um degradê aplicado ao 
plano de fundo. Trocar o degradê resulta na seguinte ordem: degradê, segunda imagem, primeira imagem. 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Formatação do código CSS 


Definição das preferências de formatação de código CSS 
Formatação manual do código CSS em uma folha de estilos CSS 
Formatação manual do código CSS incorporado 


Você pode definir preferências que controlam o formato do código CSS sempre que cria ou edita uma regra CSS usando a interface do 
Dreamweaver. Por exemplo, é possível definir preferências que colocarão todas as propriedades CSS em linhas separadas, inserir uma linha em 
branco entre as regras CSS etc. 


Quando você define preferências de formatação de código CSS, as preferências selecionadas são automaticamente aplicadas a todas as novas 
regras CSS criadas. No entanto, você também pode aplicar essas preferências manualmente a documentos individuais. Isso poderá ser útil ser 
você tiver um documento HTML ou CSS mais antigo que precise de formatação. 


Nota: As preferências de formatação de código CSS se aplicam às regras CSS apenas nas folhas de estilos externas ou incorporadas (e não 
aos estilos inline). 


Para o início 


Definição das preferências de formatação de código CSS 


E» wmNAR 


5. 


. Selecione Editar > Preferências. 

. Na caixa de diálogo Preferências, selecione a categoria Formato do código. 

. Ao lado de Formatação avançada, clique no botão CSS. 

. Na caixa de diálogo Opções de formato de origem CSS, selecione as opções a serem aplicadas ao código-fonte CSS. Uma visualização da 


CSS de acordo com as opções selecionadas é exibida na janela Visualizar abaixo. 
Recuar propriedades com Define o valor de recuo das propriedades em uma regra. Você pode especificar tabulações ou espaços. 


Cada propriedade em uma linha separada Coloca cada propriedade de uma regra em uma linha separada. 

Colchete de abertura em linha separada Coloca o colchete de abertura de uma regra em uma linha separada do seletor. 
Somente se houver mais de 1 propriedade Coloca as regras de propriedade única na mesma linha do seletor. 

Todos os seletores de uma regra na mesma linha Coloca todos os seletores da regra na mesma linha. 

Linha em branco entre regras Insere uma linha em branco entre cada regra. 


Clique em OK. 


Nota: A formatação de código CSS também herda a preferência Tipo de quebra de linha definida na categoria Formato do código da caixa de 
diálogo Preferências. 


Para o início 


Formatação manual do código CSS em uma folha de estilos CSS 


Ú. 
2: 


Abra uma folha de estilos CSS. 
Selecione Comandos > Aplicar formatação de origem. 


As opções de formatação definidas nas preferências de formatação de código de origem são aplicadas ao documento inteiro. Você não 
pode formatar seleções individuais. 


Para o início 


Formatação manual do código CSS incorporado 


Ú. 
2: 
3. 


Abra uma página HTML que contém CSS incorporada no cabeçalho do documento. 
Selecione qualquer parte do código CSS. 
Selecione Comandos > Aplicar formatação de origem à seleção. 


As opções de formatação definidas nas preferências de formatação do código CSS são aplicadas a todas as regras CSS apenas no 
cabeçalho do documento. 


Nota: Você pode selecionar Comandos > Aplicar formatação de origem para formatar o documento inteiro de acordo com as preferências 
de formatação de código especificadas. 


Mais tópicos da Ajuda 
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Aprimoramentos no suporte a CSS3 no painel de estilos CSS (CS 
5.5) 


Aplicar propriedades CSS3 usando o painel pop-up 
Especificação de vários conjuntos de valores 
Localizar propriedades na exibição de Categoria 
Verificar compatibilidade com navegadores 
Visualizar alterações na Visualização dinâmica 


Um painel pop-up foi introduzido no Painel CSS das seguintes propriedades: 
* sombra do texto 
* sombra da caixa 
e raio da borda 
e border-image 


As opções no painel pop-up garantem a aplicação das propriedades corretamente mesmo se você não estiver familiarizado com a sintaxe W3C. 


Properties far body” 
bacigrard 2668054 
color Es 
font-famá Helvetica, “Treb. 
margn [o 
padding 0 
border-maçe “ 
did Promertr mm 
JE Agdirod) s97298| 


As opções de exibição do painel pop-up da imagem de borda da propriedade CSS3 


Para o início 


Aplicar propriedades CSS3 usando o painel pop-up 


e Clique no ícone "+" correspondente a essas propriedades. Use as opções no painel pop-up para aplicar a propriedade. 


ae ” égi aá - Para o início 
Especificação de vários conjuntos de valores 
Propriedades CSS3 como sombra do texto suportam vários conjuntos de valores. Por exemplo: sombra do texto: 3px 3px %000, -3px- 
3px H0fO; 


Quando você especifica vários conjuntos de valores na visualização de código e abre o painel pop-up de edição, apenas o primeiro conjunto de 
valores é exibido. Se você editar esse conjunto de valores no painel pop-up, apenas o primeiro conjunto de valores no código será afetado. Os 
outros conjuntos de valores não são afetados e são aplicados conforme especificado no código. 


Para o início 


Localizar propriedades na exibição de Categoria 


Na exibição de Categoria, a sombra do texto é listada abaixo da categoria Fonte. A sombra da caixa,o raio da borda ea imagem da 
borda são listados abaixo da categoria Borda. 


Para o início 


Verificar compatibilidade com navegadores 


O Dreamweaver CS 5.5 também suporta implementações específicas de navegador (webkit, Mozilla) nas propriedades sombra da caixa, raio da 
borda e imagem da borda. 


Na exibição de Categoria, use as opções abaixo da respetiva categoria do navegador para verificar a compatibilidade do navegador para essas 
propriedades. Por exemplo, para estar de acordo com a implementação do Mozilla da propriedade de imagem da borda, edite -moz - border - 
image na categoria do Mozilla. 
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= É E” a é a E P iníci 
Visualizar alterações na Visualização dinâmica isa, 


As alterações feitas nas propriedades CSS não são exibidas na Visualização de design. Mude para a Visualização dinâmica para visualizar as 
alterações. Você também pode fazer edições rápidas nas propriedades CSS3 na Visualização dinâmica, e as alterações refletirão de forma 
imediata nessa visualização. 


As seguintes propriedades CSS3 têm suporte na Visualização dinâmica: 


e sombra do texto 
e raio da borda 
e -webkit-box-shadow 


e -webkit-border-image 


Suporte aprimorado para a CSS3 no DW CS5.5 


caixa, Raio da borda e Imagem da borda... 


Leia mais 


Suporte para Sombra do texto, Sombra da por Preran iúiriooi 
http://blogs.adobe.com/pre... 


http://g00.gl/BpHhu 
Contribua com sua experiência: 
Adobe Community Help 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Edição de uma folha de estilos CSS 


Uma folha de estilos CSS geralmente inclui uma ou mais regras. Você pode editar uma regra individual em uma folha de estilos CSS usando o 
painel Estilos CSS ou, se preferir, pode trabalhar diretamente na folha de estilos CSS. 


1. No painel Estilos CSS (Janela > Estilos CSS), selecione o modo Tudo. 
2. No painel Todas as regras, clique duas vezes no nome da folha de estilos a ser editada. 
3. Na janela Documento, modifique a folha de estilos conforme desejado e salve-a. 


(9) ex-nc-sa ) 
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Edição de uma regra CSS 


Edição de uma regra no painel Estilos CSS (modo Atual) 
Edição de uma regra no painel Estilos CSS (modo Tudo) 
Alteração do nome de um seletor CSS 


Você pode editar facilmente regras internas e externas que você aplicou a um documento. 


Ao editar um folha de estilos CSS que controla o texto no documento, você reformatará instantaneamente todo o texto controlado por essa folha 
de estilos. As edições em uma folha de estilos externa afetam todos os documentos vinculados a ela. 


Você pode definir um editor externo a ser usado para edição das folhas de estilos. 


Para o início 


Edição de uma regra no painel Estilos CSS (modo Atual) 


Abra o painel Estilos CSS selecionando Janela > Estilos CSS. 
Clique no botão Atual na parte superior do painel Estilos CSS. 
Selecione um elemento de texto na página atual para exibir suas propriedades. 


PO NH 


Siga um destes procedimentos: 


e Clique duas vezes em uma propriedade no painel Resumo para seleção a fim de exibir a caixa de diálogo Definição de regra CSS e 
faça suas alterações. 


* Selecione uma propriedade no painel Resumo para seleção e edite a propriedade no painel Propriedades abaixo. 
e Selecione uma regra no painel Regras e edite as propriedades da regra no painel Propriedades abaixo. 


Nota: Você pode alterar o comportamento de duplo clique para edição da CSS, bem como outros comportamentos, alterando as 
preferências do Dreamweaver. 


Para o início 


Edição de uma regra no painel Estilos CSS (modo Tudo) 


1. Abra o painel Estilos CSS selecionando Janela > Estilos CSS. 
2. Clique no botão Tudo na parte superior do painel Estilos CSS. 


3. Siga um destes procedimentos: 


e Clique duas vezes em uma regra no painel Todas as regras a fim de exibir a caixa de diálogo Definição de regra CSS e faça suas 
alterações. 


* Selecione uma regra no painel Todas as regras e edite as propriedades da regra no painel Propriedades abaixo. 
e Selecione uma regra no painel Todas as regras e clique no botão Editar estilo no canto inferior direito do painel Estilos CSS. 


Nota: Você pode alterar o comportamento de duplo clique para edição da CSS, bem como outros comportamentos, alterando as 
preferências do Dreamweaver. 


x RE 
Alteração do nome de um seletor CSS PREEO 


1. No painel Estilos CSS (modo Tudo), escolha o seletor que você deseja alterar. 
2. Clique no seletor novamente para tornar o nome editável. 
3. Faça suas alterações e pressione Enter (Windows) ou Return (Macintosh). 


Mais tópicos da Ajuda 
Definir propriedades de texto no Inspetor de propriedades 


(65) =v-nc-sa ] 
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Uso de exemplos de folhas de estilos do Dreamweaver 


O Dreamweaver fornece exemplos de folhas de estilos que você pode aplicar às páginas ou usar como pontos de partida para desenvolver seus 
próprios estilos. 


1. Abra o painel Estilos CSS seguindo um destes procedimentos: 
e Selecione Janela > Estilos CSS. 
e Pressione Shift+F11. 


2. No painel Estilos CSS, clique no botão Anexar folha de estilos externa. (Ele está localizado no canto inferior direito do painel.) 
3. Na caixa de diálogo Anexar folha de estilos externa, clique em Exemplo de folhas de estilo. 
4. Na caixa de diálogo Exemplo de folhas de estilo, selecione uma folha de estilos na caixa de listagem. 


Quando você selecionar as folhas de estilos na caixa de listagem, o painel Visualizar exibirá a formatação de texto e cor da folha de estilos 
selecionada. 


5. Clique no botão Visualizar para aplicar a folha de estilos e verifique se ele aplica os estilos desejados à página atual. 
Se os estilos aplicados não estiverem como você espera, selecione outra folha de estilos na lista e clique em Visualizar ver esses estilos. 


6. Por padrão, o Dreamweaver salva a folha de estilos em uma pasta cnamada CSS imediatamente abaixo da raiz do site definido para a 
página. Se essa pasta não existir, o Dreamweaver a criará. Você pode salvar o arquivo em outro local clicando em Procurar e mudando de 
pasta. 


7. Quando você localizar uma folha de estilos cujas regras de formatação atendem aos critérios de design, clique em OK. 


(69) ex-ne-sa ] 
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Trabalho com tags div 


Inserir e editar tags div 
Blocos de layout CSS 
Trabalho com elementos PA 


(Somente para usuários da Creative Cloud): sete novas tags semânticas estão disponíveis quando você seleciona Inserir> Layout. As novas tags 
são: Artigo, À parte, HGroup, Navegação, Seção, Cabeçalho e Rodapé. Para obter mais informações, consulte Inserir elementos semânticos de 
HTMLS no painel Inserir. 


, : Ê si 
Inserir e editar tags div ara o início 


Você pode criar layouts de página inserindo manualmente tags div e aplicando os estilos de posicionamento CSS a elas. Uma tag div é uma tag 
que define divisões lógicas no conteúdo de uma página da Web. Você pode usar tags div para centralizar blocos de conteúdo, criar efeitos de 
coluna, criar diferentes áreas de cor e muito mais. 


Se não estiver familiarizado com o uso das tags div e folhas de estilos em cascata (CSS) para criar páginas da Web, você poderá criar um layout 
CSS baseado em um dos layouts predefinidos fornecidos com o Dreamweaver. Se não estiver acostumado a trabalhar com a CSS, mas estiver 
familiarizado com as tabelas, você deverá também tentar utilizá-las. 


Nota: O Dreamweaver trata todas as tags div com posição absoluta como elementos PA (elementos com posição absoluta), mesmo que você 
não tenha criado essas tags usando a ferramenta de desenho Div PA. 


Inserção de tags div 

Você pode usar tags div para criar blocos de layout CSS e posicioná-los no documento. Isso será útil se você tiver uma folha de estilos CSS 
existente com estilos de posicionamento anexados ao documento. O Dreamweaver permite que você insira rapidamente uma tag div e aplique 
estilos existentes a ela. 


1. Na janela Documento, coloque o ponto de inserção no local em que a tag div deve aparecer. 


2. Siga um destes procedimentos: 
* Selecione Inserir > Objetos de layout > Tag div. 
e Na categoria Layout do painel Inserir, clique no botão Inserir tag div El). 


3. Defina uma das seguintes opções: 
Inserir Permite que você selecione o local da tag div e o nome da tag caso ela não seja nova. 


Classe Exibe o estilo de classe atualmente aplicado à tag. Se você anexou uma folha de estilos, as classes definidas nessa folha de estilos 
aparecerão na lista. Use este menu pop-up para selecionar o estilo que você deseja aplicar à tag. 


ID Permite que você altere o nome usado para identificar a tag div. Se você anexou uma folha de estilos, as IDs definidas nessa folha de 
estilos aparecerão na lista. As IDs dos blocos que já estão no documento não são listadas. 
Nota: O Dreamweaver informará se você inserir a mesma ID de outra tag no documento. 


Nova regra CSS Abre a caixa de diálogo Nova regra CSS. 
4. Clique em OK. 


A tag div aparece como uma caixa no documento com o texto do alocador de espaço. Quando você move o ponteiro sobre a borda da 
caixa, o Dreamweaver o realça. 


Se a tag div tiver uma posição absoluta, ela se tornará um elemento PA. (Você pode editar tags div que não possuem posição absoluta.) 


Edição de tags div 

Depois que você inserir uma tag div, poderá manipulá-la ou adicionar conteúdo a ela. 

Nota: As tags div com posição absoluta se tornam elementos PA. 

Quando você atribuir bordas a tags div ou quando a opção Contornos do layout CSS estiver selecionada, elas terão bordas visíveis. (A opção 


Contornos do layout CSS é selecionada por padrão no menu Exibir > Auxílios visuais.) Quando você move o ponteiro sobre uma tag div, o 
Dreamweaver realça a tag. É possível alterar a cor do realce ou desativar o realce. 


Ao selecionar uma tag div, você poderá visualizar e editar regras para ela no painel Estilos CSS. Também é possível adicionar conteúdo à tag div 
colocando o ponto de inserção dentro da tag div e adicionando o conteúdo exatamente como faria ao adicionar conteúdo a uma página. 


Visualização e edição das regras aplicadas uma tag div 
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1. Siga um destes procedimentos para selecionar a tag div: 
e Clique na borda da tag div. 
Procure o realce para ver a borda. 
e Clique dentro da tag div e pressione Control+A (Windows) ou Command+A (Macintosh) duas vezes. 
e Clique dentro da tag div e selecione a tag div no seletor de tags na parte inferior da janela Documento. 
2. Selecione Janela > Estilos CSS para abrir o painel Estilos CSS caso ele ainda não esteja aberto. 
As regras aplicadas à tag div aparecem no painel. 


3. Faça as edições conforme necessário. 


Posicionamento do ponto de inserção em uma tag div para adicionar conteúdo 
*& Clique em qualquer lugar nas bordas da tag. 


Alteração do texto do alocador de espaço em uma tag div 
*& Selecione o texto e digite sobre ele ou pressione Delete. 
Nota: Você pode adicionar conteúdo à tag div exatamente como faria ao adicionar um conteúdo a uma página. 


Alterar a cor de realce das tags div 
Quando você move o ponteiro sobre a borda de uma tag div na Visualização de design, o Dreamweaver realça as bordas da tag. Você pode 
ativar ou desativar o realce quando necessário, ou alterar a cor do realce na caixa de diálogo Preferências. 

1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 

2. Selecione Realce na lista de categorias à esquerda. 

3. Faça uma das seguintes alterações e clique em OK: 


e Para alterar a cor de realce das tags div, clique na caixa de cor Passar o mouse, selecione a cor de realce usando o seletor de cores 
(ou digite o valor hexadecimal da cor de realce na caixa de texto). 


e Para ativar ou desativar o realce das tags div, marque ou desmarque a caixa de seleção Mostrar de Passar o mouse. 


Nota: Essas opções afetam todos os objetos (por exemplo, as tabelas), que o Dreamweaver realça quando você move o ponteiro 
sobre elas. 


Para o início 


Blocos de layout CSS 


Visualização dos blocos de layout CSS 

Você pode visualizar blocos de layout CSS enquanto trabalha na Visualização de design. Um bloco de layout CSS é um elemento de página 
HTML que você pode posicionar em qualquer lugar da página. Mais especificamente, um bloco de layout CSS é uma tag div sem display:inline ou 
qualquer outro elemento de página que inclui as declarações CSS display:block, position:absolute ou position:relative. Veja a seguir alguns 
exemplos de elementos considerados blocos de layout CSS no Dreamweaver: 


e Uma tag div 

* Uma imagem com uma posição absoluta ou relativa atribuída a ela 
e Uma tag a com o estilo display:block atribuído a ela 

* Um parágrafo com uma posição absoluta ou relativa atribuída a ele 


Nota: Para fins de processamento visual, os blocos de layout CSS não incluem elementos inline (ou seja, elementos cujo código esteja em uma 
linha de texto) ou elementos de bloco simples como parágrafos. 

O Dreamweaver fornece diversos auxílios visuais para visualização de blocos de layout CSS. Por exemplo, você pode ativar contornos, fundos e 
o modelo de caixa dos blocos de layout CSS ao criar o design. Também é possível visualizar dicas de ferramentas que exibem as propriedades 
de um bloco de layout CSS quando você flutua o ponteiro do mouse sobre o bloco de layout. 


A lista de auxílios de bloco de layout CSS a seguir descreve o que o Dreamweaver processa como visível para cada: 


Contornos do layout CSS Exibe os contornos de todos os blocos de layout CSS na página. 

Fundos do layout CSS Exibe as cores de fundo temporariamente atribuídas de blocos de layout CSS individuais e oculta qualquer cor ou 
imagem de fundo que normalmente aparece na página. 

Sempre que você ativar o auxílio visual para visualizar fundos de bloco de layout CSS, o Dreamweaver atribui automaticamente a cada bloco de 
layout CSS uma cor de fundo distinta. (O Dreamweaver seleciona as cores usando um processo algorítmico; não há nenhuma maneira de você 
mesmo atribuir as cores.) As cores atribuídas são visualmente distintas e foram projetadas para ajudar você a fazer a distinção entre os blocos de 
layout CSS. 


Modelo de caixa de layout CSS Exibe o modelo de caixa (ou seja, preenchimento e margens) do bloco de layout CSS selecionado. 
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Visualização dos blocos de layout CSS 
Você pode ativar ou desativar os auxílios visuais do bloco de layout CSS quando necessário. 


Visualização dos contornos de bloco de layout CSS 
*& Selecione Exibir > Auxílios visuais > Contornos do layout CSS. 


Visualização dos fundos de bloco de layout CSS 
* Selecione Exibir > Auxílios visuais > Fundos do layout CSS. 


Visualização dos modelos de caixa de bloco de layout CSS 
* Selecione Exibir > Auxílios visuais > Modelo de caixa de layout CSS. 


Você também pode acessar as opções de auxílio visual de bloco de layout CSS clicando no botão Auxílios visuais na barra de ferramentas 
Documento. 


Uso dos auxílios visuais com elementos de bloco de layout Não CSS 

Você pode usar uma folha de estilos em tempo de design para exibir os fundos, as bordas ou a caixa de modelo dos elementos que normalmente 
não são considerados blocos de layout CSS. Para fazer isso, primeiro você deve criar uma folha de estilos em tempo de design que designe o 
atributo display:block ao elemento de página apropriado. 


1. Crie uma folha de estilos CSS externa selecionando Arquivo > Novo, selecionando a página Básico na coluna Categoria, selecionando CSS 
na coluna de página Básico e clicando em Criar. 

2. Na nova folha de estilos, crie regras que designem o atributo display:block aos elementos de página a ser exibido como blocos de layout 
css. 


Por exemplo, se você quisesse exibir uma cor de fundo para parágrafos e itens de lista, poderia criar uma folha de estilos com as seguintes 
regras: 


pt 
display:block; 
3 

Et 
display:block; 
» 


Salve o arquivo. 
Na Visualização de design, abra a página à qual você deseja anexar os novos estilos. 
Selecione Formatar > Estilos CSS > Em tempo de design. 


Sa Bo 


Na caixa de diálogo Folhas de estilo em tempo de design, clique no botão de adição (+) acima da caixa de texto Mostrar somente em 
tempo de design, selecione a folha de estilos recém-criada e clique em OK. 


7. Clique em OK para fechar a caixa de diálogo Folhas de estilo em tempo de design. 


A folha de estilos é anexada ao documento. Se você criou uma folha de estilos usando o exemplo anterior, todos os parágrafos e itens de 
lista serão formatados com o atributo display:block, permitindo que você ative ou desative os auxílios visuais de bloco de layout CSS para 
parágrafos e itens de lista. 


SEER 
Trabalho com elementos PA iai di 


Sobre os elementos PA do Dreamweaver 


Um elemento PA (elemento com posição absoluta) é um elemento de página HTML, especificamente uma tag div ou qualquer outra tag, que tem 
uma posição absoluta. Os elementos PA podem conter texto, imagens ou qualquer outro conteúdo inserido no corpo de um documento HTML. 


Com o Dreamweaver, você pode usar elementos PA ao criar o layout da página. Você pode dispor os elementos PA um em frente ao outro ou um 
atrás do outro, ocultar alguns elementos PA e exibir outros, e mover os elementos PA pela tela. É possível inserir uma imagem de fundo em um 
elemento PA e inserir um segundo elemento PA contendo texto com fundo transparente em frente a ele. 


Geralmente, os elementos PA são tags div com posição absoluta. (Esses são os tipos de elementos PA que o Dreamweaver insere por padrão.) 
Mas lembre-se que você pode classificar qualquer elemento HTML (por exemplo, uma imagem) como um elemento PA atribuindo uma posição 
absoluta a ele. Todos os elementos PA (e não apenas as tags div com posição absoluta) aparecem no painel Elementos PA. 


Código HTML para elementos Div PA 

O Dreamweaver cria elementos PA usando a tag div. Quando você desenha um elemento PA usando a ferramenta Desenhar Div PA, o 
Dreamweaver insere uma tag div no documento e atribui a ela um valor de ID (por padrão, apDiv1 para a primeira div desenhada, apDiv2 para a 
segunda e assim sucessivamente). Posteriormente, você poderá renomear a Div PA para qualquer nome usando o painel Elementos PA ou o 
Inspetor de propriedades. O Dreamweaver também usa a CSS incorporada no cabeçalho do documento para posicionar a Div PA e atribuir a ela 
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suas dimensões exatas. 


Este é um exemplo de código HTML para uma Div PA: 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Sample AP Div Page</title> 
<style type="text/css'"> 
<= 
tapDivi ( 
position:absolute; 
left:62px; 
top:67px; 
width:421px; 
height :188px; 
z-index:1; 
; 
==> 
</style> 
</head> 
<body> 
<div id="apDiv1"> 
</div> 
</body> 
</html> 


Você pode alterar as propriedades das Divs PA (ou qualquer elemento PA) na página, incluindo as coordenadas x e y, o índice z (também 
chamado de ordem de empilhamento) e a visibilidade. 


Inserir uma div PA 

O Dreamweaver permite que você crie e posicione facilmente Divs PA na página. Também é possível criar Divs PA aninhadas. 

Quando você insere uma Div PA, o Dreamweaver exibe um contorno da Div PA na Visualização de design, por padrão, e realça o bloco quando 
você move o ponteiro sobre ela. Para desativar o auxílio visual que mostra os contornos da Div PA (ou de qualquer elemento PA), desative 
Contornos do elemento PA e Contornos do layout CSS no menu Exibir > Auxílios visuais. Você também pode ativar fundos e o modelo de caixa 
dos elementos PA como um auxílio visual enquanto cria a Div PA. 


Após criar uma Div PA, adicione o conteúdo a ela colocando o ponto de inserção na Div PA e adicionando o conteúdo como adicionaria um 
conteúdo a uma página. 


Desenho de uma única Div PA ou de várias Divs PA consecutivamente 
1. Na categoria Layout do painel Inserir, clique no botão Desenhar Div PA E. 
2. Na Visualização de design da janela Documento, siga um destes procedimentos: 


e Arraste para desenhar uma Div PA. 


e Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Command (Macintosh) enquanto arrasta para 
desenhar várias Divs PA consecutivamente. 


Você pode desenhar quantas Divs PA desejar, contanto que não solte a tecla Control ou Command. 


Inserção de uma Div PA em um determinado lugar do documento 

* Coloque o ponto de inserção na janela Documento e selecione Inserir > Objetos de layout > Div PA. 

Nota: Esse procedimento colocará a tag da Div PA no lugar da janela Documento que você clicou. Desse modo, o processamento visual da Div 
PA pode afetar outros elementos de página (como o texto) que a envolve. 


Posicionamento do ponto de inserção em uma Div PA 
* Clique em qualquer lugar das bordas da Div PA. 
As bordas da Div PA são realçadas e a alça de seleção aparece, mas a própria Div PA não é selecionada. 


Mostrar bordas da Div PA 
* Selecione Exibir > Auxílios visuais e selecione Contornos da Div PA ou Contornos do layout CSS. 
Nota: A seleção simultânea das duas opções surte o mesmo efeito 


Ocultar as bordas da Div PA 
* Selecione Exibir > Auxílios visuais e cancele a seleção de Contornos da Div PA ou Contornos do layout CSS. 
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Trabalhar com Divs PA aninhadas 


Uma Div PA aninhada é uma Div PA cuja código está contido nas tags de outra Div PA. Por exemplo, o código a seguir mostra duas Divs PA que 
não estão aninhadas e duas Divs PA aninhadas: 


<div id="apDiv1"></div> 
<div id="apDiv2"></div> 
<div id="apDiv3"> 

<div id="apDiv4"></div> 
</div> 


A representação gráfica de qualquer conjunto de Divs PA pode ter a seguinte aparência: 


(gy 


No primeiro conjunto de tags div, uma div está acima da outra na página.l No segundo conjunto, a div apDiv4 está, na verdade, dentro da div 
apDiv3. (Você pode alterar a ordem de empilhamento da Div PA no painel Elementos PA.) 


O aninhamento é geralmente usado para agrupar as Divs PA. Uma Div PA aninhada é movida com sua Div PA mãe e pode ser definida para 
herdar a visibilidade da tag-mãe. 


Você pode ativar a opção Aninhamento para fazer o aninhamento automático ao desenhar uma Div PA começando dentro de outra Div PA. Para 
desenhar dentro ou sobre outra Div PA, a opção Evitar sobreposições deve estar desmarcada. 


Desenho de uma Div PA aninhada 
1. Verifique se a opção Evitar sobreposições está desmarcada no painel Elementos PA (Janela > Elementos PA). 
2. Na categoria Layout do painel Inserir, clique no botão Desenhar Div PA E 


3. Na Visualização de design da janela Documento, arraste para desenhar uma Div PA dentro de uma Div PA existente. 


Se a opção Aninhamento estiver desativada nas preferências de elementos PA, mantenha pressionada a tecla Alt (Windows) ou mantenha 
pressionada a tecla Option (Macintosh) enquanto arrasta para aninhar uma Div PA dentro de uma Div PA existente. 


A aparência das Divs PA aninhadas podem variar de um navegador para outro. Ao criar Divs PA aninhadas, verifique frequentemente a 
aparência delas nos vários navegadores durante o processo de design. 


Inserção de uma Div PA aninhada 
1. Verifique se a opção Evitar sobreposições está desmarcada. 


2. Coloque o ponto de inserção dentro de uma Div PA existente na Visualização de design da janela Documento e selecione Inserir > Objetos 
de layout > Div PA. 


Aninhamento automático de Divs PA quando você desenha uma Div PA dentro de outra 
*& Selecione a opção Aninhamento nas Preferências de elementos PA. 


Visualização ou definição das preferências de elemento PA 
Use a categoria Elementos PA na caixa de diálogo Preferências para especificar as configurações padrão dos novos elementos PA criados. 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Selecione Elementos PA na lista Categoria à esquerda, especifique uma das preferências a seguir e clique em OK. 
Visibilidade Determina se os elementos PA ficarão visíveis por padrão. As opções são default, inherit, visible e hidden. 


Largura e Altura Especifique uma largura e altura padrão (em pixels) para os elementos PA que você cria usando Inserir > Objetos de 
layout > Div PA. 


Cor de fundo Especifica uma cor de fundo padrão. Selecione uma cor no seletor de cores. 
Imagem de fundo Especifica uma imagem de fundo padrão. Clique em Procurar para localizar o arquivo de imagem no computador. 


Aninhamento: Aninhar quando criado em uma div PA Especifica se uma Div PA começando em um ponto dentro dos limites de uma 
Div PA existente deve ser uma Div PA aninhada. Mantenha pressionada a tecla Alt (Windows) ou a tecla Option (Macintosh) para alterar 
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temporariamente esta configuração enquanto desenha uma Div PA. 


Visualização ou definição das propriedades de um elemento PA 
Quando você seleciona um elemento PA, o Inspetor de propriedades exibe as propriedades desse elemento. 
1. Selecione um elemento PA. 


2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expansão no canto inferior direito, caso ela ainda não esteja 
expandida, para ver todas as propriedades. 


PROPRIEDADES 
Elemento Css-P E 12px| L [313px| ÍndiceZ Pepe (5 Gasse Nenhum(a) + O 
deDivi + T A trpx| Vis Cor de fundo [ (| & 
Estouro w| Corte; E D 
T B a 


3. Defina uma das seguintes opções: 
Elemento CSS-P Especifica uma ID para o elemento PA selecionado. A ID identifica o elemento PA no painel Elementos PA e no código 
JavaScript. 
Use apenas caracteres alfanuméricos padrão; não use caracteres especiais como espaços, hífens, barras ou pontos. Cada elemento PA 
deve ter sua própria ID exclusiva. 
Nota: O Inspetor de propriedades de CSS-P apresenta as mesmas opções para elementos com posição relativa. 


E eT (esquerda e topo) Especifica a posição do canto superior esquerdo do elemento PA em relação ao canto superior esquerdo da 
página, ou do elemento PA pai caso ele esteja aninhado. 


Lea Define a largura e altura do elemento PA. 

Nota: Se o conteúdo do elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA (conforme aparece na 
Visualização de design do Dreamweaver) será alongada para acomodar o conteúdo. (A borda inferior não é alongada quando o elemento 
PA aparece em um navegador, a menos que a propriedade Estouro esteja definida como Visible.) 


A unidade padrão de posição e tamanho é pixels (px). Você também pode especificar as seguintes unidades: pc (paicas), pt (pontos), in 
(polegadas), mm (milímetros), cm (centímetros) ou % (porcentagem do valor correspondente do elemento PA pai). As abreviações devem 
seguir o valor, sem espaços: por exemplo, 3mm indica 3 milímetros. 


Z-Index Determina o índice z ou a ordem de empilhamento do elemento PA. 


Em um navegador, os elementos PA numerados superiores aparecem em frente aos elementos PA numerados inferiores. Os valores 
podem ser positivos ou negativos. É mais fácil alterar a ordem de empilhamento dos elementos PA usando o painel Elementos PA do que 
digitar valores de índice z específicos. 


Vis Especifica se o elemento PA estará inicialmente visível ou não. Selecione uma das seguintes opções: 


e Default não especifica uma propriedade de visibilidade. Quando nenhuma visibilidade é especificada, a maioria dos navegadores 
assume Inherit como valor padrão. 


e Inherit usa a propriedade de visibilidade do pai do elemento PA. 
* Visible exibe o conteúdo do elemento PA, independentemente do valor do pai. 
e Hidden oculta o conteúdo do elemento PA, independentemente do valor do pai. 


Use uma linguagem de script, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o conteúdo do 
elemento PA. 


Imagem de fundo Especifica uma imagem de fundo para o elemento PA. 
Clique no ícone de pasta desejado e selecione um arquivo de imagem. 
Cor de fundo Especifica uma cor de fundo para o elemento PA. 

Deixe esta opção em branco para especificar um fundo transparente. 
Classe Especifica a classe CSS usada para criar o estilo do elemento PA. 


Estouro Determina como os elementos PA aparecem em um navegador quando o conteúdo ultrapassa o tamanho especificado do 
elemento PA. 


Visible indica que o conteúdo extra aparecerá no elemento PA; efetivamente, o elemento PA é alongado para acomodá-lo. Hidden 
especifica que o conteúdo extra não será exibido no navegador. Scroll especifica que o navegador deve adicionar barras de rolagem ao 
elemento quer elas sejam necessárias ou não. Auto faz com que o navegador exiba barras de rolagem para o elemento PA somente 
quando necessário (ou seja, quando o conteúdo do elemento PA ultrapassar seus limites.) 


Nota: A opção estouro tem suporte instável entre os navegadores. 
Corte Define a área visível de um elemento PA. 


Especifica as coordenadas esquerda, superior, direita e inferior para definir um retângulo no espaço de coordenada do elemento PA 
(contando a partir do canto superior esquerdo do elemento PA). O elemento PA é “recortado” para que apenas o retângulo especificado 
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fique visível. Por exemplo, para tornar o conteúdo de um elemento PA invisível, a não ser por um retângulo visível de 50 pixels de largura e 
75 pixels de altura no canto superior esquerdo do elemento PA, defina E para O, T para 0, D para 50 e B para 75. 


Nota: Embora a CSS especifique uma semântica diferente para clip, o Dreamweaver interpreta clip como a maioria dos navegadores. 


4. Se você tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor. 


Visualização ou definição das propriedades de vários elementos PA 
Quando você seleciona dois ou mais elementos PA, o Inspetor de propriedades exibe as propriedades de texto e um subconjunto das 
propriedades do elemento PA completo, permitindo que você modifique vários elementos PA de uma só vez. 


Seleção de vários elementos PA 
“& Mantenha pressionada a tecla Shift enquanto seleciona elementos PA. 


Visualização e definição das propriedades de vários elementos PA 
1. Selecione vários elementos PA. 


2. No Inspetor de propriedades (Janela > Propriedades), clique na seta de expansão no canto inferior direito, caso ela ainda não esteja 
expandida, para ver todas as propriedades. 


PROPRIEDADES 


Cérm] Formato | Nenhum(a) v| Class Nenhum(a) . BIZ EE tt Titulo É 
css ID Nenhuma) Link “GO Destino & 
Diversos E L vis Imagem de fundo [fm] 
ElementosC5S-P 
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3. Defina uma das propriedades a seguir de vários elementos PA: 
EeT (esquerda e topo) Especifica a posição dos cantos superiores esquerdos do elemento PA em relação ao canto superior esquerdo da 
página, ou do elemento PA pai caso ele esteja aninhado. 


Lea Define a largura e altura dos elementos PA. 

Nota: Se o conteúdo de qualquer elemento PA ultrapassar o tamanho especificado, a borda inferior do elemento PA (conforme aparece na 
Visualização de design do Dreamweaver) será alongada para acomodar o conteúdo. (A borda inferior não é alongada quando o elemento 
PA aparece em um navegador, a menos que a propriedade Estouro esteja definida como Visible.) 


A unidade padrão de posição e tamanho é pixels (px). Você também pode especificar as seguintes unidades: pc (paicas), pt (pontos), in 
(polegadas), mm (milímetros), cm (centímetros) ou % (porcentagem do valor correspondente do elemento PA pai). As abreviações devem 
seguir o valor, sem espaços: por exemplo, 3mm indica 3 milímetros. 


Vis Especifica se os elementos PA estarão inicialmente visíveis ou não. Selecione uma das seguintes opções: 


* Default não especifica uma propriedade de visibilidade. Quando nenhuma visibilidade é especificada, a maioria dos navegadores 
assume Inherit como valor padrão. 


e Inherit usa a propriedade de visibilidade do pai dos elementos PA. 
e Visible exibe o conteúdo dos elementos PA, independentemente do valor do pai. 
e Hidden oculta o conteúdo do elemento PA, independentemente do valor do pai. 


Use uma linguagem de script, como JavaScript, para controlar a propriedade de visibilidade e exibir dinamicamente o conteúdo do 
elemento PA. 


Tag Especifica a tag HTML usada para definir os elementos PA. 

Imagem de fundo Especifica uma imagem de fundo para os elementos PA. 

Clique no ícone de pasta desejado e selecione um arquivo de imagem. 

Cor de fundo Especifica uma cor de fundo para os elementos PA. Deixe esta opção em branco para especificar um fundo transparente. 


4. Se você tiver digitado um valor em uma caixa de texto, pressione Tab ou Enter (Windows) ou Return (Macintosh) para aplicar o valor. 


Visão geral do painel Elementos PA 
Use o painel Elementos PA (Janela > Elementos PA) para gerenciar os elementos PA no documento. Use o painel Elementos PA para evitar 
sobreposições, alterar a visibilidade dos elementos PA, aninhar ou empilhar elementos PA e selecionar um ou mais elementos PA. 


Nota: Um elemento PA do Dreamweaver é um elemento de página HTML, especificamente uma tag div ou qualquer outra tag, que tem uma 
posição absoluta. O painel Elementos PA não exibe elementos com posição relativa. 

Os elementos PA são exibidos como uma lista de nomes, na ordem do índice z; por padrão, o primeiro elemento PA criado (com um índice z 1) 
aparece na parte inferior da lista, enquanto o elemento PA criado por último aparece na parte superior. No entanto, você pode alterar o índice z 
de um elemento PA alterando seu lugar na ordem de empilhamento. Por exemplo, se você criou oito elementos PA e deseja mover o quarto 
elemento para o topo da lista, atribua a ele um índice z superior aos outros. 


248 


Seleção de elementos PA 
Você pode selecionar um ou mais elementos PA para manipulá-los ou alterar suas propriedades. 


Seleção de um elemento PA no painel Elementos PA 
*& No painel Elementos PA (Janela > Elementos PA), clique no nome do elemento PA. 


Seleção de um elemento PA na janela Documento 
“ Siga um destes procedimentos: 
e Clique na alça de seleção de um elemento PA. 
Se a alça de seleção não estiver visível, clique em qualquer lugar dentro do elemento PA para torná-la visível. 
e Clique na borda de um elemento PA. 


e Mantenha pressionadas as teclas Control e Shift (Windows) ou mantenha pressionadas as teclas Command e Shift (Macintosh) enquanto 
clica dentro de um elemento PA. 


e Clique dentro de um elemento PA e pressione Control+A (Windows) ou Command+A (Macintosh) para selecionar o conteúdo do elemento 
PA. Pressione Control+A ou Command+A novamente para selecionar o elemento PA. 


e Clique dentro de um elemento PA e selecione sua tag no seletor de tags. 


Seleção de vários elementos PA 
* Siga um destes procedimentos: 


e No painel Elementos PA (Janela > Elementos PA), mantenha pressionada a tecla Shift enquanto clica em dois ou mais nomes de elemento 
PA. 


* Najanela Documento, mantenha pressionada a tecla Shift enquanto clica dentro ou na borda de dois ou mais elementos PA. 


Alteração da ordem de empilhamento dos elementos PA 
Use o Inspetor de propriedades ou o painel Elementos PA para alterar a ordem de empilhamento dos elementos PA. O elemento PA no topo da 
lista do painel Elementos PA está na parte superior da ordem de empilhamento e aparece na frente dos outros elementos PA. 


No código HTML, a ordem de empilhamento, ou o índice z, dos elementos PA determina a ordem em que eles são desenhados em um 
navegador. Quanto maior o índice z de um elemento PA, mais alto estará o elemento PA na ordem de empilhamento. (Por exemplo, um elemento 
com índice z de 4 aparecerá acima de um elemento com índice z de 3; 1 é sempre o número mais baixo na ordem de empilhamento.) Você pode 
alterar o índice z de cada elemento PA usando o painel Elementos PA ou o Inspetor de propriedades. 


Alteração da ordem de empilhamento dos elementos PA usando o painel Elementos PA 
1. Selecione Janela > Elementos PA para abrir o painel Elementos PA. 
2. Clique duas vezes no número de índice z ao lado do elemento PA cujo índice z você deseja alterar. 
3. Altere o número e pressione Return/Enter. 


e Digite um número maior para mover o elemento PA para a parte superior na ordem de empilhamento. 


e Digite um número menor para mover o elemento PA para a parte inferior na ordem de empilhamento. 


Alteração da ordem de empilhamento dos elementos PA usando o Inspetor de propriedades 
1. Selecione Janela > Elementos PA para abrir o painel Elementos PA e verificar a ordem de empilhamento atual. 
2. No painel de Elementos PA ou na Janela Documento, selecione o elemento PA cujo índice z você deseja alterar. 
3. No Inspetor de propriedades (Janela > Propriedades), digite um número na caixa de texto Índice Z. 


e Digite um número maior para mover o elemento PA para a parte superior na ordem de empilhamento. 


e Digite um número menor para mover o elemento PA para a parte inferior na ordem de empilhamento. 


Mostrar e ocultar elementos PA 
Enquanto trabalha no documento, você pode mostrar e ocultar manualmente os elementos PA, usando o painel Elementos PA, para ver como a 
página aparecerá em diferentes condições. 


Nota: O elemento PA atualmente selecionado sempre fica visível e aparece na frente de outros elementos PA enquanto está selecionado. 
Alteração da visibilidade do elemento PA 


1. Selecione Janela > Elementos PA para abrir o painel Elementos PA. 
2. Clique na coluna de ícone de olho de um elemento PA para alterar sua visibilidade. 


* Um olho aberto significa que o elemento PA está visível. 
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* Um olho fechado significa que o elemento PA não está visível. 


e Se não houver um ícone de olho, geralmente o elemento PA herda a visibilidade do seu pai. (Quando os elementos PA não estão 
aninhados, o pai é o corpo do documento, que está sempre visível.) 


Além disso, o ícone de olho não aparece quando não há visibilidade especificada (que aparece no Inspetor de propriedades como 
visibilidade padrão). 


Alteração da visibilidade de todos os elementos PA simultaneamente 
* No painel Elementos PA (Janela > Elementos PA), clique no ícone de olho do cabeçalho no topo da coluna. 
Nota: Esse procedimento pode definir todos os elementos PA para visible ou hidden, mas não para inherit. 


Redimensionamento de elementos PA 
Você pode redimensionar um elemento PA de cada vez ou redimensionar vários elementos PA simultaneamente para que tenham a mesma 
largura e altura. 


Se a opção Evitar sobreposições estiver ativada, você não poderá redimensionar um elemento PA para que ele seja sobreposto por outro. 


Redimensionamento de um elemento PA 
1. Na Visualização de design, selecione um elemento PA. 


2. Siga um destes procedimentos para redimensionar um elemento PA: 
e Para redimensionar arrastando, arraste as alças de redimensionamento de qualquer elemento PA. 


e Para redimensionar um pixel por vez, mantenha pressionada a tecla Control (Windows) ou Option (Macintosh) enquanto pressiona uma 
tecla de seta. 


As teclas de seta movem as bordas direita e inferior do elemento PA. Não é possível fazer o redimensionamento usando as bordas 
superior e esquerda com essa técnica. 


e Para redimensionar pelo incremento de encaixe de grade, mantenha pressionadas as teclas Shift e Control (Windows) ou mantenha 
pressionadas as teclas Shift e Option (Macintosh) enquanto pressiona uma tecla de seta. 


* No Inspetor de propriedades (Janela > Propriedades), digite valores para largura (L) e altura (A). 


O redimensionamento de um elemento PA altera sua largura e altura. Ele não define quanto do conteúdo do elemento PA estará visível. 
Você pode definir a região visível de um elemento PA nas preferências. 


Redimensionamento de vários elementos PA simultaneamente 
1. Na Visualização de design, selecione dois ou mais elementos PA. 


2. Siga um destes procedimentos: 
e Selecione Modificar > Organizar > Tornar larguras iguais ou Modificar > Organizar > Tornar alturas iguais. 
Os primeiros elementos PA selecionados terão a mesma largura ou altura do último elemento PA selecionado. 
e No Inspetor de propriedades (Janela > Propriedades), em Vários elementos CSS-P, digite os valores de largura e altura. 


Os valores são aplicados a todos os elementos PA selecionados. 


Movimentação de elementos PA 
Você pode mover os elementos PA na Visualização de design quase da mesma maneira que move os objetos na maioria dos aplicativos gráficos 
básicos. 


Se a opção Evitar sobreposições estiver ativada, você não poderá mover um elemento PA para que ele sobreponha outro. 


1. Na Visualização de design, selecione um ou vários elementos PA. 


2. Siga um destes procedimentos: 
* Para mover arrastando, arraste a alça de seleção do último elemento PA selecionado (realçado em preto), 
e Para mover um pixel por vez, use as teclas de seta. 


Mantenha pressionada a tecla Shift enquanto pressiona uma tecla de seta para mover o elemento PA pelo incremento atual de encaixe 
de grade. 


Alinhamento de elementos PA 
Use os comandos de alinhamento de elemento PA para alinhar um ou mais elementos PA a uma borda do último elemento PA selecionado. 


Quando você alinha elementos PA, os elementos PA filho não selecionados podem se mover, pois seu elemento PA pai é selecionado e movido. 
Para impedir que isso aconteça, não use elementos PA aninhados. 


1. Na Visualização de design, selecione o elemento PA. 
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2. Selecione Modificar > Organizar e selecione uma opção de alinhamento. 


Por exemplo, se você selecionar Top, todos os elementos PA se moverão para que suas bordas superiores fiquem na mesma posição 
vertical da borda superior do último elemento PA selecionado (realçado em preto). 


Conversão de elementos PA em tabelas 

Em vez de usar tabelas para criar seu layout, alguns designers da Web preferem trabalhar com elementos PA. O Dreamweaver permite que você 
crie um layout usando elementos PA e (se desejar) os converta em tabelas. Por exemplo, talvez você precise converter os elementos PA em 
tabelas caso seja necessário oferecer suporte a navegadores anteriores à versão 4.0. No entanto, a conversão de elementos PA em tabelas não 
é recomendável porque pode resultar em tabelas com um número maior de células vazias, sem mencionar a inchação do código (bloated). Se 
você precisar de um layout de página que use tabelas, é recomendável criá-lo usando as ferramentas padrão de layout de tabela disponíveis no 
Dreamweaver. 


É possível converter e reconverter tabelas e elementos PA para ajustar o layout e otimizar o design da página. (No entanto, quando você 
converte novamente uma tabela em elementos PA, o Dreamweaver converte a tabela novamente em Divs PA, independentemente do tipo de 
elemento PA que você possa ter na página antes da conversão em tabelas.) Não é possível converter uma tabela ou elemento PA em uma 
página. Você deve converter elementos PA em tabelas, e tabelas em Divs PA. 


Nota: Você não pode converter elementos PA em tabelas ou tabelas em Divs PA em um documento modelo ou em um documento ao qual um 
modelo tenha sido aplicado. Em vez disso, crie o layout em um documento não modelo e converta-o antes de salvá-lo como modelo. 


Conversão entre elementos PA e tabelas 
Você pode criar o layout usando elementos PA e convertê-los em tabelas para que o layout possa ser visualizado nos navegadores mais antigos. 


Antes de converter em tabelas, verifique se os elementos PA não se sobrepõem. Além disso, certifique-se de estar no modo Padrão (Exibir > 
Modo Tabela > Modo padrão). 


Conversão de elementos PA em uma tabela 
1. Selecione Modificar > Converter > Divs PA em tabela. 
2. Selecione uma das opções a seguir e clique em OK: 
Mais preciso Cria uma célula para cada elemento PA, além das células adicionais necessárias para preservar o espaço entre os 
elementos PA. 


Menor: reduzir células vazias Especifica que as bordas dos elementos PA devem ser alinhadas caso estejam posicionadas no número 
especificado de pixels. 


Se você selecionar esta opção, a tabela resultante terá menos linhas e coluna vazias, mas poderá não corresponder precisamente ao 
layout. 


Usar GIFs transparentes Preenche a última linha da tabela com GlIFs transparentes. Isso garante que a tabela será exibida com as 
mesmas larguras de coluna em todos os navegadores. 


Quando esta opção for ativada, você não poderá editar a tabela resultante arrastando suas colunas. Quando esta opção for desativada, a 
tabela resultante não conterá GIFs transparentes, mas as larguras das colunas poderão variar de um navegador para outro. 


Centralizar na página Centraliza a tabela resultante na página. Se esta opção for desativada, a tabela iniciará na borda esquerda da 
página. 


Conversão de tabelas em Divs PA 
1. Selecione Modificar > Converter > Tabelas em Divs PA. 


2. Selecione uma das opções a seguir e clique em OK: 
Impedir sobreposição de elemento AP Restringe as posições dos elementos PA quando eles forem criados, movidos e redimensionados, 
a fim de que não se sobreponham. 


Mostrar painel de elementos PA Exibe o painel de elementos PA. 
Mostrar grade e Encaixar na grade Permite o uso de uma grade para ajudar a posicionar elementos PA. 
As tabelas são convertidas em Divs PA. As células vazias não são convertidas em elementos PA, a menos que tenham cores de fundo. 


Nota: Os elementos de página que estavam fora das tabelas também são colocados em Divs PA. 


Impedir sobreposição de elemento PA 

Como as células de tabela não podem se sobrepor, o Dreamweaver não pode criar uma tabela a partir de elementos PA sobrepostos. Se você 
pretende converter os elementos PA de um documento em tabelas, use a opção Evitar sobreposições para restringir a movimentação e o 
posicionamento do elemento PA, a fim de que eles não se sobreponham. 


Quando esta opção estiver ativada, um elemento PA não poderá ser criado em frente a, movido ou redimensionado sobre ou aninhado dentro de 
um elemento PA existente. Se você ativar esta opção após criar elementos PA sobrepostos, arraste cada elemento PA sobreposto para afastá-lo 
de outros elementos PA. O Dreamweaver não corrige automaticamente elementos PA sobrepostos existentes na página quando você ativa 
Impedir sobreposição de elemento AP. 
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Quando esta opção e encaixe forem ativados, um elemento PA não se encaixará na grade caso dois elementos PA se sobreponham. Em vez 
disso, ele se encaixará na borda do elemento PA mais próximo. 


Nota: Determinadas ações permitem a sobreposição de elementos PA até mesmo quando a opção Evitar sobreposições está ativada. Se você 
inserir um elemento PA usando o menu Inserir, digitar números no Inspetor de propriedades ou reposicionar elementos PA editando o código- 
fonte HTML, possivelmente os elementos PA serão sobrepostos ou aninhados enquanto esta opção estiver ativada. Se ocorrerem sobreposições, 
arraste os elementos PA sobrepostos na Visualização de design para separá-los. 

e No painel Elementos PA (Janela > Elementos PA), selecione a opção Evitar sobreposições. 

* Najanela Documento, selecione Modificar > Organizar > Impedir sobreposição de elemento AP. 
Mais tópicos da Ajuda 
Criar uma página com um layout CSS 
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Desativar/Ativar CSS 


O recurso Desativar/Ativar propriedade de CSS permite comentar partes do CSS do painel Estilos CSS, sem ter que fazer alterações diretamente 
no código. Quando você comenta partes do CSS, pode ver que tipos de efeitos as propriedades e os valores específicos têm na sua página. 


Quando você desativa uma propriedade do CSS, o Dreamweaver adiciona tags de comentários de CSS e um rótulo [desativado] à propriedade do 
CSS que você desativou. Você pode, em seguida, reativar ou excluir a propriedade do CSS desativada, de acordo com sua preferência. 


Para obter uma visão geral, em vídeo, da equipe de engenharia do Dreamweaver, sobre como trabalhar com Ativar/desativar CSS, consulte 
www.adobe.com/go/dwcsbcss br. 


1. No painel Propriedades do painel Estilos CSS (Janela > Estilos CSS), selecione a propriedade que deseja desativar. 


2. Clique no ícone Desativar/Ativar propriedade de CSS no canto direito inferior do painel Propriedades. O ícone também aparece se você 
mover o mouse para a esquerda da própria propriedade. 


Depois de clicar no ícone Desativar/Ativar propriedade de CSS, um Ícone Desativado aparecerá à esquerda da propriedade. Para reativar a 
propriedade, clique no ícone Desativado ou clique com o botão direito do mouse (Windows) ou Control-clique (SO Macintosh) na 
propriedade e selecione Ativar. 


3. (Opcional) Para ativar ou excluir todas as propriedades desativadas de uma regra selecionada, clique com o botão direito do mouse 
(Windows) ou Control-clique (SO Macintosh) em qualquer regra ou propriedade na qual as propriedades estejam desativadas e selecione 
Ativar todas as desativadas em Regra selecionada ou Excluir todas as desativadas em Regra selecionada. 
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Usar Folhas de estilo em tempo de design 


As folhas de estilos em tempo de design permitem mostrar ou ocultar o design aplicado por uma folha de estilos CSS enquanto você trabalha em 
um documento do Dreamweaver. Por exemplo, você pode usar esta opção para incluir ou excluir o efeito de uma folha de estilos apenas 
Macintosh ou apenas Windows enquanto você cria uma página. 


As folhas de estilos em tempo de design se aplicam somente enquanto você está trabalhando no documento; quando a página é exibida em uma 
janela de navegador, apenas os estilos que estão anexados ou incorporados ao documento aparecem no navegador. 


Nota: Você também pode ativar ou desativar os estilos de uma página inteira usando a barra de ferramentas Processamento do estilo. Para 
exibir a barra de ferramentas, selecione Exibir > Barras de ferramentas > Processamento do estilo. O botão Alternar exibição de estilos CSS (o 
botão da extrema direita) funciona independentemente dos outros botões de mídia da barra de ferramentas. 


Para usar uma folha de estilos em tempo de design, siga estas etapas. 
1. Abra a caixa de diálogo Folhas de estilo em tempo de design seguindo um destes procedimentos: 
e Clique com o botão direito do mouse no painel Estilos CSS e, no menu de contexto, selecione Em tempo de design. 
e Selecione Formatar > Estilos CSS > Em tempo de design. 
2. Na caixa de diálogo, defina as opções para mostrar ou ocultar uma folha de estilos selecionada: 


e Para exibir uma folha de estilos CSS em tempo de design, clique no botão de adição (+) acima de Mostrar somente em tempo de 
design e, na caixa de diálogo Selecionar folha de estilos, procure a folha de estilos CSS que você deseja mostrar. 


* Para ocultar uma folha de estilos CSS, clique no botão de adição (+) acima de Ocultar em tempo de design e, na caixa de diálogo 
Selecionar folha de estilos, procure a folha de estilos CSS que você deseja ocultar. 


e Para remover uma folha de estilos na lista, clique na folha de estilos a ser removida e clique no botão de subtração (—) apropriado. 
3. Clique em OK para fechar a caixa de diálogo. 


O painel Estilos CSS é atualizado com o nome da folha de estilos selecionada, juntamente com o indicador “oculto” ou “design”, para refletir 
o status da folha de estilos. 


Mais tópicos da Ajuda 
Visão geral da barra de ferramentas Processamento do estilo 
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O painel Estilos CSS 


Painel Estilos CSS no modo Atual 

Painel Estilos CSS no modo Tudo 

Botões e visualizações do painel Estilos CSS 
Abertura do painel Estilos CSS 


O painel Estilos CSS permite que você rastreie as propriedades e regras CSS afetando um elemento de página atualmente selecionado (modo 
Atual) ou todas as propriedades e regras disponibilizadas para o documento (modo Tudo). Um botão de alternância na parte superior do painel 
permite que você alterne entre os dois modos. O painel Estilos CSS também permite modificar propriedades CSS no modo Tudo e no modo Atual. 


: : P iníci 
Painel Estilos CSS no modo Atual id 
No modo Atual, o painel Estilos CSS exibe três painéis: o painel Resumo para seleção que exibe as propriedades CSS da seleção atual no 
documento, o painel Regras que exibe o local das propriedades selecionadas (ou uma cascata de regras da tag selecionada, dependendo da sua 
seleção) e o painel Propriedades que permite editar as propriedades CSS da regra aplicada à seleção. 


ESTILOS CSS 


| todo [RE] 


Resumo para seleção 

Font-Family “Trebuchet MS" 

Font-size 12px 

color 330000 

line-height 18px 

padding 3px 22px 

margin Opx 

list-style-type none 

text-align center 

Sobre o “text-align” e) ie 


text-align está definido na regra 
“menu” em xml. menu.css, 


Propriedades de "menu" 

color EE 4330000 
Font-Family “Trebuchet MS" 
font-size 12px 
line-height 18px 
list-style-type none 

margin Dpx 


padding 3px 22px 


text-align | center 


Adicionar proprie,.. 


= A] sB25 


Você pode redimensionar qualquer um desses painéis arrastando as bordas entre os painéis ou pode redimensionar as colunas arrastando os 
divisores. 


O painel Resumo para seleção exibe um resumo das propriedades CSS e seus respectivos valores referentes ao item atualmente selecionado no 
documento ativo. O resumo mostra as propriedades de todas as regras que se aplicam diretamente à seleção. Somente as propriedades definidas 
são mostradas. 


Por exemplo, as regras a seguir criam um estilo de classe um e um estilo de tag (neste caso, de parágrafo): 


.foof 

color: green; 
font-family: 'Arial'; 
» 

pt 

font-family: 'serif'; 
font-size: 12px; 


) 


Quando você seleciona um texto de parágrafo com o estilo de classe .foo na janela Documento, o painel Resumo para seleção exibe as 
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propriedades das duas regras, pois ambas se aplicam à seleção. Nesse caso, o painel Resumo para seleção listará as seguintes propriedades: 


font-size: 12px 
font-family: 'Arial' 
color: green 


O painel Resumo para seleção organiza as propriedades em ordem crescente de especificidade. No exemplo acima, o estilo de tag define o 
tamanho de fonte, e o estilo de classe define a família de fontes e a cor. (A família de fontes definida pelo estilo de classe substitui a família de 
fontes definida pelo estilo de tag porque os seletores de classe têm uma especificidade maior do que os seletores de tag. Para obter mais 
informações sobre a especificidade CSS, consulte www.w3.org/TR/CSS2/cascade.html.) 


O painel Regras exibe duas visualizações diferentes — visualização Sobre ou visualização Regras — dependendo da seleção. Na visualização 
Sobre (a visualização padrão), o painel exibe o nome da regra que define a propriedade CSS selecionada e o nome do arquivo que contém a 
regra. Na visualização Regras, o painel exibe uma cascata ou hierarquia de todas as regras que se aplicam direta ou indiretamente à seleção 
atual. (A tag à qual a regra se aplica diretamente aparece na coluna da direita.) Você pode alternar entre duas visualizações clicando nos botões 
Mostrar informações ou Mostrar cascata no canto superior direito do painel Regras. 


Quando você seleciona uma propriedade no painel Resumo para seleção, todas as propriedades da regra de definição aparece no painel 
Propriedades. (A regra de definição também estará selecionada no painel Regras, caso a visualização Regras esteja selecionada.) Por exemplo, 
se você tiver uma regra chamada .maintext que define uma família de fontes, um tamanho de fonte e a cor, a seleção de qualquer uma dessas 
propriedades no painel Resumo para seleção exibirá todas as propriedades definidas pela regra .maintext no painel Propriedades, bem como a 
regra .maintext selecionada no painel Regras. (Além disso, a seleção de qualquer regra no painel Regras exibirá as propriedades dessa regra no 
painel Propriedades.) Em seguida, você poderá usar o painel Propriedades para modificar rapidamente a CSS, quer ela esteja incorporada no 
documento atual ou vinculada através de uma folha de estilos anexada. Por padrão, o painel Propriedades mostra apenas as propriedades que já 
foram definidas e as organiza em ordem alfabética. 


Você pode optar por exibir o painel Propriedades em duas outras visualizações. A visualização de categoria exibe as propriedades agrupadas em 
categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte superior de cada categoria, exibidas em texto azul. A 
visualização de lista exibe uma lista alfabética de todas as propriedades disponíveis e, da mesma forma, ordena as propriedades definidas na 
parte superior, exibindo-as em texto azul. Para alternar entre as visualizações, clique no botão Mostrar visualização de categoria, Mostrar 
visualização de lista ou Mostrar somente propriedades definidas, localizadas no canto inferior esquerdo do painel Propriedades. 


Em todas as visualizações, as propriedades definidas são exibidas em azul. As propriedades irrelevantes para uma seleção são exibidas com 
uma linha tachada vermelha. Ao manter o cursor do mouse sobre uma regra irrelevante, você fará com que seja exibida uma mensagem 
explicando por que a propriedade é irrelevante. Geralmente, uma propriedade é irrelevante porque ela é sobreposta ou não é uma propriedade 
herdada. 


Qualquer alteração efetuada no painel Propriedades é aplicada imediatamente, permitindo que você a visualize enquanto trabalha. 
z a: P iníci 
Painel Estilos CSS no modo Tudo ara o início 


No modo Tudo, o painel Estilos CSS exibe dois painéis: o painel Todas as regras (na parte superior) e o painel Propriedades (na parte inferior). O 
painel Todas as regras exibe uma lista de regras definidas no documento atual, bem como as regras definidas nas folhas de estilo anexadas ao 
documento atual. O painel Propriedades permite editar propriedades CSS para todas as regras selecionadas no painel Todas as regras. 


ESTILOS CSS 


(Tudo | atua 


Todas as regras 


menu.css 
«navigation:link, «navigation: visited 
navigation:hover 


«main aslink, 
«main a:visited 
Witalicsbold 
«breaderumb 
«menu, header 
«menu, title 
«menu 


Propriedades de ".main" 


color E 4000000 

Font-Family Verdana, Arial, Helvetic, 
font-size 11px 

line-height 20px 

margin 3px 32px 6px 12px 
padding Dpx 

Adicionar proprie... 

= Azyf]) s25 


Você pode redimensionar o painel arrastando a borda entre os painéis e pode redimensionar as colunas Propriedades arrastando seus 
respectivos divisores. 
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Quando você seleciona uma regra no painel Todas as regras, todas as propriedades definidas nessa regra aparecem no painel Propriedades. Em 
seguida, use o painel Propriedades para modificar rapidamente a CSS, quer ela esteja incorporada no documento atual ou vinculada em uma 
folha de estilos anexada. Por padrão, o painel Propriedades mostra apenas as propriedades que já foram definidas e as organiza em ordem 
alfabética. 


Você pode optar por exibir as propriedades em duas outras visualizações. A visualização de categoria exibe as propriedades agrupadas em 
categorias, como Fonte, Fundo, Bloco, Borda etc. com as propriedades definidas na parte superior de cada categoria. A visualização de lista 
exibe uma lista alfabética de todas as propriedades disponíveis e, da mesma forma, ordena as propriedades definidas na parte superior. Para 
alternar entre as visualizações, clique no botão Mostrar visualização de categoria, Mostrar visualização de lista ou Mostrar somente propriedades 
definidas, localizadas no canto inferior esquerdo do painel Propriedades. Em todas as visualizações, a propriedades definidas são exibidas em 
azul. 


Qualquer alteração efetuada no painel Propriedades é aplicada imediatamente, permitindo que você a visualize enquanto trabalha. 


ra « « a E « P iníci 
Botões e visualizações do painel Estilos CSS rd 


Nos modos Tudo e Atual, o painel Estilos CSS contém três botões que permitem alterar a visualização no painel Propriedades (o painel inferior): 


A B c 
A. Visualização de categoria B. Visualização de lista C. Visualização de propriedades definidas 


Visualização de categoria Divide as propriedades CSS compatíveis com o Dreamweaver em oito categorias: fonte, fundo, bloco, borda, caixa, 
lista, posicionamento e extensões. As propriedades de cada categoria estão contidas em uma lista que você expande ou reduz clicando no botão 
de adição (+) ao lado do nome de categoria. As propriedades definidas aparecem (em azul) no topo da lista. 

Visualização de lista Exibe todas as propriedades CSS compatíveis com o Dreamweaver em ordem alfabética. As propriedades definidas 
aparecem (em azul) no topo da lista. 

Visualização de propriedades definidas Exibe apenas as propriedades definidas. A visualização de propriedades definidas é a visualização 
padrão. 

Nos modos Tudo e Atual, o painel Estilos CSS também contém os seguintes botões: 


A. Anexar folha de estilos B. Nova regra CSS C. Editar estilo D. Desativar/ativar propriedade CSS E. Excluir regra CSS 


Anexar folha de estilos Abre a caixa de diálogo Vincular a folha de estilos externa. Selecione uma folha de estilos externa para vincular ou 
importe-a para o documento atual. 
Nova regra CSS Abre uma caixa de diálogo na qual você pode selecionar o tipo de estilo que está criando; por exemplo, para criar um estilo de 
classe, redefinir uma tag HTML ou definir um seletor CSS. 
Editar estilo Abre uma caixa de diálogo na qual você pode editar os estilos no documento atual ou em uma folha de estilos externa. 
Excluir regra CSS Remove a regra ou propriedade selecionada do painel Estilos CSS e remove a formatação de qualquer elemento ao qual ela 
foi aplicada. (No entanto, este recurso não remove as propriedades de classe e ID referenciadas por esse estilo.) O botão Excluir regra CSS 
também pode desanexar (ou “desvincular” uma folha de estilos CSS anexada. 
Clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control (Macintosh) enquanto clica no painel Estilos CSS a 
fim de abrir o menu de contexto de opções para trabalhar com os comandos de folha de estilos CSS. 


Abertura do painel Estilos CSS Nie 
Use o painel Estilos CSS para visualizar, criar, editar e remover estilos CSS, bem como para anexar folhas de estilos externas aos documentos. 
* Siga um destes procedimentos: 

e Selecione Janela > Estilos CSS. 


e Pressione Shift+F11. 


e Clique no botão CSS no Inspetor de propriedades. 
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Layout das páginas com CSS 


Sobre o layout da página CSS 
Sobre a estrutura do layout de página CSS 
Criação de uma página com um layout de CSS 


Para o início 


Sobre o layout da página CSS 


Um layout de página CSS usa o formato de folhas de estilos em cascata, em vez dos quadros e tabelas HTML tradicionais, para organizar o 
conteúdo em uma página da Web. O bloco de criação básico do layout CSS é a tag div, uma tag HTML que, na maioria dos casos, atua como 
um contêiner de texto, imagens e outros elementos de página. Quando você cria um layout CSS, coloque tags div na página, adicione conteúdo a 
elas e posicione-as em vários lugares. Diferente das células de tabela, que são restritas a algum lugar dentro das linhas e colunas de uma tabela, 
as tags div podem aparecer em qualquer lugar de uma página da Web. É possível posicionar tags div de forma absoluta (especificando 
coordenadas x e y) ou relativa (especificando o seu local em relação ao seu local atual). Você também pode posicionar as tags div especificando 
flutuações, preenchimentos e margens, o método preferido pelos padrões da Web de hoje. 


A criação de layouts CSS do zero pode ser difícil porque há muitas formas de fazer isso. Você pode criar um layout CSS simples de duas 
colunas definindo flutuações, margens, preenchimentos e outras propriedades CSS em uma quantidade quase infinita de combinações. Além 
disso, o problema de processamento entre navegadores pode fazer com que determinados layouts CSS sejam exibidos corretamente em alguns 
navegadores e incorretamente em outros. O Dreamweaver facilita a construção de páginas com layouts de CSS fornecendo 16 layouts 
predefinidos que funcionam em diferenetes navegadores. 

O uso dos layouts de CSS predefinidos que acompanham o Dreamweaver é o modo mais fácil de criar uma página com um layout de CSS, mas 
você pode também criar layouts de CSS usando os elementos de posição absoluta do Dreamweaver (elementos AP). Um elemento AP no 
Dreamweaver é um elemento de página em HTML especificamente, uma tag div ou qualquer outra tag que tenha uma posição absoluta 
atribuída a ela. Entretanto, há limitação dos elementos AP do Dreamweaver, pois eles estão posicionados de modo absoluto e suas posições 
nunca se ajustam na página de acordo com o tamanho da janela do navegador. 


Se você é um usuário avançado, também pode inserir tags div manualmente e aplicar os estilos de posicionamento CSS a elas para criar 
layouts de página. 


Sobre a estrutura do layout de página CSS ido 


Antes de passar para esta seção, você deve estar familiarizado com os conceitos básicos da CSS. 


O bloco de criação básico do layout CSS é a tag div, uma tag HTML que, na maioria dos casos, atua como um contêiner de texto, imagens e 
outros elementos de página. O exemplo a seguir mostra uma página HTML que contém três tags div separadas: uma tag de “contêiner" grande e 
duas outras tags — uma tag de barra lateral e uma tag de conteúdo principal — dentro da tag de contêiner. 


Sidebar Content 
qem ipean dolor us amet. comectessrr adoquacim elit B 
Masc rumo arma paris, femienhoss vb csviestoo um cormusizodo postizõor, feias 


Main Content 


A Love ips dolor vis amet, comecteoer abapuscing elis Provsemt aliquam susto comvallis hacsss 
rar 
Phaseliza tristique purwe 9 augue condimentm adipíncing Aemean sagíris Emis leo pede. rhonem c 
venenos. mistaque x valpuiste at, oxdão. 


H2 level heading 


Lovem ipsum dolor nt amet, comoctetsor adepuncimg elit Prmescot abiquemi, justo comvaília hacsss 
uam, eras milha fermensesm dam. at pocos quam ame ac quem 


A. Div de contêiner B. Div de barra lateral C. Div de conteúdo principal 


Este é o código das três tags div do HTML: 


<!--container div tag--> 
<div id="container"> 
<!--sidebar div tag--> 
<div id="sidebar"> 
<h3>Sidebar Content</h3> 
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 
<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> 
</div> 
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<!--mainContent div tag--> 

<div id="mainContent"> 

<h1> Main Content </h1> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus 
rutrum.</p> 

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus 
venenatis, tristique in, vulputate at, odio.</p> 

<h2>H2 level heading </h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus 
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> 

</div> 
</div> 


No exemplo acima, não há nenhum “estilo” anexado a nenhuma das tags div. Sem as regras CSS definidas, cada tag div e seu respectivo 
conteúdo ficam em uma local padrão da página. No entanto, se cada tag div tiver uma ID exclusiva (como no exemplo anterior), você poderá usar 
suas IDs para criar regras CSS que, quando aplicadas, alteram o estilo e posicionamento das tags div. 


A regra CSS a seguir, que pode residir no cabeçalho do documento ou em um arquivo CSS externo, cria regras de estilo para a primeira tag div, 
ou a de “contêiner”, na página: 


gcontainer ( 
width: 780px; 
background: &FFFFFF; 
margin: O auto; 
border: 1px solid 4000000; 
text-align: left; 

3 


A regra &container dita que a tag div de contêiner deve ter uma largura de 780 pixels, um fundo branco, nenhuma margem (no lado esquerdo da 
página), uma borda sólida preta de 1 pixel, e o texto alinhado à esquerda. Os resultados da aplicação da regra à tag div de contêiner são os 
seguintes: 


A " 


= Content 
Lorem ipaam dolor sit umer, consectemer adipiscina elit 


Msecenas uma pro, Serroemtuos il, moleshe rm, comodo porttiter 


Main Content 


Lorem pesa dolor sit met, consectetuer adipisciug elit Present aliquarm. posto comvalhis huctus 
frarau 

| 

Phaselins mestique paras a aegre condimessim adipiscina Acmeas sagizis Etiam leo pede 


Viomcos veseualos, rivigae ss, valgutate ai, odvo 


H2 level heading 


Lorem apssn dolor sit must, comsectetuer adipus ing elit. Praeseut aliquam. susto comvalhis huctias | 
fratram, erat meilla fervucenos dicera, at pomimemy quem meme ac quam 


c 
Tag div de contêiner, 780 pixels, sem margem 
A. Texto alinhado à esquerda B. Fundo branco C. Borda sólida preta de 1 pixel 


A próxima regra CSS cria regras de estilo para a tag div de barra lateral: 


tsidebar f 

float edit: 

width: 200px; 

background: HEBEBEB; 

padding: 15px 10px 15px 20px; 
; 


A regra 4sidebar dita que a tag div de barra lateral tem uma largura de 200 pixels, um fundo cinza, um preenchimento superior e inferior de 15 
pixels, um preenchimento à direita de 10 pixels e um preenchimento à esquerda de 20 pixels. (A ordem padrão de preenchimento é da parte 
superior direita para a parte inferior esquerda.) Além disso, a regra posiciona a tag div de barra lateral com float: left — uma propriedade que 
coloca a tag div de barra lateral no lado esquerdo da tag div de contêiner. Estes são os resultados da aplicação da regra à tag div de barra 
lateral: 
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Sidebar Content 


| 
Main Content | 
Lorem ipsem disdor ait | | 
anet. consente Loress ips dolor sit amet, consectenser ndipisciag elit Proesest 
adipiscims elit laguna, juso cowsaldis luto rutrus. 


Maccenas tema perus, Phaseílus tristique purus a saque condimestus adepomcing Acteam 
fermentarm id molestoe  jagimis Exiam leo pede rhoocus venenatis trisrique in vulpestane se 
im, commado pormisor. dos 

felis 


Tt HZ level heading 


ore ipousm dobes sit amet. cussectenses misgusciag elit Pracseas alsquams, justo couvallis luctus 
mun, eres mala Sermentom disse mt meomancareos aqusem arte se quam 


Div de barra lateral, flutuação à esquerda 
A. Largura de 200 pixels B. Preenchimento superior e inferior, 15 pixels 


Por fim, a regra CSS da tag div de contêiner principal finaliza o layout: 


gmainContent f 
margin: O O O 250px; 
padding: O 20px 20px 20px; 
3 


A regra &mainContent dita que a div de conteúdo principal terá uma margem esquerda de 250 pixels; isso significa que ela colocará 250 pixels de 
espaço entre o lado esquerdo da div de contêiner e o lado esquerdo da div de conteúdo principal. Além disso, a regra fornece 20 pixels de 
espaçamento nos lados direito, inferior e esquerdo da div de conteúdo principal. Estes são os resultados da aplicação da regra à div mainContent: 


Esta será a aparência do código completo: 


RR Main Content 


Lemers ipsuars dolor ss | 
asset, comsectemies Lorem ipsum dolor sm amet. consecintuer adposcing eli 
adipiseira elit Precsest aliquesm, justo comvallio factos ratrurs | 


Maecenas urea priras, Phaselias tistuque pares a mague condumentiza adiposo ms 
fecrmentsaco 1d, isaclentão Aenesm sagintia Erimes low perhe, remcus vemenatia, tristiqque 
ta, comodo portritor “e volgutato at, ado | 


H2 level heading 


Levem ipsiam deim vt amet 


omsectetaer begun ia elit 
Prsescst aliquars, justo comvali:s facu ratres. esa! culla 
Sermmentore, diem af peoesterame quere ante nc qquass 


Í + e 
Div de conteúdo principal, margem esquerda de 250 pixels 
A. Preenchimento esquerdo de 20 pixels B. Preenchimento direito de 20 pixels C. Preenchimento inferior de 20 pixels 


<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Untitled Document</title> 
<style type="text/css"> 
tcontainer ( 
width: 780px; 
background: &FFFFFF; 
margin: O auto; 
border: 1px solid 4000000; 
text-align: left; 


; 
tsidebar 

falo att lets: 

width: 200px; 

background: HEBEBEB; 

padding: 15px 10px 15px 20px; 
h 


gmainContent f 
margin: O O O 250px; 
padding: O 20px 20px 20px; 

y 

</style> 

</head> 

<body> 

<!--container div tag--> 

<div id="container"> 
<!--sidebar div tag--> 
<div id="sidebar"> 
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<h3>Sidebar Content</h3> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p> 

<p>Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis.</p> 

</div> 

<!--mainContent div tag--> 

<div id="mainContent"> 

<h1> Main Content </h1> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus 
rutrum.</p> 

<p>Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus 
venenatis, tristique in, vulputate at, odio.</p> 

<h2>H2 level heading </h2> 

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus 
rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam.</p> 

</div> 
</div> 
</body> 


Nota: o código de exemplo acima é uma versão simplificada do código que cria o layout de barra lateral fixa de duas colunas quando você cria 
um novo documento usando os layouts predefinidos que acompanham o Dreamweaver. 


Criação de uma página com um layout de CSS RETAS 


Ao criar uma nova página no Dreamweaver, você pode criar uma que já contenha um layout de CSS. O Dreamweaver vem acompanhado de 16 
layouts de CSS diferentes qua você pode escolher. Além disso, é possível criar seus próprios layouts CSS e adicioná-los à pasta de 
configuração, a fim de que eles apareçam como opções de layout na caixa de diálogo Novo documento. 


Os layouts de CSS do Dreamweaver são processados corretamente nos seguintes navegadores: Firefox (Windows e Macintosh) 1.0, 1.5, 2.0 e 
3.6; Internet Explorer (Windows) 5.5, 6.0, 7.0 e 8.0; Opera (Windows e Macintosh) 8.0, 9.0 e 10.0; Safari 2.0, 3.0 e 4.0; e Chrome 3.0. 


Criação de uma página com um layout CSS 

1. Selecione Arquivo > Novo. 

2. Na caixa de diálogo Novo documento, selecione a categoria Página em branco. (Essa é a seleção padrão.) 

3. Em Tipo de página, selecione o tipo de página que você deseja criar. 
Nota: você deve selecionar um tipo de página em HTML para o layout. Por exemplo, você pode selecionar HTML, ColdFusionQ, PHP etc. 
Não é possível criar uma página ActionScript"”, CSS, Item de biblioteca, JavaScript, XML, XSLT ou Componente do ColdFusion com um 
layout CSS. Além disso, os tipos de página da categoria Outros da caixa de diálogo Novo documento apresentam restrição na inclusão de 
layouts de página CSS. 


4. Em Layout, selecione o layout CSS que deseja usar. Você pode escolher entre 16 layouts diferentes. A janela Visualizar mostra o layout e 
fornece uma breve descrição do layout selecionado. 


Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna: 


Fixa A largura da coluna é especificada em pixels. A coluna não é redimensionada com base no tamanho do navegador ou nas 
configurações de texto do visitante do site. 


Líquida A largura da coluna é especificada como uma porcentagem da largura do navegador do visitante. O design se adapta caso o 
visitante do site torne o navegador mais largo ou mais estreito, mas não se altera com base nas configurações de texto do visitante do site. 


5. Selecione um tipo de documento no menu pop-up TipoDoc. 
6. Selecione um local para a CSS do layout em CSS de Layout no menu pop-up. 


Adicionar a cabeçalho Adiciona CSS do layout ao cabeçalho da página que você está criando. 


Criar novo arquivo Adiciona a CSS do layout à nova folha de estilos CSS externa e anexa a nova folha de estilos à página que você está 
criando. 


Vincular a arquivo existente Permite a você especificar um arquivo CSS existente que já contém as regras de CSS necessárias ao layout. 
Essa opção é especialmente útil quando você deseja usar o mesmo layout de CSS (as regras de CSS contidas em um único arquivo) em 
vários documentos. 


7. Siga um destes procedimentos: 
* Se você selecionou Adicionar a cabeçalho em CSS de layout no menu pop-up (a opção padrão), clique em Criar. 


e Se você selecionar Criar novo arquivo no menu pop-up CSS de layout, clique em Criar e especifique um nome para o novo arquivo 
externo na caixa de diálogo Salvar arquivo de folha de estilos como. 
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e Se você selecionou Vincular a arquivo existente em CSS de layout no menu pop-up, adicione o arquivo externo à caixa de texto Anexar 
arquivo CSS, clicando no ícone Adicionar folha de estilos, preenchendo a caixa de diálogo Anexar folha de estilos externa e clicando em 
OK. Quando terminar, clique em Criar na caixa de diálogo Novo documento. 


Nota: quando você selecionar a opção Vincular a arquivo existente, o arquivo especificado já deverá ter regras para o arquivo CSS nele 
contido. 


Quando você aplicar o CSS de layout em um novo arquivo ou vincular a um arquivo existente, o Dreamweaver automaticamente vincula o 
arquivo à página em HTML que você está criando. 


Nota: os comentários condicionais do Internet Explorer, que ajudam a resolver os problemas de processamento do IE, permanecem 
incorporados no cabeçalho do novo documento de layout CSS, mesmo se você selecionar Novo arquivo externo ou Arquivo externo 
existente como local da CSS do layout. 


8. (Opcional) Você também pode anexar as folhas de estilos CSS à nova página (não relacionada ao layout CSS) ao criar a página. Para 
fazer isso, clique no ícone Anexar folha de estilos acima do painel Anexar arquivo CSS e selecione uma folha de estilos CSS. 


Para obter uma descrição detalhada desse processo, consulte o artigo Anexar automaticamente uma folha de estilos a novos documentos 
de David Powers. 


Adição dos layouts CSS personalizados à lista de opções 
1. Crie uma página HTML que contém o layout CSS que você gostaria de adicionar à lista de opções na caixa de diálogo Novo documento. A 
CSS do layout deve residir no cabeçalho da página HTML. 


Para tornar seu layout de CSS personalizado consistente com outros layouts que acompanham o Dreamweaver, você deverá salvar seu 
arquivo em HTML com a extensão .him. 
2. Adicione a página HTML à pasta Adobe Dreamweaver CS5iConfigurationBuiltiniLayouts. 


3. (Opcional) Adicione uma imagem de visualização do layout (por exemplo, um arquivo .gif ou .png) à pasta Adobe Dreamweaver 
CS5iConfigurationBuiltiniLayouts. As imagens padrão fornecidas com o Dreamweaver são arquivos PNG de 227 pixels de largura x 193 
pixels de altura. 


Atribua à imagem de visualização o mesmo nome do arquivo HTML, a fim de que você possa controlá-la facilmente. Por exemplo, se o 
arquivo HTML for myCustomLayout.htm, atribua o nome myCustomLayout.png à imagem de visualização. 


4. (Opcional) Crie um arquivo de anotações para o layout personalizado, abrindo a pasta Adobe Dreamweaver 
CS5iConfigurationBuiltiniLayouts| notes, copiando e colando qualquer arquivo de anotação existente na mesma pasta e renomeando a 
cópia do layout personalizado. Por exemplo, você pode copiar o arquivo oneColElsCtr.htm.mno e renomeá-lo como 
myCustomLayout.htm.mno. 


5. (Opcional) Após criar um arquivo de anotações para o layout personalizado, você poderá abrir o arquivo e especificar o nome, a descrição e 
a imagem de visualização do layout. 


e Vinculação a uma folha de estilos CSS externa 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Painel CSS Designer 


Painel da CSS Designer (Janela > CSS Designer) é um Inspetor de propriedade da CSS que permite criar “visualmente” estilos e arquivos da 
CSS e definir propriedades, junto com consultas de mídia. 


ALL SOURCES 


noto e 


ê Im Layout 
boilerplate.css Hm c=you 

a width : auto 
à ' E height : auto 
jquery.ui.core.min.css 
Ê . A min-width : 0px 
jquery-ui-1.10.1.custom.mi... 
) NR k min-height : 0 px 
jquery.ui.dialog.min.css j 
. RU É max-width : none 


A max-height : none 
display : inline 
SHANIA: box-sizing : content-box 
print 
margin : Set Shorthand 


only screen and ( min-width :. 
only screen and ( min-wi 


Selectors dio 0 px 
[Prece 
COMPUTED 
-deskRightPadding 
«mobileSidePadding, table... 
«mobileSidePadding 
.mobileSidePadding 
blogaArticle 

blogaArticle 

blogArticle 

fluid 

article, aside, details, figc... 


padding : Set Shorthand 


Painel CSS Designer 


Nota: você pode usar Ctrl/Cmd+ Z para desfazer ou Ctrl/Cmd + Y para refazer todas as ações executadas na CSS Designer. As alterações são 
automaticamente refletidas na Visualização dinâmica, e o arquivo relevante da CSS também é atualizado. Para informar a você que o arquivo 
relacionado foi alterado, a guia do arquivo afetado é destacada por um tempo (aproximadamente 8 segundos). 


Criação e anexação de folhas de estilo 

Definição de consultas de mídia 

Definição dos seletores da CSS 
Cópia e cola de estilos 

Definição de propriedades do CSS 
Definição de margens, preenchimento e posição 
Definição de propriedades de borda 
Desativação ou exclusão de propriedades 
Atalhos do teclado 

Identificação de elementos de página associados a um Seletor CSS (13.1) 
Desativação do realce dinâmico 


Consulte também 


e Layout das páginas com CSS 
e Efeitos de transição do CSS3 
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O painel CSS Designer consiste nos seguintes painéis: 


Origens Lista todas as folhas de estilo da CSS associadas ao documento. Com esse painel, você pode criar e anexar uma CSS ao documento 
ou definir estilos no documento. 


(Mídia Lista todas as consultas de mídia na origem selecionada no painel Origens. Se você não selecionar uma CSS específica, esse painel 
exibirá todas as consultas de mídia associadas ao documento. 


Seletores Lista todos os seletores na origem selecionada no painel Origens. Se você também selecionar uma consulta de mídia, esse painel 
reduzirá a lista de seletores da consulta de mídia em questão. Se nenhuma CSS ou consulta de mídia for selecionada, esse painel exibirá todos 
os seletores no documento. 

Quando você seleciona Global no painel (QMídia, todos os seletores não incluídos em uma consulta de mídia da fonte selecionada são exibidos. 


Propriedades Exibe as propriedades que você pode definir para o seletor especificado. Para obter mais informações, consulte Definição de 
propriedades. 

O CSS Designer é sensível ao contexto. Isso significa que, para qualquer contexto fornecido ou elemento de página selecionado, você pode exibir 
as propriedades e os seletores associados. Caso contrário, quando você selecionar um seletor no CSS Designer, as consultas de mídia e origem 
associadas serão realçadas nos respectivos painéis. 


Tutorial de vídeo 
e Adicionar estilo a páginas da Web com o painel CSS Designer 


atentos 
Emo  ineçiseos morenim meus mera t 10 som riso pues d + 3) 
Gude | gg | Conçr | úrco | | doveat met MD, O OD ici Mona rata radataa Tonia! 


The posstion vianao 
pLURALIST e 


for 


ADVENTURE 2 K 


E dese DK gr oeteroeemtm os C) fg Gem fuidherobomelero - MH = o 
» ve om “ me =|] +<< 
n 
get - at nIL, “ 
Sora ca 


Dw Do Et fes Jum Mid Fmest Commenda Du fóncico bote 


dentes x | 
ES  ienros soros marques meat O sc ricos puuerpusd + 3» 
Code | at | Cor Duro | TM] recado test O, O O esiciim um nintendo EPPPE SS Som sa | 


CSS Designer mostrando as propriedades do cabeçalho selecionado na visualização dinâmica 
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Nota: quando você seleciona um elemento de página, “Computado” é selecionado no painel Seletores. Clique em um seletor para exibir a 
origem, a consulta de mídia ou as propriedades associadas. 


Para exibir todos os seletores, selecione Todas as origens no painel Origens. Para exibir os seletores que não pertencem a consultas de mídia na 


fonte selecionada, clique em Global no painel OMídia. 


Tutorial de vídeo 
e Usando o painel CSS Designer 


O, = E Para o início 
Criação e anexação de folhas de estilo ai 


1. No painel Origens do painel CSS Designer, clique em kd e em uma das seguintes opções: 


e Criar um novo arquivo CSS: para criar e anexar um novo arquivo CSS ao documento 
e Anexar arquivo CSS existente: para anexar um arquivo CSS existente ao documento 


e Definir na página: para definir uma CSS no documento 
Com base na opção selecionada, as caixas de diálogo Criar um novo arquivo CSS ou Anexar arquivo CSS existente são exibidas. 
2. Clique em Procurar para especificar o nome do arquivo CSS e, se você estiver criando uma CSS, o local para salvar o novo arquivo. 


3. Siga um destes procedimentos: 


e Clique em Vincular para vincular o documento do Dreamweaver ao arquivo CSS. 


e Clique em Importar para importar o arquivo CSS no documento. 


4. (Opcional) Clique em Uso condicional e especifique a consulta de mídia que deseja associar ao arquivo CSS. 


e RD já sedã Para o início 
Definição de consultas de mídia 


1. No painel CSS Designer, clique em uma origem CSS no painel Origens. 


2. Clique em kd no painel (QMídia para adicionar uma nova consulta de mídia. 
A caixa de diálogo Defina a consulta de mídia aparece e relaciona todas as condições de consulta de mídia compatíveis com o 
Dreamweaver. 

3. Selecione as Condições conforme desejar. Para obter informações detalhadas sobre consultas de mídia, consulte este artigo. 
Verifique se você especificou valores válidos para todas as condições selecionadas. Caso contrário, as consultas de mídia correspondentes 
não serão criadas com sucesso. 
Nota: no momento, somente a operação “e” está disponível para várias condições. 


Se você adicionar as condições de consulta de mídia pelo código, apenas as condições permitidas serão preenchidas na caixa de diálogo Definir 
consulta de mídia. A caixa de texto Código na caixa de diálogo, entretanto, mostra o código completo (incluindo condições não permitidas). 


Se você clicar em uma consulta de mídia na visualização dinâmica/de design, a janela de visualização é alterada para corresponder à consulta 
de mídia selecionada. Para exibir o tamanho total da janela de visualização, clique em Global no painel (OMídia. 


Definição dos seletores da CSS Para o início 


1. No CSS Designer, selecione uma origem CSS no painel Origens ou uma consulta de mídia no painel QMídia. 


2. No painel Seletores, clique em E3. com base no elemento selecionado no documento, a CSS Designer identifica de forma inteligente e 
solicita o seletor relevante (até três regras). 


Execute um ou mais destes procedimentos: 


e Use as teclas de seta para cima ou para baixo para tornar o seletor sugerido mais ou menos específico. 


e Exclua a regra sugerida e digite o seletor obrigatório. Certifique-se de digitar o nome do seletor junto com o identificador do Tipo de 
seletor. Por exemplo, se você estiver especificando uma ID, o nome do seletor deverá ter o prefixo “*”. 


e Para pesquisar um seletor específico, use a caixa de pesquisa na parte superior do painel. 
* Para renomear um seletor, clique no seletor e digite o nome necessário. 
* Para reorganizar os seletores, arraste-os até a posição desejada. 


266 


Para mover um seletor de uma origem para outra, arraste-o até a origem necessária no painel Origem. 

* Para duplicar um seletor na origem selecionada, clique com o botão direito do mouse no seletor e clique em Duplicar. 

e Para duplicar um seletor e adicioná-lo a uma consulta de mídia, clique com o botão direito do mouse no seletor, passe o mouse sobre 
Duplicar na consulta de mídia e escolha a consulta de mídia. 


Nota: a opção Duplicar na consulta de mídia está disponível somente quando a fonte do seletor selecionado contém consultas de 
mídia. Não é possível duplicar um seletor de uma fonte em uma consulta de mídia de outra fonte. 


Cópia e cola de estilos 
Agora é possível copiar estilos de um seletor e colá-lo em outro. Você pode copiar todos os estilos ou copiar apenas a categoria de estilos 
específica como Layout, Texto e Borda. 


Clique com o botão direito no mouse em um seletor e escolha entre as opções disponíveis: 


Selectors 


Filter CSS Rules | border-coliapse 
COMPUTED border-spadng 


a Background 


Go to Code background-color . 


Copy all Styles 

Copy Styles Copy Layout Styles 

Paste Styles Copy Text Styles 

Duplicate Copy Border Styles 

Duplicate into media query Copy Background Styles 
-mobileSidePadding Copy Animation/Transition Styles 
.mobileSidePadding Copy Other Styles 


Copiar estilos usando a CSS Designer 


* Se um seletor não tiver estilos, as opções Copiar e Copiar todos os estilos estarão desabilitadas. 


e A opção Colar estilos fica desabilitada para sites remotos que não podem ser editados. Mas a opção Copiar e Copiar todos os estilos 
fica disponível. 


« É possível colar estilos já existentes parcialmente em um seletor (sobreposição). A união 
de todos os seletores é colada. 


* Também é possível Copiar e colar estilos para diferentes integrações de arquivos da CSS — Estilos de importação, link e inline 


Para o início 


Definição de propriedades do CSS 


As propriedades são agrupadas nas seguintes categorias e representadas por ícones diferentes na parte superior do painel Propriedades: 


e Layout 
e Texto 
- Borda 
e Fundo 
e Outros (lista de propriedades “somente texto” e não propriedades com controles visuais) 
Nota: antes de editar as propriedades de um seletor CSS, identifique os elementos associados a ele usando a Inspeção inversa. Ao fazer isso, 


você pode avaliar se todos os elementos realçados na Inversão inversa realmente exigem alterações. Consulte o link para obter mais 
informações sobre a Inspeção inversa. 


Marque a caixa de seleção Exib. conj. para exibir apenas as propriedades de grupo. Para exibir todas as propriedades que você pode especificar 
para um seletor, desmarque a caixa de seleção Exib. conj. 
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FE Layout 


width : auto 

height : auto 

min-width : 0 px 

min-height : 0 px 

max-width : 500 px 

max-height : none 

display : inline 

box-sizing : content-box 

margin rthan 
0 px 0 px 


0 px 


Todas as propriedades 


mm E 


Im Layout 
max-width : 500 px 


(es Custom 
E 


Somente propriedades definidas 


Para definir uma propriedade, como width ou border - collapse, clique nas opções necessárias exibidas perto da propriedade no painel 
Propriedades. Para obter informações sobre como definir o plano de fundo do gradiente ou controles de caixa como margens, preenchimento e 
posição, consulte os links abaixo: 

e Definição de margens, preenchimento e posição 

e Aplicação de degradês ao fundo 

e Uso de layouts flexíveis de caixa 


As propriedades substituídas são indicadas em formato tachado. 
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Formato tachado para propriedades substituídas 


Definição de margens, preenchimento e posição 
Usando os controles de caixa no painel Propriedades da CSS Designer, é possível definir rapidamente as propriedades de margens, 


preenchimento e posição. Se preferir o código, você poderá especificar o código abreviado para margem e preenchimento nas caixas de edição 
rápida. 


margin : 14px21px 20px 30px 
14 px 
30 px Fotd 21 px 
20 px 


propriedade “margin” 


padding : 14px20px 
14 px 
20 px E) 20 px 
ES 


propriedade “padding” 


position * séabir 
RR Sida praise 
auto 
left: right 
1 px co japs 
bottom 


propriedade “position” 


Clique nos valores e digite o valor necessário. Se desejar que os quatro valores sejam iguais e alterados simultaneamente, clique no ícone de 
vínculo (*) no centro. 


A qualquer momento, você pode desativar (2) ou excluir (E) valores específicos, por exemplo, o valor da margem esquerda, e manter os valores 
das margens direita, superior e inferior. 


margin : 14px21px20px30px 
14 px 
| 
30 px Fat 21 px 
ot | 
20 px 


Ícones de desativar, excluir e vincular das margens 


Definição de propriedades de borda 
As propriedades de controle de bordas são organizadas em guias lógicas para ajudá-lo a exibir ou alterar as propriedades. 
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Se preferir o código, você poderá especificar o código abreviado para bordas e raio da borda na caixa de texto de edição rápida. 


Para especificar as propriedades de controle de bordas, defina a propriedade na guia “Todos os lados”. As outras guias são ativadas e as 
propriedades definidas na guia “Todos os lados” são refletidas nas bordas individuais. 


Ao alterar uma propriedade nas guias de borda individual, o valor da propriedade correspondente na guia “Todos os lados” muda para “indefinido” 
(valor padrão). 


No exemplo abaixo, a cor da borda estava definida como preto e foi alterada para vermelho na borda superior. 


HUGE BACKPACK SALE—$99! 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure— 


from day trips to extended excursions, and more. 


SHOP NOW mp 


border : medium solid £1D... 
o FEMEA 

width : medium 

style : solid 

color EE] ssvicrc 

border ns: medium solid £1D... 
Diolda DO 

width : medium 

style : solid 

color 2 E) ssorcic 

border : medium solid 1D... 
Oo tic 

width : medium 

style : solid 

color E E *1DICIC 


Cor da borda definida como preto em todos os lados 
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HUGE BACKPACK SALE—$99! 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure— 


from day trips to extended excursions, and more. 


SHOP NOW =p 


: Set Shorthand 


border 
O [Ev ED E 
width 
style 
color 


: medium 
: solid 


4] un 


: Set Shorthand 


| O FERERE 


border 
O 
width : medium 
style 
color 


: solid 


2 E) crime 


: medium solid... 


=p E 


border 
OD 
width : medium 
style 
color 


: solid 


BE sinicic 


O código inserido é baseado na configuração da preferência para o formato abreviado ou longo. 


Os controles de exclusão e desativação estão disponíveis para propriedades individuais como nas versões anteriores à Dreamweaver CC 2014. 
Agora é possível usar a tecla Delete ou desativar controles em nível de grupo de controle de fronteiras para aplicar essas ações a todas as 
propriedades. 


Set Shorthand 


Ola DO 


border 
[| 
width [Top [redium 
style 
color 


: solid 


EE <e02121 


border : Set Shorthand 
DÓ O dc 
width : medium 
style : solid 
color 2 JE se02121 
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Durante Inspeção, as guias são focadas com base na prioridade das guias “definidas”. A prioridade mais alta é para a guia “Todos os lados”, 


seguida por “Superior, “Direita”, “Inferior” e “Esquerda”. Por exemplo, se estiver definido um valor apenas para a borda superior, o modo 
computado direciona o foco à guia “Superior”, ignorando a guia “Todos os lados”, pois não havia um valor definido para “Todos os lados”. 


Desativação ou exclusão de propriedades 
O painel do CSS Designer permite desativar ou excluir cada propriedade. A seguinte captura de tela mostra os ícones de desativar (2) e excluir ( 
B) da propriedade width. Esses ícones ficam visíveis quando você passa o mouse na propriedade. 


traase-hesght 
mari | 


Desativar/excluir propriedade 


Atalhos do teclado 
Você pode adicionar ou excluir seletores e propriedades da CSS usando atalhos de teclado. Também é possível navegar entre os grupos de 
propriedades no painel Propriedades. 


Atalho Fluxo de trabalho 
CTRL + Alt +[Shift =] Adiciona Seletor (se o controle estiver na seção de seletor) 


Adiciona Seletor (se o controle estiver em qualquer lugar no 


CTRL + Al+ S SR 
aplicativo) 


CTRL + Alt +[Shift =] Adiciona Propriedade (se o controle estiver na seção de 


propriedade) 

CTRL + Alt P Adiciona Propriedade (se o controle estiver em qualquer lugar no 
aplicativo) 

Select + Delete Exclui o seletor, se ele estiver selecionado 


Salta entre as seções, enquanto estiver no subpainel de 


CTRL + Alt + (PgUp/PgDn) propriedades 


Para o início 


Identificação de elementos de página associados a um Seletor CSS (13.1) 


Geralmente, um único Seletor CSS é associado a vários elementos de página. Por exemplo, o texto no conteúdo principal de uma página, um 
cabeçalho, e um texto de rodapé podem ser associado ao mesmo Seletor CSS. Ao editar as propriedades do Seletor CSS, todos os elementos 
associados ao seletor serão afetados, incluindo aqueles que não serão alterados. 


Realce dinâmico ajuda a identificar todos os elementos associados a um Seletor CSS. Para alterar apenas um elemento ou alguns elementos, 
você pode criar um novo Seletor CSS para os elementos e editar as propriedades. 


Para identificar elementos de página associados a um seletor CSS, passe o mouse sobre o botão na Visualização dinâmica (com código Ativo 
“desligado”). O Dreamweaver realça os elementos associados com linhas pontilhadas. 
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8) O 


HETSETS IMCKETS CHARS 


fesuredProducts Text p 
festuredProductsText p 


HUGE BACKPACK SALE—$991 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure— 
from day trips to extended excursions, and more 


ErSuIs IaLKETS CHARS 
fosturedProductsText p 


festuredProducts Text p 


HUGE BACKPACK SALE= $091 


All styles, now on sale! Shop our collection of quality 
packs designed to accompany you on any adventure — 
from day trips to extended excursions, and more 


Para remover o realce azul em torno de elementos, use o seletor novamente. 


Nota: a tabela a seguir resume as situações em que o Realce dinâmico não está disponível. 


Modo Código ativo Realce dinâmico exibido? 
Code ND ND 
Design ND ND 
aids LIGADO s 
nene (o botão está pressionado) Boo 
DESLIGADO Sim 


Desativação do realce dinâmico 
O Realce dinâmico está ativado por padrão. Para desativar o Realce dinâmico, clique nas opções de Visualização dinâmica na barra de 
ferramentas Documento, e clique em Desativar realce dinâmico. 


As publicações do Twitter! e do Facebook não são cobertas pelos termos do Creative Commons. 
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Efeitos de transição do CSS3 


É possível criar, modificar e excluir transições do CSS3 através do painel Transições do CSS. 


Para criar uma transição CSS3, crie uma classe de transição especificando valores das propriedades de transição do elemento. Se você 
selecionar um elemento antes de criar uma classe de transição, a classe de transição será aplicada automaticamente ao elemento selecionado. 


É possível escolher entre adicionar o código CSS gerado ao documento atual ou especificar um arquivo de CSS externo. 


Criar e aplicar o efeito de transição do CSS3 Pa 


1. (Opcional) Selecione um elemento (parágrafo, título etc.) para aplicar a transição. Alternativamente, você pode criar uma transição e aplicá- 
la depois em um elemento. 


2. Selecione Janela> Transições de CSS. 


3. Clicar +. 


4. Crie uma classe de transição que usa as opções na caixa de diálogo Nova transição. 
Regra de destino Insira um nome para o seletor. O seletor pode ser qualquer seletor de CSS como uma tag, uma regra, uma ID ou um 
seletor composto. Por exemplo, se você deseja adicionar efeitos de transição a todas as tags <hr>, insira hr. 
Transição ativada Selecione um estado ao qual você deseja aplicar a transição. Por exemplo, se você deseja aplicar a transição quando o 
mouse se mover sobre o elemento, use a opção passar mouse. 
Uso da mesma transição para todas as propriedades Selecione esta opção se você quiser especificar a mesma Duração, Atraso, e 


Função de Regulação de tempo para todas as propriedades de CSS as quais deseja a transição. 


Uso de uma transição diferrente para cada propriedade Selecione esta opção se quiser especificar uma Duração, Atraso e Função de 
Regulação de tempo diferentes para cada uma das propriedades de CSS as quais deseja a transição. 


Propriedade Clique em + para adicionar uma propriedade de CSS à transição. 


Duração Insira uma duração em segundos (s) ou milissegundos (ms) para o efeito de transição. 


Atraso A hora, em segundos ou milissegundos, antes do início do efeito de transição. 


Função de tempo Selecione um estilo de transição nas opções disponíveis. 


Valor final O valor final do efeito de transição. Por exemplo, para que o tamanho da fonte aumente a 40 px ao final do efeito de transição, 
especifique 40 px para a propriedade font-size. 


Escolha do local para criar a transição Para incorporar o estilo no documento atual, selecione Somente este documento. 


Se você deseja criar uma folha de estilo externa para o código CSS3, selecione Novo arquivo de folha de estilo. Ao clicar em Criar 
transição você deverá especificar um local para salvar o novo arquivo CSS. Após a folha de estilo ter sido criada, será adicionada ao 
menu Selecionar local para criar transição. 


Para o início 


Editar efeitos de transição do CSS3 


1. No painel Transições do CSS, selecione o efeito de transição que deseja editar. 
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2. Clique em 2. 


3. Use a caixa de diálogo Editar transição para alterar valores de transição que foram inseridos anteriormente. 


Desativar formato abreviado do CSS para transições tá 


1. Selecione Editar > Preferências. 
2. Selecione Estilos CSS. 


3. Em Usar formato abreviado para, cancele a seleção Transição. 


As publicações no Twitter'” e Facebook não estão licenciadas nos termos da Creative Commons. 
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Criar uma regra de CSS 


Na Dreamweaver CC e posterior, o painel CSS Styles foi substituído pelo CSS Designer. Para obter mais informações, consulte CSS Designer. 
Você pode criar uma regra CSS para automatizar a formatação de tags HTML ou uma faixa de texto identificada pelos atributos class ou ID. 


1. Coloque o ponto de inserção no documento e siga um destes procedimentos para abrir a caixa de diálogo Nova regra CSS: 
e Selecione Formatar > CSS Styles > Novo. 


e No painel CSS Styles (Janela > CSS Styles), clique no botão Nova regra CSS (+) localizado no lado inferior direito do painel. 


e Selecione o texto na janela Documento, selecione Nova regra CSS no menu pop-up Regra-alvo do Inspetor de propriedades CSS 
(Janela > Propriedades) e clique no botão Editar regra ou selecione uma opção no Inspetor de propriedades (por exemplo, clique no 
botão Negrito) para iniciar uma nova regra. 


2. Na caixa de diálogo Nova regra CSS, especifique o tipo de seletor da regra CSS que deseja criar: 
e Para criar um estilo personalizado que pode ser aplicado como um atributo class a um elemento HTML, selecione a opção Classe no 
menu pop-up Tipo de seletor e digite um nome para o estilo na caixa de texto Nome de seletor. 


Nota: Os nomes de classe devem começar com um ponto e podem conter qualquer combinação de letras e números (por exemplo, 
.«myhead1). Se você não inserir um ponto no início, o Dreamweaver o fará automaticamente. 


e Para definir a formatação de uma tag que contenha um atributo ID específico, selecione a opção ID no menu pop-up Tipo de seletor e, 
em seguida, digite a ID exclusiva (por exemplo, containerDIV) na caixa de texto Nome de seletor. 


Nota: As IDs devem começar com um sinal numérico (4) e conter qualquer combinação de letras e números (por exemplo, &mylD1). Se 
você não inserir um sinal numérico no início, o Dreamweaver o fará automaticamente. 


* Para redefinir a formatação padrão de uma tag HTML específica, selecione a opção Tag no menu pop-up Tipo de seletor e, em 
seguida, insira uma tag HTML na caixa de texto Nome de seletor ou selecione uma no menu pop-up. 


e Para definir uma regra de composição que afete simultaneamente duas ou mais tags, classes ou IDs, selecione a opção Composição e 
insira os seletores da regra de composição. Por exemplo, se você digitar div p, todos os elementos p nas tags div serão afetados pela 
regra. Uma área de texto de descrição explica exatamente que elementos a regra afetará à medida que você adicionar ou excluir 
seletores. 


3. Selecione o local em que deseja definir a regra e clique em OK: 
e Para colocar a regra em uma folha de estilos que já esteja anexada ao documento, selecione a folha de estilos. 


e Para criar uma folha de estilos externa, selecione Novo arquivo de folha de estilos. 


e Para incorporar o estilo no documento atual, selecione Apenas este documento. 


4. Na caixa de diálogo Definição de regra CSS, selecione as opções de estilo que você deseja definir para a nova regra CSS. Para obter mais 
informações, consulte a próxima seção. 


5. Quando terminar de definir as propriedades de estilo, clique em OK. 


Nota: Se você clicar em OK sem definir as opções de estilo, uma nova regra vazia será criada. 


As publicações no Twitter!M e no Facebook não estão licenciadas nos termos da Creative Commons. 
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Verificação de problemas de processamento de CSS em vários 
navegadores 


Verificação de compatibilidade do navegador 

Seleção do elemento afetado por um problema encontrado 

Saltar para o problema anterior ou seguinte no código 

Seleção dos navegadores para verificação do Dreamweaver 

Exclusão de um problema na verificação de compatibilidade de navegador 
Edição da lista de problemas ignorados 

Salvar um relatório de verificação de compatibilidade de navegador 
Visualização de um relatório de verificação de compatibilidade de navegador 
Abertura do site Adobe CSS Advisor 


O recurso Verificação de compatibilidade do navegador (VCN) ajuda a localizar combinações de HTML e CSS que apresentam problemas em 
determinados navegadores. Quando você executa uma VCN em um arquivo aberto, o Dreamweaver rastreia o arquivo e reporta quaisquer 
problemas de processamento de CSS no painel Resultados. Uma classificação de confiança, indicada por um quarto de círculo, meio círculo, três 
quarto de círculo ou um círculo completamente preenchido, informa a probabilidade da ocorrência do bug (um quarto de círculo preenchido 
indicando uma possível ocorrência e um círculo completamente preenchido indicando uma ocorrência muito provável). Para cada bug potencial 
localizado, o Dreamweaver também fornece um link direto para a documentação sobre o bug no Adobe CSS Advisor, um site que informa 
detalhadamente os bugs de processamento de navegador comumente conhecidos, e oferece soluções para corrigi-los. 


Por padrão, o recurso VCN executa a verificação nos seguintes navegadores: Firefox 1.5; Internet Explorer (Windows) 6.0 e 7.0; Internet Explorer 
(Macintosh) 5.2; Netscape Navigator 8.0; Opera 8.0 e 9.0; Safari 2.0. 


Esse recurso substitui a antiga Verificação do navegador de destino, mas retém a funcionalidade CSS. Ou seja, o novo recurso VCN ainda testa 
o código nos documentos para verificar se há suporte para algum valor ou propriedade CSS nos navegadores de destino. 


Três níveis de possíveis problemas de suporte a navegador podem surgir: 


* Um erro indica o código CSS que possivelmente ocasionará um sério problema visível em um determinado navegador, como o 
desaparecimento de partes de uma página. (O erro é uma designação padrão dos problemas de suporte a navegador; portanto, em alguns 
casos, o código com um efeito desconhecido também é marcado como erro.) 


e Um aviso indica uma parte do código CSS à qual um determinado navegador não oferece suporte, mas não ocasionará nenhum problema 
grave de exibição. 


* Uma mensagem informativa indica o código ao qual um determinado navegador não oferece suporte, mas que não tem nenhum efeito 
visível. 


As verificações de compatibilidade de navegador não alteram o documento de forma alguma. 


Para o início 


Verificação de compatibilidade do navegador 


*& Selecione Arquivo > Verificar página > Compatibilidade do navegador. 


Para o início 


Seleção do elemento afetado por um problema encontrado 


* Clique duas vezes no problema no painel Resultados. 


E a Decaê P, iníci 
Saltar para o problema anterior ou seguinte no código ARE 


*& Selecione Próximo problema ou Problema anterior no menu Verificação de compatibilidade do navegador na barra de ferramentas Documento. 


a 2 ms P O 
Seleção dos navegadores para verificação do Dreamweaver po 


No painel Resultados (Janela > Resultados), selecione a aba Verificação de compatibilidade do navegador. 
Clique na seta verde no canto superior esquerdo do painel Resultados e selecione Configurações. 
Marque a caixa de seleção ao lado de cada navegador a ser verificado. 


Po No 


Para cada navegador selecionado, escolha uma versão mínima a ser verificada no menu pop-up correspondente. 


Por exemplo, para saber se os bugs de processamento de CSS podem aparecer no Internet Explorer 5.0 e posterior, e Netscape Navigator 
7.0 e posterior, marque as caixas de seleção ao lado desses nomes de navegador, e selecione 5.0 no menu pop-up do Internet Explorer e 
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7.0 no menu pop-up do Netscape. 


” ag ai BRT P iníci 
Exclusão de um problema na verificação de compatibilidade de navegador PRM 


1. Execute a verificação de compatibilidade do navegador. 


2. No painel Resultados, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) 
no problema a ser excluído na verificação futura. 


3. Selecione Ignorar questão no menu de contexto. 


Edição da lista de problemas ignorados PRM 


No painel Resultados (Janela > Resultados), selecione a aba Verificação de compatibilidade do navegador. 
Clique na seta verde no canto superior esquerdo do painel Resultados e selecione Editar lista de questões ignoradas. 
No arquivo Exceptions.xml, localize o problema a ser excluído da lista de problemas ignorados e exclua-o. 


PO NR 


Salve e feche o arquivo Exceptions.xml. 


gia gê is minado P. iníci 
Salvar um relatório de verificação de compatibilidade de navegador E ii 


1. Execute a verificação de compatibilidade do navegador. 


2. Clique no botão Salvar relatório no lado esquerdo do painel Resultados. 
Focalize os botões no painel Resultados para ver as dicas de ferramentas do botão. 


Nota: Os relatórios não são salvos automaticamente; se você deseja manter uma cópia de um relatório, siga o procedimento acima para 
salvá-la. 


E E a E A gs 2a sda P, iníci 
Visualização de um relatório de verificação de compatibilidade de navegador id 


1. Execute a verificação de compatibilidade do navegador. 


2. Clique no botão Procurar relatório no lado esquerdo do painel Resultados. 
Focalize os botões no painel Resultados para ver as dicas de ferramentas do botão. 


Para o início 


Abertura do site Adobe CSS Advisor 


1. No painel Resultados (Janela > Resultados), selecione a aba Verificação de compatibilidade do navegador. 


2. Clique no texto de link no canto inferior direito do painel. 


Mais tópicos da Ajuda 
CSS Advisor 


(69) ex-nc-sa ] 
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Conversão da CSS inline em uma regra CSS 


Os estilos inline não são práticas recomendadas. Para tornar a CSS mais limpa e organizada, converta os estilos inline em regras CSS que 
residem no cabeçalho do documento ou em uma folha de estilos externa. 


1. Na Visualização de código (Exibir > Código), selecione o atributo de estilo inteiro que contenha a CSS inline a ser convertida. 
2. Clique com o botão direito do mouse e selecione Estilos CSS > Converter CSS inline em regra. 
3. Na caixa de diálogo Converter CSS inline, digite um nome de classe para a nova regra e siga um destes procedimentos: 


e Especifique uma folha de estilos na qual a nova regra CSS deve aparecer e clique em OK. 
e Selecione o cabeçalho do documento como o local onde a nova regra CSS deve aparecer e clique em OK. 


Também é possível converter as regras usando a barra de ferramentas Codificação. A barra de ferramentas Codificação está disponível 
somente na Visualização de código. 


Mais tópicos da Ajuda 


(9) ex-nc-sa ) 
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Introdução às folhas de estilo em cascata 


Sobre Folhas de estilos em cascata 
Sobre as regras CSS 

Sobre os estilos em cascata 

Sobre formatação de texto e CSS 
Sobre as Propriedades CSS abreviadas 


Para o início 


Sobre Folhas de estilos em cascata 


As folhas de estilos em cascata (CSS) são um conjunto de regras de formatação que controlam a aparência do conteúdo em uma página da 
Web. O uso de estilos CSS para formatar uma página separa o conteúdo da apresentação. O conteúdo da página — o código HTML — reside no 
arquivo HTML, e as regras CSS que definem a apresentação do código residem em outro arquivo (uma folha de estilos externa) ou em outra parte 
do documento HTML (geralmente a seção de cabeçalho). A separação do conteúdo da apresentação torna mais fácil a manutenção da aparência 
do site em um local central, pois você não precisa atualizar cada propriedade em cada página sempre que é necessário fazer uma alteração. Isso 
também torna o código HTML mais simples e limpo, diminuindo o tempo de carregamento do navegador e simplificando a navegação para as 
pessoas com problemas de acesso (por exemplo, aquelas que usam leitores de tela). 


A CSS oferece excelente flexibilidade e controle sobre a aparência exata da página. Com a CSS, você pode controlar várias propriedades de 
texto, como fontes e tamanhos de fonte específicos; negrito, itálico, sublinhado e sombras de texto; cor de texto e cor de fundo; cor e sublinhado 
de link; e muito mais. Usando a CSS para controlar as fontes, você também pode garantir um tratamento mais consistente do layout e da 
aparência da página em vários navegadores. 


Além da formatação do texto, você pode usar a CSS para controlar o formato e o posicionamento dos elementos em nível de bloco em uma 
página da Web. Um elemento em nível de bloco é uma parte independente do conteúdo, geralmente separado por uma nova linha no código 
HTML e formatado visualmente como um bloco. Por exemplo, as tags h1, p e div produzem elementos em nível de bloco em uma página da 
Web. Você pode definir as margens e bordas de elementos em nível de bloco, posicioná-los em um local específico, adicionar uma cor de fundo a 
eles, flutuar texto em volta deles etc. A manipulação dos elementos em nível de bloco é basicamente a maneira como você cria o layout das 
páginas com a CSS. 


Para o início 
Sobre as regras CSS 
A regra de formatação CSS consiste em duas partes: o seletor e a declaração (ou, na maioria dos casos, em um bloco de declarações). O seletor 
é um termo (como p, hi, um nome de classe ou uma ID) que identifica o elemento formatado e o bloco de declarações define o que são as 
propriedades de estilo. No exemplo a seguir, h1 é o seletor e tudo o que estiver entre chaves (()) é o bloco de declarações: 


hi £ font-size: 16 pixels; font-family: Helvetica; font-weight:bold; 3 


Uma declaração individual consiste em duas partes: a propriedade (como font - family) e o valor (como Helvetica). Na regra CSS anterior, 
um determinado estilo foi criado para as tags h1: o texto de todas as tags h1 vinculadas a esse estilo terá 16 pixels de tamanho, a fonte Helvetica 
e será negrito. 


O estilo (que é proveniente de uma regra ou de um conjunto de regras) reside em um lugar separado do texto real que ele está formatando, 
geralmente em uma folha de estilos externa ou na parte de cabeçalho de um documento HTML. Desse modo, uma regra para as tags h1 pode se 
aplicar a várias tags simultaneamente (e, no caso das folhas de estilos externas, a regra pode se aplicar a várias tags simultaneamente em várias 
páginas diferentes). Assim, a CSS oferece recursos de atualização extremamente fáceis. Quando você atualizar uma regra CSS em um lugar, a 
formatação de todos os elementos que usam o estilo definido serão automaticamente atualizados para o novo estilo. 


Onde ficar 
Hd O que fazer 
font-family: Ariel; 
font-size: 16px; | | trrececes do 
font-weight: bola; principalLhtmi 
) 
Festival de 
Primavera 
Folha de estilos externa eventos.html 


280 


Você pode definir os seguintes tipos de estilos no Dreamweaver: 


e Os estilos de classe permitem que você aplique as propriedades de estilo a qualquer elemento na página. 


e Os estilos de tag HTML redefine a formatação de uma tag específica, como h1. Quando você criar ou alterar um estilo CSS para a tag hi, 
todo o texto formatado com a tag h1 é imediatamente atualizado. 


e Os estilos avançados redefinem a formatação de uma determinada combinação de elementos ou de outras formas de seletor conforme 
permitido pela CSS (por exemplo, o seletor td h2 se aplica sempre que um cabeçalho h2 aparece em uma célula de tabela.) Os estilos 
avançados também podem redefinir a formatação das tags que contêm um atributo id específico (por exemplo, os estilos definidos por 
&myStyle se aplicam a todas as tags que contêm o par atributo/valor id="myStyle"). 


As regras CSS podem residir nos seguintes locais: 


Folhas de estilos CSS externas Conjuntos de regras CSS armazenadas em um arquivo CSS (.css) externo separado (e não em um arquivo 
HTML). Esse arquivo é vinculado a uma ou mais páginas de um site usando um link ou uma regra (Qimport na seção de cabeçalho de um 
documento. 


Folhas de estilos CSS internas (ou incorporadas) Conjuntos de regras CSS incluídas em uma tag de estilo na parte do cabeçalho de um 
documento HTML. 


Estilos inline Definidas em ocorrências específicas de tags em um documento HTML. (Não é recomendável o uso de Estilos inline.) 


O Dreamweaver reconhece os estilos definidos nos documentos existentes, contanto que eles estejam em conformidade com as diretrizes do 
estilo CSS. O Dreamweaver também processa a maioria dos estilos aplicados diretamente na Visualização de design. (A visualização do 
documento em uma janela de navegador, no entanto, proporciona a você o processamento de página “ao vivo” mais preciso.) Alguns estilos CSS 
são processados de forma diferente no Microsoft Internet Explorer, Netscape, Opera, Apple Safari ou outros navegadores, enquanto outros estilos 
não são compatíveis com nenhum navegador. 


Para exibir o guia de referência de CSS da O'Reilly incluído com o Dreamweaver, selecione Ajuda > Referência e selecione Referência de 
CSS da O'Reilly no menu pop-up no painel Referência. 


. RARE 
Sobre os estilos em cascata Rr tr 


O termo em cascata se refere à maneira como um navegador exibe os estilos de elementos específicos em uma página da Web. Três fontes 
diferentes são responsáveis pelos estilos que você vê em uma página da Web: a folha de estilos criada pelo autor da página, as seleções de 
estilo personalizadas do usuário (se houver alguma) e os estilos padrão do próprio navegador. Os tópicos anteriores descrevem como criar estilos 
para uma página da Web como o autor da página da Web e da folha de estilos anexada a essa página. Mas os navegadores também têm suas 
próprias folhas de estilos padrão que regem o processamento das páginas da Web e, além disso, os usuários podem personalizar seus 
navegadores fazendo seleções que ajustam a exibição das páginas. A aparência final de uma página da Web é o resultado das regras de todas 
essas fontes juntas (ou “em cascata”) para processar a página da Web de uma maneira ideal. 


Uma tag comum — a tag de parágrafo ou a tag <p> — ilustra o conceito. Por padrão, os navegadores vêm com folhas de estilos que definem a 
fonte e o tamanho de fonte do texto do parágrafo (ou seja, o texto que aparece entre as tags <p> no código HTML). No Internet Explorer, por 
exemplo, todo o texto do corpo, incluindo o texto do parágrafo, é exibido na fonte Times New Roman média, por padrão. 


Como autor de uma página da Web, no entanto, você pode criar uma folha de estilos que substitua o estilo padrão de fonte de parágrafo e 
tamanho de fonte do navegador. Por exemplo, você pode criar a seguinte regra na folha de estilos: 


p £ font-family: Arial; font-size: small; à 
Quando um usuário carrega a página, as configurações de fonte de parágrafo e tamanho de fonte definidas por você como autor substituem as 


configurações padrão de texto de parágrafo do navegador. 


Os usuários podem fazer seleções para personalizar a exibição do navegador de uma forma ideal para seu próprio uso. No Internet Explorer, por 
exemplo, o usuário pode selecionar Exibir > Tamanho do texto > O maior para expandir a fonte da página para um tamanho mais legível, caso 
ele ache que a fonte está muito pequena. Por fim (pelo menos neste caso), a seleção do usuário substitui os estilos padrão de tamanho de fonte 
do navegador e os estilos de parágrafo criados pelo autor da página da Web. 


A herança é outra parte importante da cascata. As propriedades da maioria dos elementos de uma página da Web são herdadas; por exemplo, as 
tags de parágrafo herdam determinadas propriedades das tags de corpo, as tags span herdam determinadas propriedades das tags de parágrafo 
e assim por diante. Desse modo, se você criar a seguinte regra na folha de estilos: 


body £ font-family: Arial; font-style: italic; | 
Todo o texto de parágrafo na página da Web (bem como o texto que herda propriedades da tag de parágrafo) será Arial e itálico, pois a tag de 
parágrafo herda essas propriedades da tag de corpo. Você pode, no entanto, ser mais específico nas suas regras e criar estilos que substituem a 


fórmula padrão para herança. Por exemplo, se você criar as seguintes regras na folha de estilos: 


body £ font-family: Arial; font-style: italic; ) p £ font-family: Courier; font-style: normal; 3 
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Todo o texto do corpo será Arial e itálico, exceto o texto do parágrafo (e seu texto herdado), que será exibido como Courier normal (não itálico). 
Tecnicamente, a tag de parágrafo herda primeiro as propriedades definidas para a tag de corpo, mas depois ela as ignora porque tem as suas 
próprias propriedades. Em outras palavras, enquanto os elementos de página geralmente herdam as propriedades acima, a aplicação direta de 
uma propriedade a uma tag sempre resulta em uma substituição da fórmula padrão para herança. 


A combinação de todos os fatores abordados anteriormente, além de outros fatores como a especificidade CSS (um sistema que atribui pesos 
diferentes a determinados tipos de regras CSS) e a ordem das regras CSS, acaba criando uma cascata complexa na qual os itens com 
prioridades mais altas substituem as propriedades com prioridades mais baixas. Para obter mais informações sobre as regras que regem a 
cascata, a herança e a especificidade, acesse www.w3.org/TR/CSS2/cascade.html. 


Sobre formatação de texto e CSS didi 


Por padrão, o Dreamweaver usa as Folhas de estilo em cascata (CSS) para formatar texto. Os estilos que você aplica ao texto usando o Inspetor 
de propriedades ou os comandos de menu criam regras CSS que estão incorporadas no cabeçalho do documento atual. 


Também é possível usar o painel Estilos CSS para criar e editar propriedades e regras CSS. O painel Estilos CSS é um editor muito mais robusto 
do que o Inspetor de propriedade e exibe todas as regras CSS definidas para o documento atual, quer essas regras estejam incorporadas no 
cabeçalho do documento ou em uma folha de estilos externa. A Adobe recomenda que você use o painel Estilos CSS (em vez do Inspetor de 
propriedades) como a ferramenta principal para a criação e edição da CSS. Como resultado, o código será mais limpo e fácil de manter. 


Além dos estilos e folhas de estilos criados, você também pode usar as folhas de estilos fornecidas junto com o Dreamweaver para aplicar estilos 
aos documentos. 


Para obter um tutorial sobre a formatação de texto com CSS, consulte www.adobe.com/go/vid0153. 


” ' Para o início 
Sobre as Propriedades CSS abreviadas ii 
A especificação CSS permite a criação de estilos através de uma sintaxe abreviada conhecida como CSS abreviada. A CSS abreviada permite 
que você especifique os valores de várias propriedades usando uma única declaração. Por exemplo, a propriedade font permite que você defina 
as propriedades font - style, font -variant, font -weight, font-size, line-height e font - family em uma única linha. 


Um ponto-chave a ser observado quando se usa a CSS abreviada é que os valores omitidos em uma propriedade CSS abreviada são definidos 
para seus valores padrão. Isso pode fazer com que as páginas sejam exibidas incorretamente quando duas ou mais regras CSS são atribuídas à 
mesma tag. 


Por exemplo, a regra hi mostrada a seguir usa a sintaxe CSS longa. Observe que as propriedades font - variant, font -stretch, font - 
size-adjust e font-style foram definidas para seus valores padrão. 


hi £ font-weight: bold; font-size: 16pt; line-height: 18pt; font-family: Arial; font-variant: normal; font- 
style: normal; font-stretch: normal; font-size-adjust: none + 


Reescrita como uma única propriedade abreviada, a mesma regra poderá ter a seguinte aparência: 


hã £ font: bold 16pt/18pt Arial 3 


Quando a propriedade é escrita através da notação abreviada, os valores omitidos são definidos automaticamente para seus valores padrão. 
Desse modo, o exemplo abreviado anterior omite as tags font - variant, font-style, font-stretche font -size-adjust. 


Se você tiver estilos definidos em mais de um local (por exemplo, incorporado em uma página HTML e importado de uma folha de estilos 
externa) nos formatos abreviado e longo, saiba que as propriedades omitidas em uma regra abreviada podem substituir (ou cascata) as 
propriedades que estão explicitamente definidas em outra regra. 


Por esse motivo, o Dreamweaver usa o formato longo da notação CSS, por padrão. Isso impede os possíveis problemas ocasionados pela 
substituição de uma regra abreviada por uma longa. Se você abrir uma página da Web codificada com a notação CSS abreviada no 
Dreamweaver, saiba que o Dreamweaver criará novas regras CSS usando o formato longo. Você pode especificar como o Dreamweaver criará e 
editará as regras CSS alterando as preferências de edição CSS na categoria Estilos CSS da caixa de diálogo Preferências (Editar > Preferências 
no Windows; Dreamweaver > Preferências no Macintosh). 


Nota: O painel Estilos CSS cria regras usando somente a notação longa. Se você criar uma página ou folha de estilos CSS usando o painel 
Estilos CSS, saiba que a codificação das regras CSS abreviadas pode fazer com que as propriedades abreviadas sobreponham as criadas em 
formato longo. Por isso, use a notação CSS longa ao criar seus estilos. 


e Introdução ao tutorial de CSS 

e Aplicar, remover ou renomear estilos de classe 
e Adicionando e formatando texto 

e Painel Estilos CSS 

e Tutorial de formatação de texto com CSS 
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Aplicação, remoção ou renomeação de estilos de classe CSS 


Aplicação de um estilo de classe CSS 
Remoção de um estilo de classe em uma seleção 
Renomeação de um estilo de classe 


Os estilos de classe são o único de tipo de estilo CSS que pode ser aplicado a qualquer texto em um documento, independentemente de quais 
tags controlam o texto. Todos os estilos de classe associados ao documento atual são exibidos no painel Estilos CSS (com um ponto [.] 
precedendo o nome) e no menu pop-up Estilo do Inspetor de propriedades de texto. 


Você verá imediatamente a maioria dos estilos atualizados; no entanto, deve visualizar a página em um navegador para verificar se um estilo foi 
aplicado conforme o esperado. Quando você aplicar dois ou mais estilos ao mesmo texto, eles poderão conflitar e produzir resultados 
inesperados. 


Ao visualizar os estilos definidos em uma folha de estilos CSS externa, verifique se salvou a folha de estilos para garantir que suas alterações 
serão refletidas quando a página for visualizada em um navegador. 


Para o início 


Aplicação de um estilo de classe CSS 
1. No documento, selecione o texto ao qual você deseja aplicar um estilo CSS. 
Coloque o ponto de inserção em um parágrafo para aplicar o estilo ao parágrafo inteiro. 
Se você selecionar uma faixa de texto em um único parágrafo, o estilo CSS afetará apenas a faixa selecionada. 


Para especificar a tag exata ao qual o estilo CSS deve ser aplicado, selecione a tag no seletor de tags localizado no canto inferior esquerdo 
da janela Documento. 


2. Para aplicar um estilo de classe, siga um destes procedimentos: 


e No painel Estilos CSS (Janela > Estilos CSS), selecione o modo Tudo, clique com o botão direito do mouse no nome do estilo a ser 
aplicado e selecione Aplicar no menu de contexto. 


e No Inspetor de propriedades HTML, selecione o estilo de classe a ser aplicado no menu pop-up Classe. 


* Najanela Documento, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica 
(Macintosh) no texto selecionado e, no menu de contexto, selecione Estilos CSS e, em seguida, selecione o estilo a ser aplicado. 


e Selecione Formatar > Estilos CSS e, no submenu, selecione o estilo a ser aplicado. 


” : m Para o início 
Remoção de um estilo de classe em uma seleção 


1. Selecione o objeto ou texto do qual deseja remover o estilo. 
2. No Inspetor de propriedades HTML (Janela > Propriedades), selecione Nenhum no menu pop-up Classe. 


pm” E Para o início 
Renomeação de um estilo de classe e 


1. No painel Estilos CSS, clique com o botão direito no estilo de classe CSS que deseja renomear e selecione Renomear classe. 
Você também pode renomear uma classe selecionando Renomear classe no menu de opções do painel Estilos CSS. 


2. Na caixa de diálogo Renomear classe, verifique se a classe a ser renomeada está selecionada no menu pop-up Renomear classe. 


3. Na caixa de texto Novo nome, digite o novo nome da nova classe e clique em OK. 


Se a classe que você está renomeando for interna ao cabeçalho do documento atual, o Dreamweaver alterará o nome da classe, assim 
como todas as ocorrências do nome de classe do documento atual. Se a classe que você está renomeando estiver em um arquivo CSS 
externo, o Dreamweaver abrirá e alterará o nome de classe do arquivo. O Dreamweaver também inicia uma caixa de diálogo Localizar e 
substituir no nível do site, a fim de que você possa procurar todas as ocorrências do nome de classe antigo no site. 


Mais tópicos da Ajuda 
[imprimir]Sobre as folhas de estilo em cascata 


(69) ex-ne-sa ] 
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Adição de uma propriedade a uma regra CSS 


Você pode usar o painel Estilos CSS para adicionar propriedades a regras. 


1. No painel Estilos CSS (Janela > CSS), selecione uma regra no painel Todas as regras (modo Tudo) ou selecione uma propriedade no 
painel Resumo para seleção (modo Atual). 


2. Siga um destes procedimentos: 


e Se a visualização Mostrar somente propriedades definidas estiver selecionada no painel Propriedades, clique no link Adicionar 
propriedades e adicione uma propriedade. 


* Se a visualização de categoria ou a visualização de lista estiver selecionada no painel Propriedades, preencha um valor para 
propriedade a ser adicionada. 


(69) ex-nc-sa ] 
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Conteúdo de página e ativos 
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Uso do painel Inserir 


O painel Inserir contém botões para criar e inserir objetos, tais como tabelas e imagens. Os botões são organizados em categorias. 


Ocultar ou mostrar o painel Inserir 

Mostrar os botões em uma categoria específica 

Exibir o menu pop-up para um botão 

Inserir um objeto 

Ignorar a caixa de diálogo de inserção de objeto e inserir um objeto de alocador de espaço vazio 
Modificar preferências do painel Inserir 

Adicionar, excluir ou gerenciar itens na categoria Favoritos do painel Inserir 
Inserir objetos usando botões na categoria Favoritos 

Exibir o painel Inserir como uma Barra de inserção horizontal 

Reverter a Barra de inserção horizontal para um grupo de painéis 

Mostrar categorias da Barra de inserção horizontal como abas 

Mostrar categorias da Barra de inserção horizontal como um menu 


Nota: A interface de usuário foi simplificada na Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das 
opções descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo. 


, ' Para o início 
Ocultar ou mostrar o painel Inserir 


e Selecione Janela > Inserir. 


Nota: Se você estiver trabalhando com determinados tipos de arquivo, como XML, JavaScript, Java e CSS, o painel Inserir e a opção de 
Visualização de design estarão desativados, porque não é possível inserir itens nesses arquivos de código. 


" ' gs Para o início 

Mostrar os botões em uma categoria específica 
e Selecione o nome da categoria no menu pop-up Categoria. Por exemplo, para mostrar botões da categoria Layout, selecione Layout. 

Para o início 


Exibir o menu pop-up para um botão 


e Clique na seta para baixo ao lado do ícone do botão. 


TO Draw Rectargã Hotspot 
TD Draw Oral Hotspot 
12 Draw Potyçon Motspot 
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= Roliover Image 
RE, Fireworks HTML 


Insira o painel no Dreamweaver CC 


E á Para o início 
Inserir um objeto 


1. Selecione a categoria apropriada no menu pop-up Categoria, do painel Inserir. 
2. Siga um destes procedimentos: 


e Clique no botão de um objeto ou arraste o ícone do botão na janela Documento (na Visualização de design, dinâmica ou de código). 


e Clique na seta em um botão e selecione uma opção no menu. 


Dependendo do objeto, uma caixa de diálogo de inserção de objeto correspondente pode aparecer, solicitando que você procure um 
arquivo ou especifique parâmetros para um objeto. Ou o Dreamweaver pode inserir o código no documento, ou abrir um editor de tag 
ou um painel para que você especifique informações antes do código ser inserido. 


Para alguns objetos, nenhuma caixa de diálogo será exibida se você inserir o objeto na Visualização de design, mas um editor de tag 
aparecerá se o objeto for inserido na Visualização de código. Para alguns objetos, a inserção do objeto na Visualização de design faz 
com que o Dreamweaver passe para a Visualização de código antes da inserção do objeto. 


Nota: Alguns objetos, como as âncoras nomeadas, não aparecem quando a página é visualizada na janela de um navegador. Você pode 
exibir ícones na Visualização de design que marcam a localização desses objetos invisíveis. 


à dê E iai E E E E P iníci 
Ignorar a caixa de diálogo de inserção de objeto e inserir um objeto de alocador de espaço ii 


vazio 
e Clique com a tecla Control (Windows) ou Option pressionada (Macintosh) no botão do objeto. 


Por exemplo, para inserir um alocador de espaço em uma imagem sem especificar um arquivo de imagem, clique com a tecla Control ou 
Option pressionada no botão Imagem. 


Nota: Este procedimento não ignora todas as caixas de diálogo de inserção de objetos. Muitos objetos, incluindo elementos PA e conjuntos 
de molduras, não inserem alocadores de espaço nem objetos de valor padrão. 


di E Uarê ) : Ra 
Modificar preferências do painel Inserir ara o início 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Na categoria Geral da caixa de diálogo Preferências, desmarque Mostrar caixa de diálogo ao inserir objetos para ocultar as caixas de 


diálogo ao inserir objetos como imagens, tabelas, scripts e elementos de cabeçalho ou mantenha pressionada a tecla Control (Windows) ou 
Option (Macintosh) ao criar o objeto. 


Ao inserir um objeto com essa opção desativada, os valores de atributo padrão são aplicados. Use o Inspetor de propriedades para 
alterar as propriedades de objeto depois de inserir o objeto. 


Ron E ã ã z j Ê j Para o início 
Adicionar, excluir ou gerenciar itens na categoria Favoritos do painel Inserir 


1. Selecione alguma categoria no painel Inserir. 


2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na área em que os botões são exibidos; 
em seguida, selecione Personalizar favoritos. 


3. Na caixa de diálogo Personalizar objetos favoritos, faça as alterações necessárias e clique em OK. 
* Para adicionar um objeto, selecione-o no painel Objetos disponíveis à esquerda e, em seguida, clique na seta entre os dois painéis ou 
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clique duas vezes no objeto no painel Objetos disponíveis. 


Nota: Você pode adicionar um objeto de cada vez. Você não pode selecionar o nome de uma categoria, como Comum, para adicionar 
uma categoria inteira à lista de favoritos. 


e Para excluir um objeto ou separador, selecione um objeto no painel Objetos favoritos à direita e, em seguida, clique no botão Remover 
objeto selecionado na lista Objetos favoritos, acima do painel. 


* Para mover um objeto, selecione um objeto no painel Objetos favoritos à direita e, em seguida, clique no botão de seta para cima ou 
para baixo, acima do painel. 


e Para adicionar um separador abaixo de um objeto, selecione um objeto no painel Objetos favoritos à direita e, em seguida, clique no 
botão Adicionar separador, abaixo do painel. 


4. Se você não estiver na categoria Favoritos do painel Inserir, selecione essa categoria para ver suas alterações. 


= E ai a = P, iníci 
Inserir objetos usando botões na categoria Favoritos ras 


e Selecione a categoria Favoritos, no menu pop-up Categoria, no painel Inserir, e clique no botão de algum objeto favorito que você tenha 
adicionado. 


Er a a E é, E P. iníci 
Exibir o painel Inserir como uma Barra de inserção horizontal did 


Diferente dos outros painéis do Dreamweaver, você pode arrastar o painel Inserir para fora de sua posição de encaixe padrão e soltá-lo em uma 
posição horizontal na parte superior da janela Documento. Ao fazer isso, ele se altera de um painel para uma barra de ferramentas (embora você 
não possa ocultá-lo e exibi-lo assim como faz com as outras barras de ferramentas). 


1. Clique na aba do painel Inserir e arraste-a para a parte superior da janela Documento. 


DW file Edit View Insert Modiy Format Commé 


2. Quando você visualizar uma linha azul horizontal na parte superior da janela Documento, solte o painel Inserir na posição. 


Nota: A Barra de inserção horizontal, por padrão, também faz parte da área de trabalho Clássica. Para alternar para a área de trabalho Clássica, 
selecione Clássica, no alternador de área de trabalho da Barra de aplicativos. 


Para o início 


Reverter a Barra de inserção horizontal para um grupo de painéis 


1. Clique na alça da Barra de inserção horizontal (na parte esquerda da Barra de inserção) e arraste-a para o local onde os seus painéis estão 
encaixados. 
2. Posicione o painel Inserir e solte-o. Uma linha azul indica onde você pode soltar o painel. 


a a = « P. iníci 
Mostrar categorias da Barra de inserção horizontal como abas dat 


e Clique na seta ao lado do nome da categoria, na extremidade esquerda da Barra de inserção horizontal, e selecione Mostrar como abas. 


Para o início 
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Mostrar categorias da Barra de inserção horizontal como um menu 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na aba de uma categoria da Barra de 
inserção horizontal e, em seguida, selecione Mostrar como menus. 


A Adobe também recomenda 
e Visão geral do painel Inserir 


(ec As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 
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Adição de fontes da Web e do Edge à lista de fontes 


Você pode adicionar fontes do Adobe Edge e da Web à lista de fontes no Dreamweaver. Na lista de fontes, as pilhas de fontes com suporte no 
Dreamweaver são listadas antes de Web Fonts e Edge Web Fonts. 


Adição do Adobe Edge Web Fonts à lista de fontes 

Adição de fontes locais da Web à lista de fontes 

Criação de pilhas de fontes personalizadas 

Visualização de fontes inseridas 

Atualização de tag de script de fonte da Web nos arquivos 
Atualização de tag de script de fonte da Web em uma página 


Para o início 


Adição do Adobe Edge Web Fonts à lista de fontes 


Agora é possível usar fontes do Adobe Edge nas páginas da Web. Quando uma fonte do Edge é utilizada em uma página, a tag adicional de 
script é adicionada para fazer referência a um arquivo JavaScript. Esse arquivo baixa a fonte do servidor da Creative Cloud diretamente no cache 
do navegador. 


Para exibir a página, as fontes são baixadas do servidor da Creative Cloud mesmo se a fonte estiver disponível no computador do usuário. 
Por exemplo, uma tag de script que usa somente a fonte “Abel” tem o formato: 


<!--A seguinte tag de script baixa uma fonte do servidor Adobe Edge Web Fonts para uso na página da Web. 
Recomendamos não modificar isso. --> 


<script>var adobewebfontsappname ="dreamweaver"</script> 


<script src="http://use.edgefonts.net/abel:n4:default.js" type="text/javascript"></script> 
1. Selecione Modificar > Gerenciar fontes. 
2. A guia Fontes do Adobe Edge exibe todas as fontes do Adobe Edge que podem ser adicionadas à lista de fontes. 


3. Para localizar e adicionar fontes dessa lista à lista de fontes, faça o seguinte: 


e Clique na fonte que você deseja adicionar à lista de fontes. 
e Para desmarcar uma fonte, clique na fonte novamente. 


* Utilize filtros para criar uma pequena lista das fontes preferidas. Por exemplo, para criar uma pequena lista de fontes Serif, clique em M 


e Você pode usar vários filtros. Por exemplo, para criar uma pequena lista de filtros do tipo Serif que pode ser usado para parágrafos, 
clique em Meem 


e Para pesquisar uma fonte pelo nome, digite seu nome na caixa de pesquisa. 
4. Clique em Ed para filtrar as fontes selecionadas. 
5. Clique em Concluído. 


6. Abra a lista de fontes de qualquer local. Por exemplo, você poderia usar a lista de fontes na seção CSS do painel Propriedades. 


Na lista de fontes, as pilhas de fontes do Dreamweaver são listadas antes das fontes da Web. Navegue para baixo na lista para localizar as 
fontes selecionadas. 


Para o início 


Adição de fontes locais da Web à lista de fontes 


Você pode adicionar fontes da Web de seu computador à lista de fontes no Dreamweaver. As fontes adicionadas são refletidas nos menus de 
fonte no Dreamweaver. Fontes de tipo EOT, WOFF, TTF e SVG são suportadas. 


1. Selecione Modificar > Gerenciar fontes. 
2. Na caixa de diálogo exibida, clique na guia Fontes locais da Web. 


3. Clique no botão Procurar que corresponda ao tipo de fonte que deseja adicionar. Por exemplo, se a fonte estiver no formato EOT, clique no 
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botão Procurar correspondente à Fonte EOT. 


4. Navegue até o local no computador que contém a fonte. Selecione o arquivo e abra-o. Se outros formatos para a fonte existirem nesse 
local, eles serão adicionados automaticamente à caixa de diálogo. O campo Nome da fonte também é escolhido automaticamente a partir 
do nome da fonte. 


5. Selecione a opção que solicita a confirmação de que você licenciou a fonte para ser usada no site. 


6. Clique em Concluído. A lista de fontes é exibida na Lista atual de fontes locais. 


Para remover uma fonte da Web da lista de fontes, selecione a fonte na Lista atual de fontes locais e clique em Remover. 


7 a + = P mtoo 
Criação de pilhas de fontes personalizadas ara o início 


Uma pilha de fontes é uma lista de fontes em uma declaração font-family do CSS. Usando a guia Pilhas de fontes personalizadas da caixa de 
diálogo Gerenciar fontes, você poderá: 


e Adicionar as novas pilhas de fontes usando o botão “+”. 
e Editar pilhas de fontes existentes, selecionando-as na lista de fontes. Usar os botões “>>” e “<<” para atualizar a lista de Fontes escolhidas. 


e Excluir as pilhas de fontes existentes usando o botão “-”. 
e Reordenar as pilhas usando os botões de seta. 


a ' =” E z P, iníci 
Visualização de fontes inseridas PRE 


Não é possível visualizar fontes da Web e do Edge na visualização de design. Alterne para a visualização dinâmica ou visualize a página em um 
navegador para visualizá-las. 


Atualização de tag de script de fonte da Web nos arquivos doi 


Quando você atualizar a fonte em um arquivo CSS que está vinculado a vários arquivos HTML, deverá atualizar a tag de script nos arquivos 
HTML relacionados. Quando você clica em Atualizar, as tags de script em todos os arquivos HTML afetados são atualizadas. 


Atualização de tag de script de fonte da Web em uma página PET 


Selecione Comandos > Limpar tag de script de fontes da Web (página atual) para atualizar as fontes na página da Web que não estão refletidas 
na tag de script. 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Trabalho com o widget Campo de texto de validação do Spry 


Sobre o widget Campo de texto de validação 
Inserir e editar o widget Campo de texto de validação 
Personalizar o widget Campo de texto de validação 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Campo de texto de validação 


Um widget Campo de texto de validação do Spry é um campo de texto que exibe estados válidos ou inválidos quando o visitante do site insere 
texto. Por exemplo, você pode adicionar um widget Campo de texto de validação a um formulário no qual os visitantes digitam seus endereços de 
email. Se eles não digitarem o símbolo “(D” e um ponto no endereço de email, o widget retornará uma mensagem declarando que as informações 
inseridas pelo usuário são inválidas. 


Este exemplo mostra um widget Campo de texto de validação em vários estados: 
A Immy/dd/ry 
B feooe-D6-24 


c A emos 


he value is required 


A. Widget Campo de texto, dica ativada B. Widget Campo de texto, estado válido C. Widget Campo de texto, estado inválido D. Widget Campo 
de texto, estado obrigatório 


O widget Campo de texto de validação inclui inúmeros estados (por exemplo, válido, inválido, estado obrigatório e assim por diante). Você pode 
alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validação desejados. Um widget 
Campo de texto de validação pode validar em vários pontos; por exemplo, quando o visitante clica fora do widget, digita ou tenta enviar o 
formulário. 


Estado inicial O estado do widget quando a página é carregada no navegador ou quando o usuário redefine o formulário. 

Estado de foco O estado do widget quando o usuário coloca o ponto de inserção no widget. 

Estado válido O estado do widget depois que o usuário insere informações corretamente e o formulário pode ser enviado. 

Estado inválido O estado do widget depois que o usuário insere texto em um formato inválido. (Por exemplo, 06 para um ano em vez de 2006). 
Estado obrigatório O estado do widget quando o usuário não insere texto obrigatório no campo de texto. 


Estado Número mínimo de caracteres O estado do widget quando o usuário insere um número de caracteres inferior ao obrigatório no campo 
de texto. 


Estado Número máximo de caracteres O estado do widget quando o usuário insere um número de caracteres superior ao obrigatório no 
campo de texto. 


Estado Valor mínimo O estado do widget quando o usuário insere um valor menor que o valor obrigatório no campo de texto. (Aplica-se a 
validações do tipo inteiro, real e dados.) 


Estado Valor máximo O estado do widget quando o usuário insere um valor maior que o valor máximo permitido no campo de texto. (Aplica-se 
a validações do tipo inteiro, real e dados.) 


Sempre que um widget Campo de texto de validação entra em um desses estados por meio de interação do usuário, a lógica da estrutura do 
Spry aplica uma classe CSS específica ao recipiente HTML do widget em runtime. Por exemplo, se um usuário tenta enviar um formulário mas 
não insere texto em um campo de texto obrigatório, o Spry aplica uma classe ao widget que provoca a exibição da mensagem de erro “Um valor 
é necessário.” As regras que controlam o estilo e os estados de exibição das mensagens de erro estão no arquivo CSS que acompanha o widget, 
SpryValidationTextField.css. 


O HTML padrão do widget Campo de texto de validação, em geral dentro de um formulário, consiste em uma tag <span> de recipiente que fica 
em volta da tag <input> do campo de texto. O HTML do widget Campo de texto de validação também inclui tags de script no cabeçalho do 
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documento e após o markup HTML do widget. 


Para obter uma explicação mais abrangente sobre como o widget Campo de texto de validação funciona, inclusive uma anatomia completa do 
respectivo código, consulte www.adobe.com/go/learn dw sprytextfield br. 


Inserir e editar o widget Campo de texto de validação ano Anis 


Inserir o widget Campo de texto de validação 
1. Selecione Inserir > Spry > Campo de texto de validação do Spry. 
2. Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK. 


Nota: Para inserir um widget Campo de texto de validação, você também pode usar a categoria Spry no painel Inserir. 


Especificar um formato e um tipo de validação 
Você pode especificar diversos tipos de validação para o widget Campo de texto de validação. Por exemplo, você pode especificar um tipo de 
validação de cartão de crédito se o campo de texto aceitar números de cartão de crédito. 

1. Selecione um widget Campo de texto de validação na janela Documento. 

2. No Inspetor de propriedades (Janela > Propriedades), selecione um tipo de validação no menu Tipo. 

3. Se aplicável, selecione um formato no menu pop-up Formato. 


Na maioria dos tipos de validação, o campo de texto deve ter um formato padrão. Por exemplo, se você aplicar o tipo de validação inteiro a um 
campo de texto, o widget só validará se o usuário inserir números no campo de texto. Alguns tipos de validação, no entanto, permitem que você 
escolha o tipo de formato aceito em seu campo de texto. Esta tabela lista os formatos e tipos de validação disponíveis no Inspetor de 
propriedades: 


Tipo de validação Formato 

Nenhuma Nenhum formato específico necessário. 

Inteiro O campo de texto aceita somente números. 

Endereço de email O campo de texto aceita endereços de email que contêm O e 
um ponto (.) que sejam precedidos e seguidos por pelo menos 
uma letra. 

Data Os formatos variam. Faça a sua seleção no menu pop-up 


Formato do Inspetor de propriedades. 


Tempo Os formatos variam. Faça a sua seleção no menu pop-up 
Formato do Inspetor de propriedades. (“tt representa o formato 
am/pm; “?” representa o formato a/p.) 


Cartão de crédito Os formatos variam. Faça a sua seleção no menu pop-up 
Formato do Inspetor de propriedades. Você pode optar por 
aceitar todos os cartões de crédito ou especificar determinado 
tipo de cartão de crédito (MasterCard, Visa e outros). O campo 
de texto não aceita espaços nos números do cartão de crédito. 
Por exemplo: 4321 3456 4567 4567. 


CEP Os formatos variam. Faça a sua seleção no menu pop-up 
Formato do Inspetor de propriedades. 


Número de telefone O campo de texto aceita números de telefone formatados para 
os Estados Unidos e o Canadá (000) 000-0000 ou formatos 
personalizados. Se você selecionar um formato personalizado 
como opção, insira o formato, por exemplo 000.00(00), na caixa 
de texto Padrão. 


Número do CPF O campo de texto aceita números de CPF formatados como 000- 
00-0000. Se você desejar usar um formato diferente, selecione 
Personalizado como seu tipo de validação e especifique um 
padrão. O mecanismo de validação de padrões aceita somente 
caracteres ASCII. 


Moeda O campo de texto aceita moeda formatada como 1,000,000.00 
ou 1.000.000,00. 
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Número real/notação científica Valida vários tipos de números: inteiros (por exemplo, 1); valores 
flutuantes (por exemplo, 12.123); e valores flutuantes em notação 
científica (por exemplo, 1.212e+12, 1.221e-12 onde e é usado 
como uma potência de 10). 


Endereço IP Os formatos variam. Faça a sua seleção no menu pop-up 
Formato do Inspetor de propriedades. 


URL O campo de texto aceita URLs formatados como 
http://xxx.xxx.xxx ou ftp://xxx.xxx.xxx. 


Personalizada Permite que você especifique um formato e um tipo de validação 
personalizado. Insira o padrão do formato (e uma dica, se quiser) 
no Inspetor de propriedades. O mecanismo de validação de 
padrões aceita somente caracteres ASCII. 


Especificar quando a validação ocorre 
Você pode definir o ponto em que ocorre a validação: quando o visitante do site clica fora do widget, enquanto ele digita ou quando ele tenta 
enviar o formulário. 
1. Selecione um widget Campo de texto de validação na janela Documento. 
2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção que indica quando a validação deve ocorrer. Você pode selecionar 
todas as opções ou somente Enviar. 


Desfocar Valida sempre que o usuário clica fora do campo de texto. 
Alterar Valida quando o usuário altera o texto do campo de texto. 


Enviar Valida quando o usuário tenta enviar o formulário. A opção Enviar é selecionada por padrão e a seleção não pode ser cancelada. 


Especificar um número mínimo e máximo de caracteres 
Esta opção só está disponível para os tipos de validação Nenhum, Inteiro, Endereço de email e URL. 
1. Selecione um widget Campo de texto de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), insira um número na caixa Caracteres (mín.) ou Caracteres (máx.). Por exemplo, se 
você inserir 3 na caixa Caracteres (mín.), o widget validará apenas se o usuário inserir três ou mais caracteres. 


Especificar valores mínimos e máximos 
Esta opção está disponível apenas para os tipos de validação Inteiro, Tempo, Moeda e Número real/notação científica. 
1. Selecione um widget Campo de texto de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), insira um número na caixa Valor mínimo ou Valor máximo. Por exemplo, se você 
inserir 3 na caixa Valor mínimo, o widget validará somente se o usuário inserir o número 3 ou um valor superior (4, 5, 6 e assim por diante) 
no campo de texto. 


Exibir estados do widget na Visualização de design 
1. Selecione um widget Campo de texto de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que você deseja ver no menu pop-up Estados de visualização. 
Por exemplo, se você quiser ver o widget em seu estado válido, selecione Válido. 


Alterar o status obrigatório de um campo de texto 
Por padrão, todos os widgets Campo de texto de validação inseridos com o Dreamweaver requerem a entrada do usuário quando publicados em 
uma página da Web. Contudo, você determinar que o preenchimento dos campos de texto pelo usuário seja opcional. 

1. Selecione um widget Campo de texto de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opção Obrigatório de acordo com a sua preferência. 


Criar uma dica para um campo de texto 
Por haver inúmeros tipos de formatos para os campos de texto, é aconselhável colocar uma dica para que os usuários saibam qual formato 
devem inserir. Por exemplo, um campo de texto definido com o tipo de validação Número de telefone só aceitará números de telefone no formato 
(000) 000-0000. Você pode inserir essas amostras de números como uma dica para que o campo de texto exiba o formato correto quando o 
usuário carregar a página no navegador. 

1. Selecione um widget Campo de texto de validação na janela Documento. 

2. No Inspetor de propriedades (Janela > Propriedades), insira uma dica na caixa de texto Dica. 
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Bloquear caracteres inválidos 
Você pode impedir que os usuários insiram caracteres inválidos em um widget Campo de texto de validação. Por exemplo, se você selecionar 
essa opção para um widget definido com o tipo de validação Inteiro, nada será exibido no campo de texto se o usuário tentar digitar uma letra. 


1. Selecione um widget Campo de texto de validação na janela Documento. 
2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção Forçar padrão. 


Personalizar o widget Campo de texto de validação Para o início 


Embora o Inspetor de propriedades permita que você faça edições simples em um widget Campo de texto de validação, ele não aceita tarefas de 


estilização personalizadas. Você pode alterar o CSS do widget Campo de texto de validação para poder criar um widget que tenha o estilo de sua 
preferência. Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn dw sprytextfield custom br. 


Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationTextField.css. O Dreamweaver 
salva o arquivo SpryValidationTextField.css na pasta SpryAssets do site sempre que você cria um widget Campo de texto de validação do Spry. A 
consulta a este arquivo pode ser útil, pois ele contém informações comentadas sobre vários estilos que se aplicam ao widget. 


Embora você possa facilmente editar regras para o widget Campo de texto de validação diretamente no arquivo CSS relacionado, você 
também pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS atribuídas a diversos 
trechos do widget, especialmente se você usar o modo Atual do painel. 


Estilo do texto das mensagens de erro do widget Campo de texto de validação 
Por padrão, as mensagens de erro do widget Campo de texto de validação aparecem em vermelho com uma borda de 1 pixel em torno do texto. 


e Para alterar o estilo do texto de mensagem de erros de um widget Campo de texto de validação, use a seguinte tabela para localizar a regra 
de CSS apropriada e, em seguida, alterar as propriedades padrão ou adicionar seus próprios valores e propriedades de estilo de texto: 


Texto a ser alterado Regra de CSS relevante Propriedades relevantes a alterar 
.textfieldRequiredState . 

Texto da mensagem de erro .textfieldRequiredMsg, cor: £CC3333; borda: 1px solid 
.textfieldInvalidFormatState HCC3333; 


.textfieldInvalidFormatMsg, 
.textfieldMinValueState 
.textfieldMinValueMsg, 

. textfieldMaxValueState 

. textfieldMaxValueMsg, 
.textfieldMinCharsState 
.textfieldMinCharsMsg, 
.textfieldMaxCharsState 

. textfieldMaxCharsMsg 


Alterar as cores de fundo do widget Campo de texto de validação 
e Para alterar as cores de fundo do widget Campo de Texto de validação em vários estados, use esta tabela para localizar a regra de CSS 
apropriada e alterar os valores da cor de fundo padrão: 


Cor a alterar Regra de CSS relevante Propriedade relevante a alterar 
R .textfieldvValidState input, 

Cor de fundo do widget em estado input. textfieldvalidstate cor de fundo: HB8F5B1; 

válido 


input.textfieldRequiredState, 


Cor de fundo do widget em estado .textfieldRequiredState input, cor de fundo: 4FF9F9F; 
inválido input. textfieldInvalidFormatSt 

ate, 

.textfieldInvalidFormatState 

input, 


input. textfieldMinValueState, 
.textfieldMinValueState input, 
input. textfieldMaxValueState, 
.textfieldMaxValueState input, 
input. textfieldMinCharsState, 
.textfieldMinCharsState input, 
input. textfieldMaxCharsState, 
.textfieldMaxCharsState input 


. . .textfieldFocusState input, 
Cor de fundo quando o widget está em input. textfieldFocusState cor de fundo: 4FFFFCC; 


foco 


297 


A Adobe também recomenda 


As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 
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Trabalho com o widget Área de texto de validação do Spry 


Sobre o widget Área de texto de validação 
Inserir e editar o widget Área de texto de validação 
Personalizar o widget Área de texto de validação 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Área de texto de validação 


O widget Área de Texto de validação do Spry é uma área de texto que exibe estados válidos e inválidos quando o usuário insere algum tipo de 
texto. Se a área de texto for um campo obrigatório e o usuário não inserir texto, o widget retornará uma mensagem informando que é necessário 
inserir um valor. 


Este exemplo mostra um widget Área de texto de validação em vários estados: 


UBE WiLj receive visam) Sendiack uhenaves 
of him aotions costiicis wish tie expusced 
or 


q Fe cegos rega red 
I 


Ê 
A. Contador de caracteres restantes B. Widget Área de texto em foco, estado número máximo de caracteres C. Widget Área de texto em foco, 
estado válido D. Widget Área de texto, estado obrigatório E. Contador de caracteres digitados 


O widget Área de texto de validação inclui inúmeros estados (por exemplo, válido, inválido, estado obrigatório e assim por diante). Você pode 
alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validação desejados. Um widget Área 
de texto de validação pode validar em vários pontos; por exemplo, quando o usuário clica fora do widget, enquanto ele digita ou quando ele tenta 
enviar o formulário. 


Estado inicial O estado do widget quando a página é carregada no navegador ou quando o usuário redefine o formulário. 
Estado de foco O estado do widget quando o usuário coloca o ponto de inserção no widget. 

Estado válido O estado do widget depois que o usuário insere informações corretamente e o formulário pode ser enviado. 
Estado obrigatório O estado do widget quando o usuário não insere qualquer texto. 


Estado Número mínimo de caracteres O estado do widget quando o usuário insere menos caracteres do que o número mínimo de caracteres 
obrigatório na área de texto. 


Estado Número máximo de caracteres O estado do widget quando o usuário insere mais caracteres do que o número máximo de caracteres 
permitido na área de texto. 


Sempre que um widget Área de texto de validação entra em um desses estados por meio de interação do usuário, a lógica da estrutura do Spry 
aplica uma classe CSS específica ao recipiente HTML do widget em runtime. Por exemplo, se um usuário tentar enviar um formulário mas não 
inserir texto em uma área de texto obrigatória, o Spry aplicará uma classe ao widget que provocará a exibição da mensagem de erro “Um valor é 
necessário.” As regras que controlam o estilo e os estados de exibição das mensagens de erro estão no arquivo CSS que acompanha o widget, 
SpryValidationTextArea.css. 


O HTML padrão do widget Área de texto de validação, em geral dentro de um formulário, consiste em uma tag <span> de recipiente que fica em 
volta da tag <textarea> do campo de texto. O HTML do widget Área de texto de validação também inclui tags de script no cabeçalho do 
documento e após o markup HTML do widget. 


Para obter uma explicação mais abrangente de como o widget Área de texto de validação funciona, inclusive uma anatomia completa do 
respectivo código, consulte www.adobe.com/go/learn dw sprytextarea br. 


299 


Inserir e editar o widget Área de texto de validação ER 


Inserir o widget Área de texto de validação 
1. Selecione Inserir > Spry > Área de texto de validação do Spry. 
2. Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK. 


Nota: Para inserir um widget Área de texto de validação, você também pode usar a categoria Spry no painel Inserir. 


Especificar quando a validação ocorre 
Você pode definir o ponto em que ocorre a validação: quando o usuário clica fora do widget, quando ele digita ou quando ele tenta enviar o 
formulário. 
1. Selecione um widget Área de texto de validação na janela Documento. 
2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção Validar em que indica quando a validação deve ocorrer. Você 
pode selecionar todas as opções ou somente Enviar. 


Desfocar Valida sempre que o usuário clica fora do campo de texto. 
Alterar Valida quando o usuário altera o texto do campo de texto. 


Enviar Valida quando o usuário tenta enviar o formulário. A opção Enviar é selecionada por padrão e a seleção não pode ser cancelada. 


Especificar um número mínimo e máximo de caracteres 
1. Selecione um widget Área de texto de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), insira um número na caixa Caracteres (mín.) ou Caracteres (máx.). Por exemplo, se 
você inserir 20 na caixa Caracteres (mín.), o widget validará apenas se o usuário inserir 20 ou mais caracteres na área de texto. 


Adicionar um contador de caracteres 
Você pode adicionar um contador de caracteres que permita aos usuários saber quantos caracteres eles digitaram ou o número de caracteres 
restantes durante a inserção de texto. Por padrão, quando você adiciona um contador de caracteres, o contador aparece fora do canto inferior 
direito do widget. 

1. Selecione um widget Área de texto de validação na janela Documento. 

2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção Contagem de caracteres ou Caracteres restantes. 


Nota: A opção Caracteres restantes só fica disponível se você define um número máximo de caracteres permitidos. 


Exibir estados do widget na Visualização de design 
1. Selecione um widget Área de texto de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que você deseja ver no menu pop-up Estados de visualização. 
Por exemplo, se você quiser ver o widget em seu estado válido, selecione Válido. 


Alterar o status obrigatório de uma área de texto 
Por padrão, todos os widgets Área de texto de validação inseridos com o Dreamweaver requerem a entrada do usuário quando publicados em 
uma página da Web. Entretanto, você pode criar áreas de texto opcionais para validação. 

1. Selecione um widget Área de texto de validação na janela Documento. 

2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opção Obrigatório de acordo com a sua preferência. 


Criar uma dica para uma área de texto 
Você pode adicionar uma dica à área de texto (por exemplo, “Digite a descrição aqui”) para que os usuários saibam o tipo de informação que eles 
devem inserir na área de texto. A área de texto exibe o texto da dica quando o usuário carrega a página no navegador. 

1. Selecione um widget Área de texto de validação na janela Documento. 

2. No Inspetor de propriedades (Janela > Propriedades), insira uma dica na caixa de texto Dica. 


Bloquear caracteres extras 
Você pode impedir que os usuários insiram mais caracteres do que o número máximo permitido no widget Área de texto de validação. Por 
exemplo, se você selecionar essa opção para um widget definido para não aceitar mais de 20 caracteres, o usuário não poderá digitar mais de 20 
caracteres na área de texto. 

1. Selecione um widget Área de texto de validação na janela Documento. 

2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção Bloquear caracteres extras. 


300 


7 E A - ", P dec pica 
Personalizar o widget Area de texto de validação arare inicio 


Embora o Inspetor de propriedades permita que você faça edições simples em um widget Área de texto de validação, ele não aceita tarefas de 


estilização personalizadas. Você pode alterar o CSS do widget Área de texto de validação para poder criar um widget que tenha o estilo de sua 
preferência. Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn dw sprytextarea custom br. 


Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationTextArea.css. O Dreamweaver 
salva o arquivo SpryValidationTextArea.css na pasta SpryAssets do seu site sempre que você cria um widget Área de texto de validação do Spry. 
A consulta a este arquivo pode ser útil, pois ele contém informações comentadas sobre vários estilos que se aplicam ao widget. 


Embora você possa facilmente editar regras para o widget Área de texto de validação diretamente no arquivo CSS relacionado, você também 
pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos 
do widget, especialmente se você usar o modo Atual do painel. 


Estilo do texto das mensagens de erro do widget Área de texto de validação 
Por padrão, as mensagens de erro do widget Área de texto de validação aparecem em vermelho com uma borda de 1 pixel em torno do texto. 


e Para alterar o estilo do texto de mensagens de erro de um widget Área de texto de validação, use a seguinte tabela para localizar a regra de 
CSS apropriada e, em seguida, alterar as propriedades padrão ou adicionar seus próprios valores e propriedades de estilo do texto: 


Texto a ser alterado Regra de CSS relevante Propriedades relevantes a alterar 
.textareaRequiredState . 

Texto da mensagem de erro .textareaRequiredMsg, cor: £CC3333; borda: 1px solid 
.textareaMinCharsState HCC3333; 


.textareaMinCharsMsg, 
.textareaMaxCharsState 
. textareaMaxCharsMsg 


Alterar as cores de fundo do widget Área de texto de validação 
e Para alterar as cores de fundo do widget Área de texto de validação em vários estados, use esta tabela para localizar a regra de CSS 
apropriada e alterar os valores da cor de fundo padrão: 


Cor de fundo a alterar Regra de CSS relevante Propriedade relevante a alterar 
: .textareaValidState textarea, 

Cor de fundo do widget em estado textarea. textareaValidState cor de fundo: HB8F5B1; 

válido 


. textarea. textareaRequiredState 
Cor de fundo do widget em estado , -textareaRequiredState cor de fundo: 4FF9F9F; 
inválido textarea, 
textarea.textareaMinCharsState 
, -«textareaMinCharsState 
textarea, 
textarea.textareaMaxCharsState 
, -textareaMaxCharsState 


textarea 
. . . textareaFocusState textarea, 
Cor de fundo quando o widget está em textarea. textareaFocusState cor de fundo: HFFFFCC; 
foco 


A Adobe também recomenda 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Trabalho com o widget Confirmação de validação do Spry 


Sobre o widget Confirmação de validação 
Inserir e editar o widget Confirmação de validação 
Personalizar o widget Confirmação 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Confirmação de validação 


O widget Confirmação de validação é um campo de texto ou um campo de formulário de senha que exibe estados válidos ou inválidos quando o 
usuário insere um valor que não corresponde ao valor de um campo similar no mesmo formulário. Por exemplo, você pode adicionar um widget 
Confirmação de validação a um formulário que exige que o usuário digite novamente a senha especificada em um campo anterior. Se o usuário 
não digitar a senha exatamente conforme especificado antes, o widget retornará uma mensagem de erro informando que os valores não 
coincidem. 


Você também pode usar o widget Confirmação de validação em conjunto com um widget Campo de texto de validação para validar endereços de 
email. 


Nota: Familiarize-se com os widgets de validação do Spry antes de trabalhar com o widget Confirmação. Se você não estiver familiarizado com 
eles, consulte Trabalho com o widget Campo de texto de validação do Spry ou qualquer uma das outras visões gerais do widget de validação 
antes de continuar. Esta visão geral não apresenta todos os conceitos básicos do widget de validação. 


A ilustração a seguir mostra uma configuração típica do widget Confirmação: 


Password 


Retype Password -=s 


A. Um campo de senha ou o widget Validação de senha do Spry B. Widget Confirmação 
O widget Confirmação de validação inclui inúmeros estados (por exemplo, válido, inválido, obrigatório e assim por diante). Você pode alterar as 
propriedades desses estados editando o arquivo CSS correspondente (SpryValidationConfirm.css), de acordo com os resultados de validação 


desejados. Um widget Confirmação de validação pode validar em vários pontos; por exemplo, quando o visitante do site clica fora do widget, 
digita ou tenta enviar o formulário. 


Estado inicial Quando a página é carregada no navegador ou quando o usuário redefine o formulário. 
Estado de foco Quando o usuário coloca o ponto de inserção no widget. 
Estado válido Quando o usuário insere informações corretamente e o formulário pode ser enviado. 


Estado inválido Quando o usuário insere um texto que não corresponde ao inserido em um campo de texto anterior, no widget Campo de texto 
de validação ou no widget Senha de validação. 
Estado obrigatório Quando o usuário não insere texto obrigatório no campo de texto. 


Para obter uma explicação abrangente sobre como os widgets Confirmação de validação funcionam, bem como informações adicionais sobre a 
estrutura do widget, consulte www.adobe.com/go/learn dw spryconfirm br. 


E « - E sz E a P. iníci 
Inserir e editar o widget Confirmação de validação PRBAMIRE 


Inserir o widget Confirmação de validação 
1. Selecione Inserir > Spry > Confirmação de validação do Spry. 
2. Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK. 


Nota: Para inserir um widget Confirmação de validação, você também pode usar a categoria Spry no painel Inserir. 


Alterar o status obrigatório de um widget Confirmação de validação 
Por padrão, todos os widgets Confirmação de validação inseridos com o Dreamweaver requerem entrada do usuário quando publicados em uma 
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página da Web. Contudo, você pode determinar que o preenchimento dos campos de texto de confirmação pelo usuário seja opcional. 


1. Selecione um widget Confirmação de validação na janela Documento, clicando em sua aba azul. 
2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opção Obrigatório de acordo com a sua preferência. 


Especificar o campo de texto a ser validado 
1. Selecione um widget Confirmação de validação na janela Documento, clicando em sua aba azul. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione o campo de texto em relação ao qual deseja fazer a validação, 
selecionando um campo de texto no menu pop-up Validar em relação a. Todos os campos de texto com IDs exclusivas atribuídas a eles 
são exibidos como opções no menu pop-up. 


Exibir estados do widget na Visualização de design 
1. Selecione um widget Confirmação de validação na janela Documento, clicando em sua aba azul. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que você deseja ver no menu pop-up Estados de visualização. 
Por exemplo, se você quiser ver o widget em seu estado válido, selecione Válido. 


Especificar quando a validação ocorre 
Você pode definir o ponto em que ocorre a validação: quando o visitante do site clica fora do widget, enquanto ele digita ou quando ele tenta 
enviar o formulário. 


1. Selecione um widget Confirmação de validação na janela Documento, clicando em sua aba azul. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção que indica quando a validação deve ocorrer. Você pode selecionar 
todas as opções ou somente Enviar. 


Desfocar Valida sempre que o usuário clica fora do campo de texto de confirmação. 
Alterar Valida quando o usuário altera o texto do campo de texto de confirmação. 


Enviar Valida quando o usuário tenta enviar o formulário. A opção Enviar é selecionada por padrão e a seleção não pode ser cancelada. 


E . . . ER 
Personalizar o widget Confirmação ara o início 


Embora o Inspetor de propriedades permita que você faça edições simples em um widget Confirmação de validação, ele não aceita tarefas de 
estilização personalizadas. Você pode alterar o CSS do widget Confirmação de validação para criar um widget que tenha o estilo de sua 
preferência. Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn dw spryconfirm custom br. 


Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationConfirm.css. O Dreamweaver 
salva o arquivo SpryValidationConfirm.css na pasta SpryAssets do seu site sempre que você cria um widget Confirmação de validação do Spry. A 
consulta a este arquivo pode ser útil, pois ele contém informações comentadas sobre vários estilos que se aplicam ao widget. 


Embora você possa facilmente editar regras para o widget Confirmação de validação diretamente no arquivo CSS relacionado, você também 
pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos 
do widget, especialmente se você usar o modo Atual do painel. 


Estilo do widget Confirmação de validação (instruções gerais) 


1. Abra o arquivo SpryValidationConfirm.css. 


2. Localize a regra CSS para a parte do widget a ser alterada. Por exemplo, para alterar a cor de fundo do estado obrigatório do widget 
Confirmação, edite a regra input. confirmRequiredState no arquivo SpryValidationConfirm.css. 


3. Faça alterações no CSS e salve o arquivo. 


O arquivo SpryValidationConfirm.css contém comentários extensos, a explicação do código e a finalidade de determinadas regras. Para obter 
mais informações, consulte os comentários no arquivo. 


Estilo do texto das mensagens de erro do widget Confirmação de validação 
Por padrão, as mensagens de erro do widget Confirmação de validação aparecem em vermelho com uma borda sólida de 1 pixel em torno do 
texto. 


e Para alterar o estilo do texto de um widget Confirmação de validação, use a seguinte tabela para localizar a regra de CSS apropriada e, em 
seguida, alterar as propriedades padrão ou adicionar suas propriedades e valores de estilo de texto. 


Texto a ser alterado Regra de CSS relevante Propriedades relevantes a alterar 
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.confirmRequiredState 


Texto da mensagem de erro .confirmRequiredMsg, cor: £CC3333; borda: 1px solid 
.confirmInvalidState $CC3333; 
.confirmInvalidMsg 


Alterar as cores de fundo do widget Confirmação de validação 


e Para alterar as cores de fundo do widget Confirmação de validação em vários estados, use esta tabela para localizar a regra de CSS 
apropriada e alterar os valores da cor de fundo padrão. 


Cor a alterar Regra de CSS relevante Propriedade relevante a alterar 
. .confirmValidState input, 

Cor de fundo do widget em estado input .confirmvalidstate cor de fundo: 4B8F5B1; 

válido 


. input.confirmRequiredState, 
Cor de fundo do widget em estado .confirmRequiredState input, cor de fundo: 4FF9F9F; 


inválido input.confirmInvalidState, 
.confirmInvalidState input 


. ; .confirmFocusState input, 
Cor de fundo quando o widget está em input .confirmFocusstate cor de fundo: HFFFFCC; 


foco 


A Adobe também recomenda 
e Amostras do widget Confirmação de validação 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Trabalho com o widget Senha de validação do Spry 


Sobre o widget Senha de validação 
Inserir e editar o widget Senha de validação 
Personalizar o widget Senha de validação 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Senha de validação 


O widget Senha de validação do Spry é um campo de texto de senha que pode ser usado para forçar regras de senha (por exemplo, número e 
tipo de caracteres). O widget fornece mensagens de aviso ou de erro com base na entrada do usuário. 


Nota: Familiarize-se com os widgets de validação do Spry antes de trabalhar com o widget Senha. Se você não estiver familiarizado com eles, 
consulte Trabalho com o widget Campo de texto de validação do Spry ou qualquer uma das outras visões gerais do widget de validação antes de 
continuar. Esta visão geral não apresenta todos os conceitos básicos do widget de validação. 


Este exemplo mostra um widget Senha de validação em vários estados: 


=== SA 


A. Widget Senha, estado do número mínimo de caracteres B. Widget Senha, estado do número máximo de caracteres C. Widget Senha, estado 
obrigatório 


O widget Senha de validação inclui inúmeros estados (por exemplo, válido, obrigatório, número mínimo de caracteres e assim por diante). Você 
pode alterar as propriedades desses estados editando o arquivo CSS correspondente (SpryValidationPassword.css), de acordo com os resultados 
de validação desejados. Um widget Senha de validação pode validar em vários pontos; por exemplo, quando o visitante do site clica fora do 
campo de texto, digita ou tenta enviar o formulário. 


Estado inicial Quando a página é carregada no navegador ou quando o usuário redefine o formulário. 
Estado de foco Quando o usuário coloca o ponto de inserção no widget. 
Estado válido Quando o usuário insere informações corretamente e o formulário pode ser enviado. 


Estado de força inválida Quando o usuário insere um texto que não corresponde aos critérios de força do campo de texto de senha. Por 
exemplo, se você tiver especificado que a senha deve conter pelo menos duas letras maiúsculas e a senha inserida não tiver nenhuma ou tiver 
apenas uma letra maiúscula. 


Estado obrigatório Quando o usuário não insere texto obrigatório no campo de texto. 
Estado Número mínimo de caracteres Quando o usuário insere um número de caracteres inferior ao obrigatório no campo de texto de senha. 


Estado Número máximo de caracteres Quando o usuário insere um número de caracteres superior ao permitido no campo de texto de senha. 


Para obter uma explicação abrangente sobre como os widgets Senha de validação funcionam, bem como informações adicionais sobre a 
estrutura do widget, consulte www.adobe.com/go/learn dw sprypassword br. 


Para o início 


Inserir e editar o widget Senha de validação 


Inserir o widget Senha de validação 
1. Selecione Inserir > Spry > Senha de validação do Spry. 
2. Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK. 


Nota: Para inserir um widget Senha de validação, você também pode usar a categoria Spry no painel Inserir. 
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Alterar o status obrigatório de um widget Senha de validação 
Por padrão, todos os widgets Senha de validação inseridos com o Dreamweaver requerem entrada do usuário quando publicados em uma página 
da Web. Contudo, você determinar que o preenchimento dos campos de texto de senha pelo usuário seja opcional. 


1. Selecione um widget Senha de validação na janela Documento, clicando em sua aba azul. 
2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opção Obrigatório de acordo com a sua preferência. 


Exibir estados do widget na Visualização de design 
1. Selecione um widget Senha de validação na janela Documento, clicando em sua aba azul. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que você deseja ver no menu pop-up Estados de visualização. 
Por exemplo, se você quiser ver o widget em seu estado válido, selecione Válido. 


Especificar quando a validação ocorre 


Você pode definir o ponto em que ocorre a validação: quando o visitante do site clica fora do widget, enquanto ele digita ou quando ele tenta 
enviar o formulário. 


1. Selecione um widget Senha de validação na janela Documento, clicando em sua aba azul. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção que indica quando a validação deve ocorrer. Você pode selecionar 
todas as opções ou somente Enviar. 


Desfocar Valida sempre que o usuário clica fora do campo de texto de senha. 
Alterar Valida quando o usuário altera o texto do campo de texto de senha. 


Enviar Valida quando o usuário tenta enviar o formulário. A opção Enviar é selecionada por padrão e a seleção não pode ser cancelada. 


Definir força da senha 


A força da senha refere-se ao grau de correspondência entre as combinações de determinados caracteres e os requisitos de um campo de texto 
de senha. Por exemplo, se você tiver criado um formulário no qual os usuários selecionam uma senha, poderá forçá-los a incluir um determinado 
número de letras maiúsculas na senha, um determinado número de caracteres especiais e assim por diante. 


Nota: Por padrão, nenhuma das opções disponíveis é definida para o widget Senha. 


Mínimo/Máximo de caracteres 

Especifica o número mínimo e máximo de caracteres obrigatórios para que a senha seja válida. 

Mínimo/Máximo de letras 

Especifica o número mínimo e máximo de letras (a, b, c e assim por diante) obrigatórias para que a senha seja válida. 
Mínimo/Máximo de números 

Especifica o número mínimo e máximo de números (1, 2, 3 e assim por diante) obrigatórios para que a senha seja válida. 
Mínimo/Máximo de letras maiúsculas 

Especifica o número mínimo e máximo de letras maiúsculas (A, B, C e assim por diante) obrigatórias para que a senha seja válida. 
Mínimo/Máximo de caracteres especiais 

Especifica o número mínimo e máximo de caracteres especiais (!, OD, 4 e assim por diante) obrigatórios para que a senha seja válida. 


Deixar qualquer uma das opções acima em branco faz com que o widget não seja validado em relação ao critério em questão. Por exemplo, se 
você deixar a opção Mínimo/máximo de números em branco, o widget não procurará números na string da senha. 


1. Clique na aba azul do widget Senha de validação para selecioná-lo. 


2. Defina opções no Inspetor de propriedades (Janela > Propriedades), conforme desejar. Os números inseridos nos campos de opção são os 
números obrigatórios para a validação do widget. Por exemplo, se você inserir 8 na caixa Mínimo de caracteres, o widget não será 
validado, a não ser que o usuário insira pelo menos oito caracteres no campo de texto de senha. 


Es A 
Personalizar o widget Senha de validação di 


Embora o Inspetor de propriedades permita que você faça edições simples em um widget Senha de validação, ele não aceita tarefas de 
estilização personalizadas. Você pode alterar o CSS do widget Senha de validação para criar um widget que tenha o estilo de sua preferência. 
Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn dw sprypassword custom br. 


Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationPassword.css. O Dreamweaver 
salva o arquivo SpryValidationPassword.css na pasta SpryAssets do seu site sempre que você cria um widget Senha de validação do Spry. A 
consulta a este arquivo pode ser útil, pois ele contém informações comentadas sobre vários estilos que se aplicam ao widget. 


Embora você possa facilmente editar regras para o widget Senha de validação diretamente no arquivo CSS relacionado, você também pode 
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usar o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos do 
widget, especialmente se você usar o modo Atual do painel. 


Estilo do widget Senha de validação (instruções gerais) 


1. Abra o arquivo SpryValidationPassword.css. 


2. Localize a regra CSS para a parte do widget a ser alterada. Por exemplo, para alterar a cor de fundo do estado obrigatório do widget 
Senha, edite a regra input. passwordRequiredState no arquivo SpryValidationPassword.css. 


3. Faça alterações no CSS e salve o arquivo. 


O arquivo SpryValidationPassword.css contém comentários extensos, a explicação do código e a finalidade de determinadas regras. Para obter 
mais informações, consulte os comentários no arquivo. 


Estilo do texto das mensagens de erro do widget Senha de validação 
Por padrão, as mensagens de erro do widget Senha de validação aparecem em vermelho com uma borda sólida de 1 pixel em torno do texto. 


e Para alterar o estilo do texto de um widget Senha de validação, use a seguinte tabela para localizar a regra de CSS apropriada e, em 
seguida, alterar as propriedades padrão ou adicionar suas propriedades e valores de estilo de texto. 


Texto a ser alterado Regra de CSS relevante Propriedades relevantes a alterar 
.passwordRequiredState . 
Texto da mensagem de erro .passwordRequiredMsg, cor: CC3333; borda: 1px solid 
. passwordMinCharsState £CC3333; 


. passwordMinCharsMsg, 

. passwordMaxCharsState 

. passwordMaxCharsMsg, 
.passwordInvalidStrengthState 
. passwordInvalidStrengthMsg, 

. passwordCustomState 

. passwordCustomMsg 


Alterar as cores de fundo do widget Senha de validação 


e Para alterar as cores de fundo do widget Senha de validação em vários estados, use esta tabela para localizar a regra de CSS apropriada e 
alterar os valores da cor de fundo padrão. 


Cor a alterar Regra de CSS relevante Propriedade relevante a alterar 
. .passwordValidState input, 

Cor de fundo do widget em estado input. passwordvalidstate cor de fundo: 4B8F5B1; 

válido 


input. passwordRequiredState, 


Cor de fundo do widget em estado .passwordRequiredState input, cor de fundo: 4FF9F9F; 
inválido input. passwordInvalidStrengthS 

tate, 

.passwordInvalidStrengthState 

input, 


input. passwordMinCharsState, 
.passwordMinCharsState input, 
input. passwordCustomState, 
.passwordCustomState input, 
input. passwordMaxCharsState, 
. passwordMaxCharsState input 


; ; .passwordFocusState input, 
Cor de fundo quando o widget está em input. passwordFocusState cor de fundo: 4FFFFCC; 


foco 


A Adobe também recomenda 
e Amostras do widget Senha de validação 


As publicações do Twitter'M e do Facebook não são cobertas pelos termos do Creative Commons. 
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Trabalho com o widget Grupo de botões de opção de validação do 
Spry 


Sobre o widget Grupo de botões de opção de validação 
Inserir e editar o widget Grupo de botões de opção de validação 
Personalizar o widget Grupo de botões de opção 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Grupo de botões de opção de validação 


O widget Grupo de botões de opção de validação é um grupo de botões de opção com suporte de validação para a seleção. O widget força a 
seleção de um dos botões do grupo. 


Este exemplo mostra um widget Grupo de botões de opção de validação em vários estados. 


€ none INVALID € sports 8 
€ mesh € Finance € Travel 
€ music E technciogy E publishing 


A. Mensagens de erro do widget Grupo de botões de opção de validação B. Grupo do widget Grupo de botões de opção de validação 


O widget Grupo de botões de opção de validação inclui três estados além do estado inicial: válido, inválido e valor obrigatório. Você pode alterar 
as propriedades desses estados editando o arquivo CSS correspondente (SpryValidationRadio.css), de acordo com os resultados de validação 
desejados. Um widget Grupo de botões de opção de validação pode validar em diversos momentos: quando o usuário clica fora do widget, 
quando ele faz seleções ou quando ele tenta enviar o formulário. 


Estado inicial Quando a página é carregada no navegador ou quando o usuário redefine o formulário. 
Estado válido Quando o usuário faz uma seleção e o formulário pode ser enviado. 
Estado obrigatório Quando o usuário não faz uma seleção obrigatória. 


Estado inválido Quando o usuário seleciona um botão de opção que não tem um valor aceitável. 


Sempre que um widget Grupo de botões de opção de validação entra em um desses estados por meio de interação do usuário, a lógica da 
estrutura do Spry aplica uma classe CSS específica ao recipiente HTML do widget em runtime. Por exemplo, se um usuário tentar enviar um 
formulário mas não fizer seleções, o Spry aplicará uma classe ao widget que provocará a exibição da mensagem de erro “Faça uma seleção”. As 
regras que controlam o estilo e os estados de exibição das mensagens de erro estão no arquivo que acompanha o widget, 
SpryValidationRadio.css. 


O código HTML padrão do widget Grupo de botões de opção de validação, em geral dentro de um formulário, consiste em uma tag span de 
recipiente que fica em volta da tag input type="radio" do grupo de botões de opção. O código HTML do widget Grupo de botões de opção 
de validação também inclui tags de script no cabeçalho do documento e após o código HTML do widget. 


Para obter uma explicação mais abrangente sobre como o dispositivo Grupo de botões de opção de validação funciona, inclusive uma anatomia 
completa do respectivo código, consulte www.adobe.com/go/learn dw spryradio br. 


Para o início 


Inserir e editar o widget Grupo de botões de opção de validação 


Inserir o widget Grupo de botões de opção de validação 
1. Selecione Inserir > Spry > Grupo de botões de opção de validação do Spry. 
2. Na caixa de texto Nome, digite um nome para o grupo de botões de opção. 
3. Adicione ou exclua botões de opção do grupo clicando nos botões de adição (+) ou subtração (-). 
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4. Na coluna Rótulo, clique no nome de cada botão de opção para tornar o campo editável e atribua nomes exclusivos a cada botão. 
5. Na coluna Valor, clique em cada valor para tornar o campo editável e atribua um valor exclusivo a cada botão de opção. 


6. (Opcional) Clique em um botão de opção ou em seu valor para selecionar uma linha específica e, em seguida, clique nas setas para cima e 
para baixo para mover a linha para cima ou para baixo. 


7. Selecione o tipo de layout para o grupo de botões de opção. 


Quebras de linha Coloca cada botão de opção em uma linha separada usando quebras de linha (tags br). 


Tabela Coloca cada botão de opção em uma linha separada usando linhas individuais da tabela (tags tr). 


8. Clique em OK. 


Nota: Para inserir um widget Grupo de botões de opção, você também pode usar a categoria Spry no painel Inserir. 


Especificar quando a validação ocorre 
Você pode definir o ponto em que ocorre a validação: quando o usuário clica fora do widget, quando ele faz seleções ou quando ele tenta enviar 


o formulário. 
1. Selecione um widget Grupo de botões de opção de validação na janela Documento, clicando em sua aba azul. 
2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção que indica quando a validação deve ocorrer. Você pode selecionar 
todas as opções ou somente Enviar. 


Desfocar Valida sempre que o usuário clica fora do grupo de botões de opção. 
Alterar Valida quando o usuário faz seleções. 


Enviar Valida quando o usuário tenta enviar o formulário. A opção Enviar é selecionada por padrão e a seleção não pode ser cancelada. 


Exibir estados do widget na Visualização de design 
1. Selecione um widget Grupo de botões de opção de validação na janela Documento, clicando em sua aba azul. 
2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que você deseja ver no menu pop-up Estados de visualização. 
Por exemplo, selecione Inicial para ver o widget em seu estado inicial. 


Alterar o status obrigatório dos botões de opção 
Por padrão, os widgets Grupo de botões de opção de validação exigem que o usuário faça uma seleção antes de enviar o formulário. Entretanto, 
você pode fazer seleções opcionais para o usuário. 


1. Selecione um widget Grupo de botões de opção de validação na janela Documento, clicando em sua aba azul. 


2. No Inspetor de propriedades (Janela > Propriedades), desmarque a opção Obrigatório. 


Especificar um valor vazio ou inválido 

Você pode especificar um valor que será registrado como vazio ou inválido se o usuário selecionar um botão de opção associado a um desses 
valores. Se o usuário selecionar um botão de opção com um valor vazio, o navegador retornará a mensagem de erro "Faça uma seleção". Se o 
usuário selecionar um botão de opção com um valor inválido, o navegador retornará a mensagem de erro "Selecione um valor válido”. 


Categories: 
O) None O Sports 
O Health O Finance 
O music O Technology 


Please make a selection, 


Widget Grupo de botões de opção com um botão com valor vazio. 


1. No widget Grupo de botões de opção, selecione o botão que deseja usar para o botão vazio ou inválido. Ao especificar valores vazios ou 
inválidos para o widget, devem existir botões de opção correspondentes com esses valores já atribuídos. 


2. No Inspetor de propriedades (Janela > Propriedades) do widget, atribua ao botão de opção um valor marcado. Para criar um botão de 
opção com um valor vazio, digite none na caixa de texto Valor marcado. Para criar um botão de opção com um valor inválido, digite invalid 
na caixa de texto Valor marcado. 

3. Selecione o widget Grupo de botões de opção de validação inteiro clicando na aba azul. 
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4. No Inspetor de propriedades, especifique os valores vazios ou inválidos. Para criar um widget que exibe a mensagem de erro de valor vazio 
“Faça uma seleção", digite none na caixa de texto Valor vazio. Para criar um widget que exibe a mensagem de erro de valor inválido 
"Selecione um valor válido", digite invalid na caixa de texto Valor inválido. 


O botão de opção propriamente dito e o widget Grupo de botões de opção devem ter os valores none ou invalid atribuídos para que as 
mensagens de erro sejam exibidas corretamente. 


Personalizar o widget Grupo de botões de opção PRE NR 


Embora o Inspetor de propriedades permita que você faça edições simples em um widget Grupo de botões de opção de validação, ele não aceita 
tarefas de estilização personalizadas. Você pode alterar o CSS do widget Grupo de botões de opção de validação para criar um widget que tenha 
o estilo de sua preferência. Para obter uma lista mais avançada de tarefas de estilização, consulte 
www.adobe.com/go/learn dw spryradio custom br. 


Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationRadio.css. O Dreamweaver salva 
o arquivo SpryValidationRadio.css na pasta SpryAssets do seu site sempre que você cria um widget Grupo de botões de opção de validação do 
Spry. A consulta a este arquivo pode ser útil, pois ele contém informações comentadas sobre vários estilos que se aplicam ao widget. 


Embora seja possível editar facilmente as regras para o widget Grupo de botões de opção de validação diretamente no arquivo CSS 
relacionado, você também pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS 
atribuídas a diversos trechos do widget, especialmente se você usar o modo Atual do painel. 


Estilo do widget Grupo de botões de opção de validação (instruções gerais) 


1. Abra o arquivo SpryValidationRadio.css. 


2. Localize a regra CSS para a parte do widget a ser alterada. Por exemplo, para alterar a cor de fundo do estado obrigatório do widget Grupo 
de botões de opção, edite a regra radioRequiredState no arquivo SpryValidationRadio.css. 


3. Faça alterações na regra CSS e salve o arquivo. 


O arquivo SpryValidationRadio.css contém comentários extensos, a explicação do código e a finalidade de determinadas regras. Para obter mais 
informações, consulte os comentários no arquivo. 


Estilo do texto das mensagens de erro do widget Grupo de botões de opção de validação 
Por padrão, as mensagens de erro do widget Grupo de botões de opção de validação aparecem em vermelho com uma borda sólida de 1 pixel 
em torno do texto. 


e Para alterar o estilo do texto de um widget Grupo de botões de opção de validação, use a seguinte tabela para localizar a regra de CSS 
apropriada e, em seguida, alterar as propriedades padrão ou adicionar suas propriedades e valores de estilo de texto. 


Texto no qual aplicar o estilo Regra de CSS relevante Propriedades relevantes a alterar 
.radioRequiredState À 
Texto da mensagem de erro .radioRequiredMsg, cor: £CC3333; borda: 1px solid 
.radioInvalidState HCC3333; 
.radioInvalidMsg 


A Adobe também recomenda 


(ec As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 


310 


Trabalho com o widget Seleção de validação do Spry 


Sobre o widget Seleção de validação 
Inserir e editar o widget Seleção de validação 
Personalizar o widget Seleção de validação 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Ê ” z as Para o início 
Sobre o widget Seleção de validação 
O widget Seleção de validação do Spry é um menu suspenso que exibe estados válidos e inválidos quando o usuário faz uma seleção. Por 
exemplo, você pode inserir um widget Seleção de validação que contenha uma lista de estados, agrupados em diferentes seções e divididos por 
linhas horizontais. Se o usuário selecionar acidentalmente uma das linhas divisórias e não um dos estados, o widget Seleção de validação 
retornará uma mensagem ao usuário informando que a seleção é inválida. 


Este exemplo mostra um widget Seleção de validação expandido e também recolhido em vários estados: 


Please choose your state =] 


A. Widget Seleção de validação em foco B. Widget Seleção, estado válido C. Widget Seleção, estado obrigatório D. Widget Seleção, estado 
inválido 


O widget Seleção de validação inclui inúmeros estados (por exemplo, válido, inválido, valor obrigatório e assim por diante). Você pode alterar as 
propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validação desejados. Um widget Seleção de 
validação pode validar em vários pontos; por exemplo, quando o usuário clica fora do widget, quando ele faz seleções ou quando ele tenta enviar 
o formulário. 


Estado inicial O estado do widget quando a página é carregada no navegador ou quando o usuário redefine o formulário. 
Estado de foco O estado quando o usuário clica no widget. 

Estado válido O estado do widget depois que o usuário seleciona um item válido e o formulário pode ser enviado. 
Estado inválido O estado do widget depois que o usuário seleciona um item inválido. 


Estado obrigatório O estado do widget quando o usuário não seleciona um item válido. 


Sempre que um widget Seleção de validação entra em um desses estados por meio de interação do usuário, a lógica da estrutura do Spry aplica 
uma classe CSS específica ao recipiente HTML do widget em runtime. Por exemplo, se um usuário tentar enviar um formulário mas não 
selecionar um item no menu, o Spry aplicará uma classe ao widget para que ele exiba a mensagem de erro “Selecione um item.” As regras que 
controlam o estilo e os estados de exibição das mensagens de erro estão no arquivo CSS que acompanha o widget, SpryValidationSelect.css. 


O HTML padrão do widget Seleção de validação, em geral dentro de um formulário, consiste em uma tag <span> de recipiente que fica em volta 
da tag <select> da área de texto. O HTML do widget Seleção de validação também inclui tags de script no cabeçalho do documento e após o 
markup HTML do widget. 


Para obter uma explicação abrangente sobre como o widget Seleção de validação funciona, inclusive uma anatomia completa do respectivo 
código, consulte www.adobe.com/go/learn dw spryselect br. 


Para o início 


Inserir e editar o widget Seleção de validação 


Inserir o widget Seleção de validação 
1. Selecione Inserir > Spry > Seleção de validação do Spry. 
2. Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK. 
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3. Na Visualização de código, adicione tags de opção que contenham valores e itens de menu. O Dreamweaver não faz isso 
automaticamente. Para obter mais informações, consulte o tópico anterior. 


Nota: Para inserir um widget Seleção de validação, você também pode usar a categoria Spry no painel Inserir. 


Especificar quando a validação ocorre 
Você pode definir o ponto em que ocorre a validação: quando o usuário clica fora do widget, quando ele digita ou quando ele tenta enviar o 
formulário. 

1. Selecione um widget Seleção de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção que indica quando a validação deve ocorrer. Você pode selecionar 
todas as opções ou somente Enviar. 


Desfocar Valida sempre que o usuário clica fora do widget. 
Alterar Valida quando o usuário faz seleções. 


Enviar Valida quando o usuário tenta enviar o formulário. A opção Enviar é selecionada por padrão e a seleção não pode ser cancelada. 


Exibir estados do widget na Visualização de design 
1. Selecione um widget Seleção de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que você deseja ver no menu pop-up Estados de visualização. 
Por exemplo, se você quiser ver o widget em seu estado válido, selecione Válido. 


Proibir ou permitir valores em branco 
Por padrão, todos os widgets Seleção de validação que você insere com o Dreamweaver exigem que os usuários selecionem itens de menu que 
tenham um valor associado quando o widget é publicado em uma página da Web. Entretanto, você pode desativar essa opção. 

1. Selecione um widget Seleção de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque a opção Não permitir valores em branco, de acordo com a sua 
preferência. 


Especificar um valor inválido 

Você pode especificar um valor que será registrado como inválido se o usuário selecionar um item de menu que esteja associado a esse valor. 
Por exemplo, se você especificar -1 como um valor inválido e atribuir o valor a uma tag de opção, o widget retornará uma mensagem de erro se o 
usuário selecionar esse item de menu. 


<option value="-1"> -.-. 0222202220 </option> 


1. Selecione um widget Seleção de validação na janela Documento. 
2. No Inspetor de propriedades (Janela > Propriedades), insira um número para usar como um valor inválido na caixa Valor inválido. 


5 õ Ag E =” P. iníci 
Personalizar o widget Seleção de validação cdi 


Embora o Inspetor de propriedades permita que você faça edições simples em um widget Seleção de validação, ele não aceita tarefas de 
estilização personalizadas. Você pode alterar o CSS do dispositivo Seleção de validação para criar um dispositivo que tenha o estilo de sua 
preferência. 


Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryValidationSelect.css. O Dreamweaver salva 
o arquivo SpryValidationSelect.css na pasta SpryAssets do seu site sempre que você cria um widget Seleção de validação do Spry. A consulta a 
este arquivo pode ser útil, pois ele contém informações comentadas sobre vários estilos que se aplicam ao widget. 


Embora você possa facilmente editar regras para o widget Seleção de validação diretamente no arquivo CSS relacionado, você também pode 
usar o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos do 
widget, especialmente se você usar o modo Atual do painel. 


Estilo do texto das mensagens de erro do widget Seleção de validação 
Por padrão, as mensagens de erro do widget Seleção de validação aparecem em vermelho com uma borda de 1 pixel em torno do texto. 


e Para alterar o estilo do texto de mensagens de erros de um widget Seleção de validação, use a seguinte tabela para localizar a regra de 
CSS apropriada e, em seguida, alterar as propriedades padrão ou adicionar suas propriedades e valores de estilo de texto: 


Texto no qual aplicar o estilo Regra de CSS relevante Propriedades relevantes a alterar 


.selectRequiredState . 
Texto da mensagem de erro cor: £CC3333; borda: 1px solid 
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.selectRequiredMsg, 
.selectInvalidState HCC3333; 
.selectInvalidMsg 


Alterar as cores de fundo do widget Seleção de validação 
e Para alterar as cores de fundo do widget Seleção de validação em vários estados, use esta tabela para localizar a regra de CSS apropriada 
e alterar os valores da cor de fundo padrão: 


Cor de fundo a alterar Regra de CSS relevante Propriedade relevante a alterar 
, .selectValidState select, 

Cor de fundo do widget em estado select. selectValidState cor de fundo: 4B8F5B1; 

válido 


. select.selectRequiredState, 
Cor de fundo do widget em estado .selectRequiredState select, cor de fundo: 4FF9F9F; 


inválido select.selectInvalidState, 
.selectInvalidState select 


. ; .selectFocusState select, 
Cor de fundo quando o widget está em select. selectFocusState cor de fundo: HFFFFCC; 


foco 


A Adobe também recomenda 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Trabalho com o widget Acordeão do Spry 


Sobre o widget Acordeão 
Inserir e editar o widget Acordeão 
Personalizar o widget Acordeão 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Acordeão 
O widget Acordeão é um conjunto de painéis flexíveis que podem armazenar um volume grande de conteúdo em um espaço compacto. Os 
visitantes do site clicam na aba do painel para ocultar ou revelar o conteúdo armazenado no acordeão. Os painéis do acordeão se expandem ou 


contraem de acordo com a aba em que o visitante clica. Em um acordeão, somente um painel de conteúdo fica aberto e visível em determinado 
momento. Este exemplo mostra um widget Acordeão com o primeiro painel expandido: 


A— Panel 1 | 
Panel 1 content 

8 He 
Panel 2 
Panel 3 
Panel 4 


A. Aba do painel Acordeão B. Conteúdo do painel Acordeão C. Painel Acordeão (aberto) 


O HTML padrão do widget Acordeão é composto de uma tag div externa que contém todos os painéis, uma tag div para cada painel, um div 
de cabeçalho e um div de conteúdo dentro da tag de cada painel. Um widget Acordeão pode conter inúmeros painéis individuais. O HTML do 
widget Acordeão também inclui tags de script no cabeçalho do documento e após o markup HTML do acordeão. 


Para obter uma explicação abrangente sobre como o widget Acordeão funciona, inclusive uma anatomia completa do respectivo código, consulte 
www.adobe.com/go/learn dw spryaccordion br. 


Para ter acesso ao tutorial sobre como trabalhar com widgets Acordeão consulte www.adobe.com/go/vid0167 br. 


a ERR 
Inserir e editar o widget Acordeão Es 


Inserir o widget Acordeão 
e Selecione Inserir > Spry > Acordeão do Spry. 


Nota: Para inserir um widget Acordeão, você também pode usar a categoria Spry no painel Inserir. 


Adicionar um painel a um widget Acordeão 
1. Selecione um widget Acordeão na janela Documento. 
2. Clique no botão de adição (+) de Painéis no Inspetor de propriedades (Janela > Propriedades). 
3. (Opcional) Altere o nome do painel selecionando e alterando o texto desejado do painel na Visualização de design. 


Excluir painel de um widget Acordeão 
1. Selecione um widget Acordeão na janela Documento. 


2. No menu Painéis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel a ser excluído e clique no botão de 
subtração (-). 


Abrir painel para edição 
e Siga um destes procedimentos: 
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e Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualização de design e clique no ícone em forma de olho que 
aparece à direita da aba. 


e Selecione um widget Acordeão na janela Documento e clique no nome do painel para editá-lo no menu Painéis do Inspetor de 
propriedades (Janela > Propriedades). 


Alterar a ordem dos painéis 
1. Selecione um widget Acordeão na janela Documento. 
2. No Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel do Acordeão que você deseja mover. 
3. Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo. 


5 PERA 
Personalizar o widget Acordeão PRE 


Embora o Inspetor de propriedades permita que você faça edições simples em um widget Acordeão, ele não aceita tarefas de estilização 
personalizadas. Você pode alterar as regras de CSS para o dispositivo Acordeão e criar um acordeão com o estilo de sua preferência. 


Para obter uma referência rápida sobre como alterar as cores no dispositivo Acordeão, consulte o Guia rápido para painéis com guias, acordeões 
e contrair painéis de David Powers. 


Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn dw spryaccordion custom br. 


Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryAccordion.css. O Dreamweaver salva o 
arquivo SpryAccordion.css na pasta SpryAssets do seu site sempre que você cria um widget Acordeão do Spry. Esse arquivo também contém 
informações comentadas sobre vários estilos que se aplicam ao widget, o que poderá ser útil. 


Embora você possa facilmente editar regras para o widget Acordeão diretamente no arquivo CSS, você também pode usar o painel Estilos 
CSS para editar o CSS do acordeão. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos do widget, 
especialmente se você usar o modo Atual do painel. 


Criar o estilo do texto do widget Acordeão 
Para criar o estilo do texto de um widget Acordeão, configure as propriedades do recipiente inteiro do widget Acordeão ou configure as 
propriedades dos componentes do widget individualmente. 


e Para alterar o estilo do texto de um widget Acordeão, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, 
adicionar os valores e as propriedades de estilo do seu próprio texto: 


Texto a ser alterado Regra de CSS relevante Exemplo de propriedades e valores a 
adicionar 


o RD no . .Accordion ou .AccordionPanel l . 
Texto no acordeão inteiro (inclui aba e fonte: Arial; font-size:medium; 


painel de conteúdo) 


. .AccordionPanelTab . ) À 
Texto somente nas abas do painel do fonte: Arial; font-size:medium; 


acordeão 


es E .AccordionPanelContent . . . 
Texto somente nos painéis de conteúdo fonte: Arial; font-size:medium; 


do acordeão 


Alterar as cores de fundo do widget Acordeão 
e Para alterar as cores de fundo de diversas partes de um widget Acordeão, use a seguinte tabela para localizar a regra de CSS apropriada e, 
em seguida, adicione ou altere os valores e as propriedades da cor de fundo: 


Parte do widget a alterar Regra de CSS relevante Exemplo de propriedade e valor a 
adicionar ou alterar 


. .AccordionPanelTab . 
Cor de fundo das abas do painel do cor de fundo: 4CCCCCC; (este é o valor 


acordeão padrão.) 


es , .AccordionPanelContent 
Cor de fundo dos painéis de conteúdo cor de fundo: 4CCCCCC; 


do acordeão 


. . .AccordionPanelOpen ; 
Cor de fundo do painel do acordeão .AccordionPanelTab cor de fundo: HEEEEEE; (este é o valor 
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aberto padrão.) 


.AccordionPanelTabHover 


Cor de fundo das abas do painel cor: 4555555; (este é o valor padrão.) 
focalizado 

. .AccordionPanelOpen ; E 
Cor de fundo da aba do painel aberto .AccordionPanelTabHover cor: 4555555; (este é o valor padrão.) 
focalizado 


Restringir a largura de um acordeão 
Por padrão, o widget Acordeão se expande até ocupar o espaço disponível. Entretanto, você pode restringir a largura de um widget configurando 
uma propriedade de largura para o recipiente do acordeão. 


1. Abra o arquivo SpryCcordion.css e localize a regra de CSS .Accordion. Essa é a regra que define propriedades para o principal elemento 
recipiente do widget Acordeão. 


Você também pode localizar a regra selecionando o widget Acordeão e verificando o painel Estilos CSS (Janela > Estilos CSS). Verifique 
se o painel está definido no modo Atual. 


2. Adicione um valor e uma propriedade de largura à regra. Por exemplo largura: 300px;. 


A Adobe também recomenda 


As publicações do Twitter"! e do Facebook não são cobertas pelos termos do Creative Commons. 
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Trabalho com o widget Painel flexível do Spry 


Sobre o widget Painel flexível 
Inserir e editar o widget Painel flexível 
Personalizar o widget Painel flexível 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Painel flexível 
O widget Painel flexível é um painel que pode armazenar conteúdo em um espaço compacto. Para ocultar ou expor o conteúdo armazenado no 


Painel flexível, o usuário clica na aba do widget. Este exemplo mostra um widget Painel flexível, expandido e recolhido: 


Tab Tab 


Panel content 


Panel « 
Panel content 
Panel content 
A 8 


A. Expandido B. Recolhido 


O HTML do widget Painel flexível compõe-se de uma tag div externa que contém a tag div do conteúdo e a tag div do recipiente da aba. O 
HTML do widget Painel flexível também inclui tags de script no cabeçalho do documento e após o markup HTML do Painel flexível. 


Para obter uma explicação mais abrangente sobre como o widget Painel flexível funciona, inclusive uma anatomia completa do código desse 
widget, consulte www.adobe.com/go/learn dw sprycollapsiblepanel br. 


E « - « , P iníci 
Inserir e editar o widget Painel flexível E 


Inserir o widget Painel flexível 
e Selecione Inserir > Spry > Painel flexível do Spry. 


Nota: Para inserir um widget Painel flexível, você também pode usar a categoria Spry no painel Inserir. 


Abrir ou fechar o Painel flexível na Visualização de design 
* Siga um destes procedimentos: 


e Mova o ponteiro do mouse sobre a aba do painel na Visualização de design e clique no ícone em forma de olho que aparece à direita 
da aba. 


* Selecione um widget Painel flexível na janela Documento e selecione Aberto ou Fechado no menu pop-up Exibir, no Inspetor de 
propriedades (Janela > Propriedades). 


Definir o estado padrão de um widget Painel flexível 
Você pode definir o estado padrão (aberto ou fechado) do widget Painel flexível quando a página da Web é carregada no navegador. 


1. Selecione um widget Painel flexível na janela Documento. 
2. No Inspetor de propriedades (Janela > Propriedades), selecione Aberto ou Fechado no menu pop-up Estado padrão. 


Ativar ou desativar a animação do widget Painel flexível 
Por padrão, quando você ativa animação para um widget Painel flexível, o painel abre e fecha lenta e gradualmente quando o visitante do site 
clica na aba do painel. Se você desativa a animação, o painel flexível abre e fecha abruptamente. 


1. Selecione um widget Painel flexível na janela Documento. 
2. No Inspetor de propriedades (Janela > Propriedades), marque ou desmarque Ativar animação. 


Para o início 
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Personalizar o widget Painel flexível 


Embora o Inspetor de propriedades permita que você faça edições simples em um widget Painel flexível, ele não aceita tarefas de estilização 
personalizadas. Você pode alterar as regras de CSS para o dispositivo Painel flexível e criar um painel flexível com o estilo de sua preferência. 


Para obter uma referência rápida sobre como alterar as cores no dispositivo Contrair painel, consulte o Guia rápido para painéis com guias, 
acordeões e contrair painéis de David Powers. 


Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learm dw sprycollapsiblepanel custom br. 


Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryCollapsiblePanel.css. O Dreamweaver 
salva o arquivo SpryCollapsiblePanel.css na pasta SpryAssets do site sempre que você cria um widget Painel flexível do Spry. Esse arquivo 
também contém informações úteis comentadas sobre vários estilos que se aplicam ao widget. 


Embora você possa facilmente editar regras para o widget Painel flexível diretamente no arquivo CSS relacionado, você também pode usar o 
painel Estilos CSS para editar o CSS do painel flexível. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos do 
widget, especialmente se você usar o modo Atual do painel. 


Criar estilo de texto do widget Painel flexível 
Para criar o estilo do texto de um widget Painel flexível, configure as propriedades do recipiente inteiro do widget Painel flexível ou configure as 
propriedades dos componentes do widget individualmente. 


e Para alterar o formato do texto de um widget Painel flexível, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, 
adicionar os seus próprios valores e propriedades de estilo do texto: 


Estilo a alterar Regra de CSS relevante Exemplo de propriedades e valores a 
adicionar ou alterar 


. en RÃ .CollapsiblePanel . . . 
Texto no painel flexível inteiro fonte: Arial; font-size:medium; 


. .CollapsiblePanelTab . a 
Texto na aba do painel apenas fonte: bold 0.7em sans-serif; (este é o 


valor padrão.) 


. ' .CollapsiblePanelContent . . . 
Texto no painel de conteúdo apenas fonte: Arial; font-size:medium; 


Alterar as cores de fundo do widget Painel flexível 
e Para alterar as cores de fundo de diversas partes de um widget Painel flexível, use a seguinte tabela para localizar a regra de CSS 
apropriada e, em seguida, adicionar ou alterar as propriedades e os valores da cor de fundo de sua preferência: 


Cor a alterar Regra de CSS relevante Exemplo de propriedade e valor a 
adicionar ou alterar 


.CollapsiblePanelTab 


Cor de fundo da aba do painel cor de fundo: 4DDD; (este é o valor 
padrão.) 
. , .CollapsiblePanelContent 
Cor de fundo do painel de conteúdo cor de fundo: 4DDD; 
. .CollapsiblePanelopen E 
Cor de fundo da aba quando o painel .CollapsiblePanelTab cor de fundo: 4EEE; (este é o valor 
está aberto padrão.) 
. .CollapsiblePanelTabHover, . 
Cor de fundo da aba do painel aberta .CollapsiblePanelopen cor de fundo: 4CCC; (este é o valor 
quando o ponteiro do mouse passa por .CollapsiblePanelTabHover padrão.) 


cima 


Limitar a largura de um painel flexível 
Por padrão, o widget Painel flexível se expande até ocupar o espaço disponível. Entretanto, você pode restringir a largura de um widget Painel 
flexível configurando uma propriedade de largura para o recipiente do painel flexível. 


1. Localize a regra CSS do arquivo .CollapsiblePanel abrindo o arquivo SpryCollapsible Panel.css. Essa regra define propriedades para o 
principal elemento recipiente do widget Painel flexível. 


Você também pode localizar a regra selecionando o widget Painel flexível e verificando o painel Estilos CSS (Janela > Estilos CSS). 
Verifique se o painel está definido no modo Atual. 
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2. Adicione um valor e uma propriedade de largura à regra. Por exemplo largura: 300px;. 


A Adobe também recomenda 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Trabalho com o widget Caixa de seleção de validação do Spry 


Sobre o widget Caixa de seleção de validação 
Inserir e editar o widget Caixa de seleção de validação 
Personalizar mensagens de erro do widget Caixa de seleção de validação 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Caixa de seleção de validação 


O widget Caixa de seleção de validação é uma caixa de seleção ou um grupo de caixas de seleção em formato HTML que exibe estados válidos 
e inválidos quando o usuário marca ou não marca uma caixa de seleção. Por exemplo, você pode adicionar um widget Caixa de seleção de 
validação a um formulário no qual o usuário precisa fazer três seleções. Se o usuário não fizer as três seleções, o widget retornará uma 
mensagem informando que o número mínimo de seleções não foi cumprido. 


Este exemplo mostra um widget Caixa de seleção de validação em vários estados: 


FP Entertainmers T computers F sports 
D mesth [ Finance E trovel 

A 
T music r É publshung 


[Minimum number cf select; 


A. Grupo de widgets Caixa de seleção de validação, estado número mínimo de seleções B. Widget Caixa de seleção de validação, estado 
obrigatório 


O widget Caixa de seleção de validação inclui inúmeros estados (por exemplo, válido, inválido, valor obrigatório e assim por diante). Você pode 
alterar as propriedades desses estados usando o Inspetor de propriedades, de acordo com os resultados de validação desejados. Um widget 
Caixa de seleção de validação pode validar em vários pontos; por exemplo, quando o usuário clica fora do widget, quando ele faz seleções ou 
quando ele tenta enviar o formulário. 


Estado inicial O estado do widget quando a página é carregada no navegador ou quando o usuário redefine o formulário. 
Estado válido O estado do widget depois que o usuário faz uma seleção ou corrige inúmeras seleções, e o formulário pode ser enviado. 
Estado obrigatório O estado do widget quando o usuário não faz uma seleção obrigatória. 


Estado Número mínimo de seleções O estado do widget quando o usuário marca menos caixas de seleção do que o número mínimo 
obrigatório. 


Estado Número máximo de seleções O estado do widget quando o usuário marca mais caixas de seleção do que o número máximo 
obrigatório. 


Sempre que um widget Caixa de seleção de validação entra em um desses estados por meio de interação do usuário, a lógica da estrutura do 
Spry aplica uma classe CSS específica ao recipiente HTML do widget em runtime. Por exemplo, se um usuário tentar enviar um formulário mas 
não fizer seleções, o Spry aplicará uma classe ao widget que provocará a exibição da mensagem de erro “Faça uma seleção.” As regras que 
controlam o estilo e os estados de exibição das mensagens de erro estão no arquivo CSS que acompanha o widget, SpryValidationCheckbox.css. 


O HTML padrão do widget Caixa de seleção de validação, em geral dentro de um formulário, consiste em uma tag <span> de recipiente que fica 
em volta da tag <input type="checkbox"> da caixa de seleção. O HTML do widget Caixa de seleção de validação também inclui tags de script no 
cabeçalho do documento e após o markup HTML do widget. 


Para obter uma explicação abrangente sobre como o widget Caixa de seleção de validação funciona, inclusive uma anatomia completa do 
respectivo código, consulte www.adobe.com/go/learn dw sprycheckbox br. 


« E E a sá E mM, P. iníci 
Inserir e editar o widget Caixa de seleção de validação SA 


Inserir o widget Caixa de seleção de validação 
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1. Selecione Inserir > Spry > Caixa de seleção de validação do Spry. 
2. Preencha a caixa de diálogo Atributos de acesso a tag input e clique em OK. 


Nota: Para inserir um widget Caixa de seleção de validação, você também pode usar a categoria Spry no painel Inserir. 


Especificar quando a validação ocorre 
Você pode definir o ponto em que ocorre a validação: quando o usuário clica fora do widget, quando ele faz seleções ou quando ele tenta enviar 
o formulário. 
1. Selecione um widget Caixa de seleção de validação na janela Documento. 
2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção que indica quando a validação deve ocorrer. Você pode selecionar 
todas as opções ou somente Enviar. 


Desfocar Valida sempre que o usuário clica fora da caixa de seleção. 
Alterar Valida quando o usuário faz seleções. 


Enviar Valida quando o usuário tenta enviar o formulário. A opção Enviar é selecionada por padrão e a seleção não pode ser cancelada. 


Especificar uma faixa mínima e máxima de seleções 
Por padrão, um widget Caixa de seleção de validação é definido como obrigatório. No entanto, se você inserir inúmeras caixas de seleção na 
página, poderá especificar uma faixa mínima e máxima de seleções. Por exemplo, se você tem seis caixas de seleção dentro da tag <span> para 
um único widget Caixa de seleção de validação e deseja garantir que o usuário selecione ao menos três, você pode definir essa preferência para 
o widget inteiro. 

1. Selecione um widget Caixa de seleção de validação na janela Documento. 

2. No Inspetor de propriedades (Janela > Propriedades), selecione a opção Forçar faixa. 

3. Insira um número mínimo ou máximo (ou ambos) de caixas de seleção que o usuário deve marcar. 


Exibir estados do widget na Visualização de design 
1. Selecione um widget Caixa de seleção de validação na janela Documento. 


2. No Inspetor de propriedades (Janela > Propriedades), selecione o estado que você deseja ver no menu pop-up Estados de visualização. 
Por exemplo, selecione Inicial para ver o widget em seu estado inicial. 


A = = =» é às P Ratar 
Personalizar mensagens de erro do widget Caixa de seleção de validação ad 


Por padrão, as mensagens de erro do widget Caixa de seleção de validação aparecem em vermelho com uma borda de 1 pixel em torno do texto. 
Você pode alterar o CSS do widget Caixa de seleção de validação para criar um widget que tenha o estilo de sua preferência. Para obter uma 
lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn dw sprycheckbox custom br. 


1. Abra o arquivo SpryValidationCheckbox.css. 


O Dreamweaver salva o arquivo SpryValidationCheckbox.css na pasta SpryAssets do seu site sempre que você cria um widget Caixa de 
seleção de validação do Spry. É aconselhável consultar este arquivo, pois ele contém informações comentadas sobre vários estilos que se 
aplicam ao widget. 


2. Use esta tabela para localizar a regra de CSS apropriada e, em seguida, alterar as propriedades padrão ou adicionar seus próprios valores 
e propriedades de estilo ao texto: 


Texto no qual aplicar o estilo Regra de CSS relevante Propriedades relevantes a alterar 
.checkboxRequiredState . 

Texto da mensagem de erro .checkboxRequiredMsg, cor: 4C3333; borda: 1px solid 
-.cCheckboxMinSelectionsState HCC3333; 


.checkboxMinSelectionsMsg, 
-.checkboxMaxSelectionsState 
.checkboxMaxSelectionsMsg 


Embora você possa facilmente editar regras para o widget Caixa de seleção de validação diretamente no arquivo CSS relacionado, você 
também pode usar o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS atribuídas a 
diversos trechos do widget, especialmente se você usar o modo Atual do painel. 


A Adobe também recomenda 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 


321 


Avisos legais | Política de privacidade on-line 


322 


Configurar propriedades de codificação e título de uma página 


As opções de Propriedades de codificação/título de página permitem especificar o tipo de codificação de documento do idioma usado para criar 
páginas da Web, bem como especificar qual formulário de normalização unicode será usado com esse tipo de codificação. 


1. Selecione Modificar > Propriedades da página ou clique no botão Propriedades da página no Inspetor de propriedades de texto. 


2. Escolha a categoria Título/codificação e defina as opções. 
Título Especifica o título de página a ser exibido na barra de título da janela Documento e da maioria das janelas de navegador. 


Tipo de documento (DTD) Especifica uma definição de tipo de documento. Por exemplo, você pode criar um documento HTML compatível 
com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no menu pop-up. 


Codificação Especifica a codificação usada nos caracteres do documento. 


Se você selecionar Unicode (UTF-8) como codificação de documento, a codificação de entidade não será necessária, pois a codificação 
UTF-8 poderá representar com segurança todos os caracteres. Se você selecionar outra codificação de documento, a codificação de 
entidade provavelmente será necessária para representar determinados caracteres. Para obter mais informações sobre as entidades de 
caractere, consulte www.w3.org/TR/REC -html40/sgml/entities.html. 


Recarregar Converte o documento existente ou abre o documento novamente usando a nova codificação. 


Formulário de normalização unicode Ativado somente se você selecionar UTF-8 como codificação de documento. Há quatro formulários 
de normalização unicode. O mais importante deles é o formulário de normalização C, pois é o formulário mais comum utilizado no modelo 
de caractere da World Wide Web. A Adobe fornece os outros três para ser mais completa. 


No Unicode, alguns caracteres são visualmente similares, mas podem ser armazenados no documento de diferentes maneiras. Por 
exemplo, “&” (e-umlaut) pode ser representado como um caractere único, “e com trema”, ou como dois caracteres, “e latino regular” + 
“trema”. O caractere de combinação Unicode é aquele utilizado com o caractere anterior; sendo assim, o trema apareceria acima do “e 
latino”. Os dois formulários têm como resultado a mesma tipografia visual, mas o que é salvo no arquivo é diferente em cada formulário. 


A normalização é o processo que garante que todos os caracteres que podem ser salvos de formas diferentes serão salvos de uma mesma 
forma. Ou seja, todos os caracteres “&” de um documento serão salvos como um único “e com trema” ou como “e” + “trema”, e não de 
duas formas em um documento. 


Para obter mais informações sobre a normalização unicode e as formas específicas que podem ser usadas, consulte o site da Unicode em 
www .unicode.org/reports/tr15. 


Incluir assinatura Unicode (BOM) Inclui uma BOM (marca de ordem de bytes) no documento. Uma BOM consiste em 2 a 4 bytes no início 
de um arquivo de texto que identifica um arquivo como Unicode, e se assim for, a ordem dos bytes a seguir. Como a codificação UTF-8 
não tem ordem de bytes, a adição de um BOM UTF-8 é opcional. Na UTF-16 e UTF-32, ela é obrigatória. 


(65) ev-nc-sa ] 
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Configurar as propriedades de link da CSS para uma página inteira 


Nota: A interface de usuário foi simplificada na Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das 
opções descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo. 


Você pode especificar fontes, tamanhos da fonte, cores e outros itens para seus links. Por padrão, o Dreamweaver cria regras de CSS para seus 
links e aplica-os a todos os links que você usa na página. (As regras são incorporadas na seção título da página.) 


Nota: Se quiser personalizar links individuais em uma página, você deverá criar regras de CSS individuais e, em seguida, aplicá-las aos links 
separadamente. 


1. Selecione Modificar > Propriedades da página ou clique no botão Propriedades da página no Inspetor de propriedades de texto. 
2. Escolha a categoria Links (CSS) e defina as opções. 


Fonte do link Especifica a família de fontes padrão a ser usada como texto do link. Por padrão, o Dreamweaver usa a família de fontes 
especificada para a página inteira, a menos que você especifique outra fonte. 


Tamanho Especifica o tamanho de fonte padrão a ser usado no texto do link. 

Cor do link Especifica a cor a ser aplicada ao texto do link. 

Links visitados Especifica a cor a ser aplicada aos links visitados. 

Links de sobreposição Especifica a cor a ser aplicada quando o ponteiro do mouse é colocado sobre um link. 

Links ativos Especifica a cor a ser aplicada quando o mouse é clicado em um link. 

Estilo sublinhado Especifica o estilo de sublinhado a ser aplicado aos links. Se a página já tiver um estilo de link sublinhado definido 
(através de uma folha de estilos CSS externa, por exemplo), o valor padrão do menu Estilo sublinhado será a opção “não alterar”. Esta 


opção informa sobre um estilo de link não definido. Se você modificar o estilo de link sublinhado usando a caixa de diálogo Propriedades da 
página, o Dreamweaver alterará a definição de link anterior. 


As publicações do Twitter?” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Configurar propriedades de cabeçalho da CSS para uma página 
inteira 


Nota: A interface de usuário foi simplificada na Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das 
opções descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo. 


Pode especificar fontes, tamanhos da fonte e cores dos títulos da sua página. Por padrão, o Dreamweaver cria regras de CSS para seus títulos e 
aplica-os a todos os títulos que você usa na página. (As regras são incorporadas na seção título da página.) 


Os cabeçalhos estão disponíveis para seleção no Inspector de propriedades de HTML. 


1. Selecione Modificar > Propriedades da página ou clique no botão Propriedades da página no Inspetor de propriedades de texto. 
2. Escolha a categoria Cabeçalhos (CSS) e defina as opções. 


Fonte do cabeçalho Especifica a família de fontes padrão a ser usada como cabeçalhos. O Dreamweaver usará a família de fontes 
especificada, a menos que outra fonte seja definida para um elemento de texto. 


Cabeçalho 1 a Cabeçalho 6 Especifica o tamanho e a cor da fonte a serem usados em até seis níveis de tags de cabeçalho. 


As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 
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Selecionar e visualizar os elementos na janela Documento 


Seleção de elementos 

Visualização do código HTML associado ao texto ou objeto selecionado 
Mostrar ou ocultar ícones de marcador de elementos invisíveis 
Definição de preferências de elementos invisíveis 


Para selecionar um elemento na Visualização de design da janela Documento, clique no elemento. Se um elemento estiver invisível, torne-o 
visível para que possa selecioná-lo. 


Alguns códigos HTML não têm uma representação visível em um navegador. Por exemplo, as tags comment não aparecem nos navegadores. No 
entanto, isso pode ser útil quando você estiver criando uma página, a fim de que possa selecionar, editar, mover e excluir esses elementos 
invisíveis. 

O Dreamweaver permite que você especifique se ele deve ou não mostrar ícones marcando o local dos elementos invisíveis na Visualização de 
design da janela Documento. Para indicar quais marcadores de elemento aparecerão, defina opções nas preferências de elementos invisíveis. 
Por exemplo, você pode especificar que as âncoras nomeadas devem ficar visíveis, mas não as quebras de linha. 


É possível criar determinados elementos invisíveis (como comentários e âncoras com nome) usando botões na categoria Comum do painel 
Inserir. Em seguida, você pode modificar esses elementos usando o Inspetor de propriedades. 


' = EE 
Seleção de elementos ara o início 


e Para selecionar um elemento visível na janela Documento, clique no elemento ou arraste o ponteiro do mouse sobre ele. 


e Para selecionar um elemento invisível, selecione Exibir > Auxílios visuais > Elementos invisíveis (caso este item de menu ainda não esteja 
selecionado) e clique no marcador do elemento na janela Documento. 


Alguns objetos aparecem em um lugar da página diferente do local onde seu código foi inserido. Por exemplo, na Visualização de design, 
um elemento de posicionamento absoluto (elemento AP) pode estar em qualquer lugar da página, mas na Visualização de código, o código 
que define o elemento AP estará em um local fixo. Quando os elementos invisíveis estiverem visíveis, o Dreamweaver exibirá os marcadores 
na janela Documento para mostrar o local do código desses elementos. A seleção de um marcador selecionará o elemento inteiro; por 
exemplo, a seleção do marcador de um elemento AP selecionará o elemento AP inteiro. 


e Para selecionar uma tag completa (incluindo se conteúdo, se houver), clique em uma tag no seletor de tags na parte inferior esquerda da 
janela Documento. (O seletor de tags é exibido nas visualizações de design e de código.) O seletor de tags sempre mostra as tags que 
contêm a seleção atual ou o ponto de inserção. A tag da extrema esquerda é a tag mais externa que contém a seleção atual ou o ponto de 
inserção. A próxima tag está contida nessa tag mais externa e assim sucessivamente. A tag da extrema direita é a tag mais interna que 
contém a seleção atual ou o ponto de inserção. 


No exemplo a seguir, o ponto de inserção está em uma tag de parágrafo, <p>. Para selecionar a tabela que contém o parágrafo a ser 
selecionado, selecione a tag <table> à esquerda da tag <p>. 


«body» «table> <tr> <td> <table> <tr> <td> <p> 


Visualização do código HTML associado ao texto ou objeto selecionado ii 


“ Siga um destes procedimentos: 
e Na barra de ferramentas Documento, clique no botão Mostrar visualização de código. 
e Selecione Exibir > Código. 
e Na barra de ferramentas Documento, clique no botão Mostrar visualizações de código e design. 
e Selecione Exibir > Código e design. 
e Selecione Janela > Inspetor de código. 


Geralmente, quando você seleciona algum item no editor de código (Visualização de código ou Inspetor de código), ele também é 
selecionado na janela Documento. Talvez seja necessário sincronizar as duas visualizações para que a seleção apareça. 


po = Ea a P iníci 
Mostrar ou ocultar ícones de marcador de elementos invisíveis prai 
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*& Selecione Exibir > Auxílios visuais > Elementos invisíveis. 
Nota: A exibição de elementos invisíveis pode alterar um pouco o layout de uma página, movendo outros elementos em alguns pixels. Portanto, 
para obter um layout preciso, oculte os elementos invisíveis. 


mm cgs A a 7 ça fe AV Para o início 
Definição de preferências de elementos invisíveis 
Use as preferências de elementos invisíveis para especificar quais tipos de elementos estarão visíveis quando você selecionar Exibir > Auxílios 
visuais > Elementos invisíveis. 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e clique em Elementos invisíveis. 


2. Selecione quais elementos devem ficar visíveis e clique em OK. 
Nota: Uma marca de seleção ao lado do nome do elemento na caixa de diálogo significa que o elemento estará visível quando Exibir > 
Auxílios visuais > Elementos invisíveis for selecionado. 

Âncoras nomeadas Exibe um ícone que marca o local de cada âncora nomeada (um nome = 


) no documento. 


Scripts Exibe um ícone que marca o local do código JavaScript ou VBScript no corpo do documento. Selecione o ícone para editar o script 
no Inspetor de propriedades ou vincular-se a um arquivo de script externo. 


Comentários Exibe um ícone que marca o local dos comentários HTML. Selecione o ícone para ver o comentário no Inspetor de 
propriedades. 


Quebras de linha Exibe um ícone que marca o local de cada quebra de linha (BR). Por padrão, esta opção não é selecionada. 
Mapas de imagem do cliente Exibe um ícone que marca o local de cada mapa de imagens do cliente no documento. 


Estilos incorporados Exibe um ícone que mostra o local dos estilos CSS incorporados na seção body do documento. Se os estilos CSS 
forem colocados na seção head de um documento, eles não aparecerão na janela Documento. 


Campos ocultos de formulários Exibe um ícone que marca o local dos campos de formulários que possuem o atributo type definido como 
“hidden”. 


Delimitador de formulários Exibe uma borda ao redor de um formulário, para que você possa ver onde deve inserir os elementos de 
formulário. A borda mostra a extensão da tag form, para que quaisquer elementos de formulário nessa borda sejam corretamente 
delimitados nas tags form. 


Pontos de ancoragem de elementos PA Exibe um ícone que marca o local do código que define um elemento PA. O elemento PA pode 
estar em qualquer lugar da página. (Os elementos PA não são elementos invisíveis. Somente o código que define o elemento PA estará 
invisível.) Selecione o ícone para selecionar o elemento PA. Depois disso, você poderá ver o conteúdo do elemento PA, mesmo se ele 
estiver marcado como oculto. 


Pontos de ancoragem de elementos alinhados Exibe um ícone que mostra o local do código HTML de elementos que aceitam o atributo 
align. Esses elementos incluem imagens, tabelas, objetos ActiveX, plug-ins e applets. Em alguns casos, o código do elemento pode estar 
separado do objeto visível. 


Tags de markup do Visual Server Exibe o local das tags de markup de servidores (como tags de Páginas ativas do servidor e tags do 
ColdFusion) cujo conteúdo não pode ser exibido na janela Documento. Essas tags normalmente geram tags HTML quando processadas 
por um servidor. Por exemplo, uma tag <CFGRAPH> gera uma tabela HTML quando processada por um servidor ColdFusion. O 
Dreamweaver representa a tag com um elemento invisível do ColdFusion, pois o Dreamweaver não pode determinar a saída dinâmica final 
da página. 


Tags não visuais de markup de servidores Exibe o local das tags de markup de servidores (como tags de Páginas ativas do servidor e 
tags do ColdFusion) cujo conteúdo não pode ser exibido na janela Documento. Essas tags são normalmente tags lógicas, de configuração 
ou de processamento (por exemplo, <CFSET>, <CFWDDX> e <CFXML>) que não geram tags HTML. 


Exibição CSS: Nenhum Exibe um ícone que mostra o local do conteúdo oculto pela propriedade display:none na folha de estilos vinculada 
ou incorporada. 


Mostrar texto dinâmico como Por padrão, exibe um texto dinâmico na página no formato (Recordset:Field). Se esses valores forem 
muito extensos a ponto de distorcer a formatação da página, altere a exibição para (. 


Inclusões do servidor Exibe o conteúdo real de cada arquivo de inclusão do servidor. 


Mais tópicos da Ajuda 
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Importação de documentos do Microsoft Office (somente Windows) 


Você pode inserir o conteúdo completo de um documento do Microsoft Word ou Excel em uma página da Web nova ou existente. Durante a 
importação de um documento do Word ou Excel, o Dreamweaver recebe o HTML convertido e o insere na página da Web. O tamanho do 
arquivo, depois que o Dreamweaver recebe o HTML convertido, deve ser inferior a 300K. 


Em vez de importar o conteúdo total de um arquivo, você também pode colar partes de um documento do Word e preservar a formatação. 


Nota: Se você usa o Microsoft Office 97, não é possível importar o conteúdo de um documento do Word ou Excel; insira um link para o 
documento. 


1. Abra a página da Web na qual você deseja inserir o documento do Word ou Excel. 
2. Na Visualização de design, siga um destes procedimentos para selecionar o arquivo: 


e Arraste o arquivo de seu local atual para a página em que o conteúdo deve aparecer. 
* Selecione Arquivo > Importar > Documento do Word ou Arquivo > Importar > Documento do Excel. 


3. Na caixa de diálogo Inserir documento, vá até o arquivo desejado, selecione qualquer opção de formatação no menu pop-up Formatação 
exibido na parte inferior da caixa de diálogo e clique em Abrir. 
Apenas texto Insere texto sem formatação. Se o texto original for formatado, toda a formatação será removida. 


Texto com estrutura Insere um texto que retenha a estrutura, mas não retenha a formatação básica. Por exemplo, você pode colar o texto 
e reter a estrutura de parágrafos, listas e tabelas, sem reter o negrito, o itálico e outras formatações. 


Texto com estrutura e formatação básica Insere um texto HTML estruturado e simples (por exemplo, parágrafos e tabelas, assim como 
um texto formatado com a tag b, i, u, strong, em, hr, abbr ou acronym). 


Texto com estrutura e formatação integral Insere um texto que retenha a estrutura, a formatação HTML e os estilos CSS. 


Limpar espaçamento de parágrafo do Word Elimina o espaço extra entre os parágrafos quando você cola o texto, caso tenha 
selecionado Texto com estrutura ou Formatação básica. 


O conteúdo do documento do Word ou Excel é exibido na página. 


[63] ex-ne-sa ] 
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Criação de um link para um documento do Word ou Excel. 


Você pode inserir um link para um documento do Microsoft Word ou Excel em uma página existente. 


1. Abra a página em que o link deve aparecer. 

2. Arraste o arquivo do local atual para a página do Dreamweaver, posicionando o link no local desejado. 

3. Selecione Criar um link e clique em OK. 

4. Se o documento ao qual você está se vinculando estiver localizado fora da pasta raiz do site, o Dreamweaver solicitará que você copie o 
documento para a raiz do site. 
Ao copiar o documento para a pasta raiz do site, você garantirá que o documento estará disponível quando o site for publicado. 

5. Ao carregar a página no servidor Web, verifique se o arquivo do Word ou Excel também foi carregado. 
Agora a página contém um link para o documento do Word ou Excel. O texto do link é o nome do arquivo vinculado. Você pode alterar o 
texto do link na janela Documento se desejar. 

[69] ev-ne-sa ] 
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Criação e gerenciamento de uma lista dos ativos favoritos 


Gerenciamento dos ativos favoritos 
Adicionar ou remover ativos favoritos 
Criar um apelido para um ativo favorito 
Agrupar ativos em uma pasta Favoritos 


5 E E P iníci 
Gerenciamento dos ativos favoritos de 


A lista completa de todos os ativos reconhecidos pode se tornar um problema em alguns sites grandes. Você pode adicionar os ativos mais 
usados a uma lista Favoritos, agrupar ativos relacionados, dar a eles apelidos que o lembrem de suas funções e localizá-los facilmente no painel 
Ativos. 


Nota: Os ativos favoritos não são armazenados como arquivos separados no disco. Eles são referências para os ativos da lista de sites. O 
Dreamweaver controla quais ativos da lista de sites devem ser exibidos na lista Favoritos. 


A maioria das operações do painel Ativos é a mesma na lista Favoritos e na lista de sites. No entanto, há várias tarefas que você só consegue 
executar na lista Favoritos. 


Ear E E Para o início 
Adicionar ou remover ativos favoritos gi 


Há várias formas de adicionar ativos à lista Favoritos do site no painel Ativos. 


A adição de uma cor ou um URL à lista Favoritos exige uma etapa extra. Você não pode adicionar novas cores ou URLs à lista de sites; a lista 
de sites contém apenas os ativos que já estão em uso no site. 


Nota: Não há nenhuma lista Favoritos para modelos e itens de biblioteca. 


Adicionar ativos à lista Favoritos 
Siga um destes procedimentos: 


* Selecione um ou mais ativos na lista de sites do painel Ativos e clique no botão Adicionar a favoritos+il. 


e Selecione um ou mais ativos na lista de sites do painel Ativos, clique com o botão direito do mouse (Windows) ou clique mantendo a tecla 
control pressionada (Macintosh) e selecione Adicionar a favoritos. 


e Selecione um ou mais arquivos no painel Arquivos, clique com o botão direito do mouse (Windows) ou clique mantendo a tecla control 
pressionada (Macintosh) e selecione Adicionar a favoritos. O Dreamweaver ignora os arquivos que não correspondam a uma categoria do 
painel Ativos. 


e Clique com o botão direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) em um elemento na 
Visualização de design da janela Documento e selecione o comando do menu de contexto para adicionar o elemento a uma categoria 
Favoritos. 


O menu de contexto do texto contém Adicionar a cores favoritas ou Adicionar aos URLs favoritos, dependendo da existência de um link 
anexado ao texto. Você pode adicionar somente elementos que correspondam a uma das categorias no painel Ativos. 


Adicionar uma nova cor ou URL à lista Favoritos 
No painel Ativos, selecione a categoria Cores ou URLs. 
Selecione a opção Favoritos na parte superior do painel. 
Clique no botão Nova cor ou Nova URL+. 


PB ON A 


Siga um destes procedimentos: 
e Selecione uma cor usando o seletor de cores e, se desejado, dê a ela um apelido. 
Para fechar o seletor de cores sem escolher uma cor, pressione Esc ou clique na barra cinza na parte superior do seletor. 


e Digite um URL e um apelido na caixa de diálogo Adicionar novo URL e clique em OK. 


Remover ativos da lista Favoritos 
1. No painel Ativos, selecione a opção Favoritos na parte superior do painel. 
2. Selecione um ou mais ativos (ou uma pasta) na lista Favoritos. 
3. Clique no botão Remover de Favoritos -fl. 
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Os ativos são removidos da lista Favoritos, e não da lista de sites. Caso você remova uma pasta Favoritos, ela e todo seu conteúdo são 
removidos. 


' É F ” Para o início 
Criar um apelido para um ativo favorito 


Você pode dar apelidos (por exemplo, PageBackgroundColor, e não 4999900) somente a ativos na lista Favoritos. A lista de sites mantém os 
nomes de arquivo reais (ou valores, no caso de cores e URLs). 


1. No painel Ativos (Janela > Ativos), selecione a categoria que contém o ativo. 
2. Selecione a opção Favoritos na parte superior do painel. 


3. Siga um destes procedimentos: 


e Clique com o botão direito do mouse (Windows) ou clique mantendo a tecla control pressionada (Macintosh) no nome ou no ícone do 
ativo no painel Ativos e selecione Editar apelido. 


e Clique no nome do ativo uma vez, faça uma pausa e clique nele novamente. (Não clique duas vezes. Isso abre o item para edição.) 


4. Digite o apelido do ativo e pressione Enter (Windows) ou Return (Macintosh). 


. ' Para o início 
Agrupar ativos em uma pasta Favoritos 


Colocar um ativo na pasta Favoritos não altera o local do arquivo do ativo no disco. 


1. No painel Ativos, selecione a opção Favoritos na parte superior do painel. 
2. Clique no botão Nova pasta Favoritos 7. 
3. Digite um nome para a pasta e pressione Enter (Windows) ou Return (Macintosh). 


4. Arraste ativos para a pasta. 


Mais tópicos da Ajuda 
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Definir propriedades de texto no Inspetor de propriedades 


Sobre a formatação de texto (CSS versus HTML) 

Edição de regras CSS no Inspetor de propriedades 

Definição da formatação HTML no Inspetor de propriedades 
Renomeamento de classe no Inspetor de propriedades HTML 


Você pode usar o Inspetor de propriedades de texto para aplicar a formatação HTML ou a formatação da folha de estilos em cascata (CSS). 
Quando você aplica formatação HTML, o Dreamweaver adiciona propriedades ao código HTML no corpo da página. Quando você aplica 
formatação CSS, o Dreamweaver escreve propriedades no cabeçalho do documento ou em uma folha de estilos distinta. 


Nota: quando você criar estilos inline CSS, o Dreamweaver adicionará o código de atributo de estilo diretamente ao corpo da página. 


” Para o início 
Sobre a formatação de texto (CSS versus HTML) E 
A formatação de texto no Dreamweaver é semelhante ao uso de um processador de texto padrão. Você pode definir estilos de formatação 
padrão (Parágrafo, Cabeçalho 1, Cabeçalho 2 etc.) para um bloco de texto, alterar a fonte, o tamanho, a cor e o alinhamento do texto selecionado 
ou aplicar estilos de texto, como negrito, itálico, código (monoespaçado) e sublinhado. 


O Dreamweaver tem dois Inspetores de propriedades integrados em um: O Inspetor de propriedades CSS e o Inspetor de propriedades HTML. Ao 
usar o Inspetor de propriedades CSS, o Dreamweaver formata o texto usando Folhas de estilo em cascata (CSS). A CSS proporciona aos 
designers e desenvolvedores da Web maior controle sobre o design de página da Web e, ao mesmo tempo, fornece recursos avançados de 
acessibilidade e menor tamanho de arquivo. O Inspetor de propriedades CSS permite acessar estilos existentes, bem como criar novos. 


O uso da CSS é uma maneira de controlar o estilo de uma página da Web sem comprometer sua estrutura. Ao separar elementos de design 
visual (fontes, cores, margens etc.) da lógica estrutural de uma página da Web, a CSS proporciona aos designers da Web controle visual e 
tipográfico sem sacrificar a integridade do conteúdo. Além disso, a definição do design tipográfico e do layout da página em um bloco de código 
único e distinto — sem precisar recorrer a mapas de imagem, tags font, tabelas e GIFs de espaçador — permite downloads mais rápidos, 
manutenção otimizada de sites e um ponto central a partir do qual os atributos de design serão controlados nas várias páginas da Web. 


Não é possível armazenar estilos criados com CSS diretamente no documento ou, para mais eficiência e flexibilidade, você pode armazenar 
estilos em uma folha de estilos externa. Se você anexar uma folha de estilos externa a várias páginas da Web, todas as páginas refletirão 
automaticamente todas as alterações feitas na folha de estilos. Para acessar todas as regras CSS de uma página, use o painel Estilos CSS 
(Janela > Estilos CSS). Para acessar as regras que se aplicam a uma seleção atual, use o painel Estilos CSS (modo Atual) ou o menu pop-up 
Regra-alvo no Inspetor de propriedades CSS. 


Se preferir, use tags de markup HTML para formatar o texto em suas páginas da Web. Para usar tags HTML em vez de CSS, formate o texto 
usando o Inspetor de propriedades HTML. 


Nota: é possível combinar a formatação CSS e a formatação HTML 3.2 em uma mesma página. A formatação é aplicada de forma hierárquica: a 
formatação HTML 3.2 substitui a formatação aplicada pelas folhas de estilos CSS externa, enquanto a CSS incorporada no documento substitui a 
CSS externa. 


Para o início 


Edição de regras CSS no Inspetor de propriedades 


1. Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda não esteja aberto, e clique no botão CSS. 
2. Siga um destes procedimentos: 


e Coloque o ponto de inserção dentro do bloco de texto que foi formatado por uma regra que você queira editar. A regra é exibida no 
menu pop-up Regra-alvo. 


* Selecione uma regra no menu pop-up Regra-alvo. 
3. Faça alterações na regra, usando as várias opções do Inspetor de propriedades CSS. 


Regra-alvo É a regra que você está editando no Inspetor de propriedades CSS. Quando se tem um estilo existente aplicado ao texto, a 
regra que afeta o formato do texto é exibida quando você clica dentro do texto na página. Você também pode usar o menu pop-up Regra- 
alvo para criar novas regras CSS, novos estilos inline ou aplicar classes existentes ao texto selecionado. Se você estiver criando uma nova 
regra, precisará preencher a caixa de diálogo Nova regra CSS. Para obter mais informações, consulte os links no final deste tópico. 


Editar regra Abre a caixa de diálogo Definição de regra CSS da regra-alvo. Se você selecionar Nova regra CSS no menu pop-up Regra- 
alvo e clicar no botão Editar regra, o Dreamweaver abrirá a caixa de diálogo de definição Nova regra CSS em vez disso. 


Painel CSS Abre o painel de estilos CSS e exibe as propriedades da regra-alvo na visualização Atual. 
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Fonte Altera a fonte da regra-alvo. 
Tamanho Define o tamanho de fonte da regra-alvo. 


Cor do texto Define a cor selecionada como a cor da fonte na regra-alvo. Selecione uma cor aceita pela Web clicando na caixa de cores 
ou digite um valor hexadecimal (por exemplo, 4FF0000) no campo de texto adjacente. 


Negrito Adiciona a propriedade de negrito à regra-alvo. 
Itálico Adiciona a propriedade de itálico à regra-alvo. 


Alinhar à esquerda, Centralizar e Alinhar à direita Adiciona as respectivas propriedades de alinhamento à regra-alvo. 


nota: as propriedades Fonte, Tamanho, Cor de texto, Negrito, Itálico e Alinhamento exibem sempre as propriedades da regra que se aplica 
à seleção atual na janela Documento. Quando você alterar alguma dessas propriedades, afetará a regra-alvo. 


Para o início 


Definição da formatação HTML no Inspetor de propriedades 


1. Abra o Inspetor de propriedades (Janela > Propriedades), caso ele ainda não esteja aberto, e clique no botão HTML. 
2. Selecione o texto que deseja formatar. 
3. Defina as opções a serem aplicadas ao texto selecionado: 


Formato Define o estilo de parágrafo do texto selecionado. O parágrafo aplica o formato padrão de uma tag <p>, Cabeçalho 1 adiciona 
uma tag H1 e assim por diante. 
ID Atribui uma ID à seleção. O menu pop-up ID (se aplicável) lista todas as IDs declaradas não utilizadas do documento. 
Classe Exibe o estilo de classe atualmente aplicado ao texto selecionado. Se nenhum estilo tiver sido aplicado à seleção, o menu pop-up 
mostrará Sem estilo CSS. Se vários estilos tiverem sido aplicados à seleção, o menu estará em branco. 
Use o menu Estilo para executar qualquer um destes procedimentos: 

e Selecionar o estilo a ser aplicado à seleção. 

e Selecionar Nenhum para remover o estilo atualmente selecionado. 

* Selecione Renomear e renomeie o estilo. 

* Selecione Anexar folha de estilos para abrir uma caixa de diálogo que permita anexar uma folha de estilos externa à página. 


Negrito Aplica <b> ou <strong> ao texto selecionado de acordo com a preferência de estilo definida na categoria Geral da caixa de 
diálogo Preferências. 


Itálico Aplica <i> ou <em> ao texto selecionado de acordo com a preferência de estilo definida na categoria Geral da caixa de diálogo 
Preferências. 


Lista não ordenada Cria uma lista com marcadores do texto selecionado. Se nenhum texto for selecionado, uma nova lista com 
marcadores será iniciada. 


Lista ordenada Cria uma lista numerada do texto selecionado. Se nenhum texto for selecionado, uma nova lista numerada será iniciada. 


Citação em bloco e Remover citação em bloco Recua ou remove o recuo do texto selecionado aplicando ou removendo a tag 
blockquote. Em uma lista, o recuo cria uma lista aninhada e a remoção do recuo desaninha a lista. 


Link Cria um link de hipertexto do texto selecionado. Clique no ícone de pasta para acessar um arquivo no site; digite o URL; arraste o 
ícone Apontar para arquivo para um arquivo no painel Arquivos ou arraste um arquivo do painel Arquivos para a caixa. 


Título Especifica a dica de ferramenta de texto para um link de hipertexto. 


Alvo Especifica o quadro ou a janela em que o documento vinculado será carregado: 
e blank carrega o arquivo vinculado em uma nova janela de navegador não nomeada. 


* - parent carrega o arquivo vinculado em um conjunto de quadros pai ou na janela do quadro que contém o link. Se o quadro que 
contém o link não estiver aninhado, o arquivo vinculado será carregado na janela de navegador em tamanho integral. 


e “self carrega o arquivo vinculado no mesmo quadro ou janela do link. Este alvo está implícito; portanto, você geralmente não precisa 
especificá-lo. 


e top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros. 
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Renomeamento de classe no Inspetor de propriedades HTML dci 


O Dreamweaver exibe todas as classes disponíveis para sua página no menu Classe do Inspetor de propriedades HTML. Você pode renomear 
estilos nessa lista, selecionando a opção Renomear, no final da lista de estilos de classe. 


1. Selecione Renomear no menu pop-up Estilo do Inspetor de propriedades de texto. 
2. Selecione o estilo que você deseja renomear no menu pop-up Renomear estilo. 
3. Digite um novo nome no campo de texto Novo nome e clique em OK. 


e Abertura do painel Estilos CSS 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Trabalhando com o Photoshop e o Dreamweaver 


Sobre a integração do Photoshop 

Sobre os fluxos de trabalho dos Objetos inteligentes e do Photoshop-Dreamweaver 
Criação de um Objeto inteligente 

Atualização de um Objeto inteligente 

Atualizar vários Objetos inteligentes 

redimensionamento de um Objeto inteligente 

Edição do arquivo original do Photoshop de um Objeto inteligente 
Estados de Objetos inteligentes 

Cópia e colagem de uma seleção do Photoshop 

Editar imagens coladas 

Configuração das opções da caixa de diálogo Visualização da imagem 


' aá Para o início 
Sobre a integração do Photoshop 

Você pode inserir arquivos de imagem do Photoshop (formato PSD) em páginas da Web no Dreamweaver e permitir que o Dreamweaver otimize- 
as como imagens habilitadas para a Web (formatos GIF, JPEG e PNG). Ao executar essa ação, o Dreamweaver insere a imagem como um 
Objeto inteligente e mantém uma conexão ativa com o arquivo PSD original. 


Também é possível colar toda ou parte de uma imagem do Photoshop de várias camadas ou fatias em uma página da Web no Dreamweaver. 
Entretanto, quando você copia e cola do Photoshop, a conexão ativa com o arquivo original não é mantida. Para atualizar a imagem, faça as 
alterações no Photoshop e copie e cole novamente. 


Nota: se esse recurso de integração for usado com frequência, você poderá armazenar seus arquivos do Photoshop no site do Dreamweaver 
para facilitar o acesso. Nesse caso, certifique-se de que as imagens estejam encobertas para evitar a exposição dos ativos originais, assim como 
as transferências desnecessárias entre o site local e o servidor remoto. 


Para assistir a um tutorial sobre a integração do Photoshop com o Dreamweaver, consulte Integração do Dreamweaver com o Photoshop. 


Para o início 


Sobre os fluxos de trabalho dos Objetos inteligentes e do Photoshop-Dreamweaver 


Há dois principais fluxos de trabalho para trabalhar com os arquivos do Photoshop no Dreamweaver: o fluxo de trabalho copiar/colar e o fluxo de 
trabalho dos Objetos inteligentes. 


Fluxo de trabalho copiaricolar 


O fluxo de trabalho copiar/colar permite que você selecione fatias ou camadas em um arquivo do Photoshop e, em seguida, use o Dreamweaver 
para inseri-las como imagens prontas para a Web. Se quiser atualizar o conteúdo posteriormente, entretanto, você deverá abrir o arquivo 
Photoshop original, executar as alterações, copiar sua fatia ou camada para a área de Transferência novamente e, em seguida, colar a fatia ou a 
camada atualizada no Dreamweaver. Esse fluxo de trabalho só é recomendado quando você deseja inserir parte de um arquivo do Photoshop 
(por exemplo, uma seção de um componente de design) como uma imagem em uma página da Web. 


Fluxo de trabalho dos Objetos inteligentes 


Ao trabalhar com os arquivos do Photoshop completos, a Adobe recomenda o fluxo de trabalho dos Objetos inteligentes. Um Objeto inteligente no 
Dreamweaver é uma imagem colocada em um página da Web que tenha uma conexão instantânea com um arquivo original do Photoshop (PSD). 
Na Visualização de design do Dreamweaver, um Objeto inteligente é indicado por um ícone no canto superior esquerdo da imagem. 
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Objeto inteligente 


Quando a imagem da Web (ou seja, a imagem na página do Dreamweaver) está fora de sincronia com o arquivo Photoshop original, o 
Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do ícone do Objeto inteligente em vermelho. Quando você 
seleciona a imagem da Web na Visualização de design e clica no botão Atualizar do original no Inspetor de propriedades, a imagem é atualizada 
automaticamente, refletindo todas as alterações feitas no arquivo original do Photoshop. 


Ao usar o fluxo de trabalho de Objetos inteligentes, você não precisa abrir o Photoshop para atualizar uma imagem da Web. Além disso, 
quaisquer atualizações feitas em um Objeto inteligente no Dreamweaver são não destrutivas. Ou seja, você pode alterar a versão da Web da 
imagem em sua página enquanto mantém a imagem original do Photoshop intacta. 


Você também pode atualizar um Objeto inteligente sem selecionar a imagem da Web na visualização de Design. O painel Recursos permite que 
você atualize todos os Objetos inteligentes, incluindo as imagens que podem não ser selecionáveis na janela Documento (por exemplo, imagens 
de segundo plano CSS). 


Configurações de otimização de imagens 


Tanto para o fluxo de trabalho de copiar/colar quanto para o fluxo de trabalho de Objetos inteligentes, você pode especificar configurações de 
otimização na caixa de diálogo Otimização da imagem. Esta caixa de diálogo permite especificar o formato de arquivo e a qualidade da imagem. 
Se você estiver copiando uma fatia ou uma camada pela primeira vez ou inserindo uma arquivo do Photoshop como um Objeto inteligente pela 
primeira vez, o Dreamweaver exibirá essa caixa de diálogo de modo que você possa criar facilmente a imagem da Web. 


Se você copiar e colar uma atualização em uma determinada fatia ou camada, o Dreamweaver manterá as configurações originais e recriará a 
imagem da Web com essas configurações. Da mesma maneira, ao atualizar um Objeto inteligente usando o Inspetor de propriedades, o 
Dreamweaver usará as mesmas configurações usadas quando você inseriu a imagem pela primeira vez. Você pode alterar as configurações de 
imagem a qualquer momento selecionando a imagem da Web na Visualização de design e, em seguida, clicar no botão Editar configurações da 
imagem no Inspetor de propriedades. 


Armazenamento de arquivos do Photoshop 


Se você tiver inserido uma imagem da Web e não tiver armazenado o arquivo original do Photoshop em seu site do Dreamweaver, o 
Dreamweaver reconhecerá o caminho para o arquivo original como um caminho de arquivo local absoluto. (Isso é verdadeiro tanto para o fluxo de 
trabalho de copiar/colar quanto para o de Objetos inteligentes.) Por exemplo, se o caminho de seu site do Dreamweaver for C:SiteslmeusSite e 
seu arquivo do Photoshop estiver armazenado em C:/Images/Photoshop, o Dreamweaver não reconhecerá o ativo original como parte do site 
chamado meusite. Isso causará problemas se você quiser compartilhar o arquivo do Photoshop com outros membros da equipe, pois o 
Dreamweaver reconhecerá o arquivo somente como disponível em um determinado disco rígido local. 


Se você armazenar o arquivo do Photoshop em seu site, entretanto, o Dreamweaver definirá um caminho entre o site o arquivo. Qualquer usuário 
com acesso ao site será capaz de definir o caminho correto até o arquivo, desde que você tenha fornecido o arquivo original para download. 


Para assistir a um tutorial em vídeo sobre a edição roundtrip com o Photoshop, consulte Edição roundtrip com o Photoshop. 


Para o início 


Criação de um Objeto inteligente 


Quando você insere uma imagem do Photoshop (arquivo PSD) em uma página, o Dreamweaver cria um Objeto inteligente. Um Objeto inteligente 
é uma imagem habilitada para a Web que mantém uma conexão ativa com a imagem original do Photoshop. Sempre que você atualiza a imagem 
original no Photoshop, o Dreamweaver oferece a opção de atualizar a imagem no Dreamweaver com o clique de um botão. 


1. No Dreamweaver (Visualização de design ou de código), coloque o ponto de inserção na página onde você deseja inserir a imagem. 
2. Selecione Inserir > Imagem. 


Você também pode arrastar o arquivo PSD para a página a partir do painel Arquivos, caso esteja armazenando os arquivos do 
Photoshop em seu site. Se essa for a sua opção, ignore a próxima etapa. 
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3. Localize o arquivo de imagem PSD do Photoshop na caixa de diálogo Selecionar origem da imagem clicando no botão Procurar e 
navegando até o arquivo. 

4. Ajuste as configurações de otimização conforme necessário na caixa de diálogo Otimização da imagem e clique em OK. 

5. Salve o arquivo de imagem ativado para a Web em um local na pasta raiz do seu site. 


O Dreamweaver cria os Objetos inteligentes com base nas configurações de otimização selecionadas e coloca em sua página a versão ativada 
para a Web da imagem. O Objeto inteligente mantém uma conexão ativa com a imagem original e permite que você saiba quando ambas estão 
fora de sincronia. 


Nota: se você decidir alterar posteriormente as configurações de otimização para uma imagem colocada em suas páginas, pode selecionar a 
imagem, clicar no botão Editar Configurações de imagem, no Inspetor de propriedades da imagem, e fazer as alterações na caixa de diálogo 
Otimização de imagem. As alterações feitas na caixa de diálogo Otimização de imagem são aplicadas de forma não destrutiva. O Dreamweaver 
nunca modifica o arquivo original do Photoshop e sempre recria a imagem da Web com base nos dados originais. 


Para assistir a um tutorial em vídeo sobre a edição roundtrip com o Photoshop, consulte Edição roundtrip com o Photoshop. 


Atualização de um Objeto inteligente ici 


Se você alterar o arquivo do Photoshop ao qual seu Objeto inteligente é vinculado, o Dreamweaver notifica que a imagem habilitada para a web 
está fora de sincronia com o original. No Dreamweaver, os Objetos inteligentes são indicados por um ícone no canto superior esquerdo da 
imagem. Quando a imagem habilitada para a Web no Dreamweaver está fora de sincronia com o arquivo original do Photoshop, ambas as setas 
do ícone ficam verdes. Quando a imagem habilitada para a Web está fora de sincroniza com o arquivo original do Photoshop, uma das setas do 
ícone fica vermelha. 


e Para atualizar um Objeto inteligente com o conteúdo atual do arquivo original do Photoshop, selecione Objeto inteligente na janela 
Documento e clique no botão Atualizar do original, no Inspetor de propriedades. 


Nota: você não precisa ter o Photoshop instalado para fazer a atualização no Dreamweaver. 


E ae « = = P iníci 
Atualizar vários Objetos inteligentes iii 


Você pode atualizar vários Objetos inteligentes de uma só vez usando o painel Ativos. O painel Ativos possibilita visualizar os Objetos inteligentes 
que talvez não possam ser selecionados na janela Documento (por exemplo, imagem de plano de fundo CSS). 


1. No painel Arquivos, clique na aba Ativos para visualizar os ativos do site. 


2. Certifique-se de que a visualização Imagens foi selecionada. Caso contrário, clique no botão Imagens. 


3. Selecione cada ativo de imagem no painel Ativos. Quando você seleciona um Objeto inteligente, é possível ver um ícone de Objeto 
inteligente no canto superior esquerdo da imagem. Imagens normais não possuem esse ícone. 


4. Em cada Objeto inteligente que você quiser atualizar, clique com o botão direito do mouse sobre o nome do arquivo e selecione Atualizar 
do original. Você também pode clicar mantendo a tecla Control pressionada para selecionar vários nomes de arquivos e atualizar todos de 
uma vez. 


Nota: você não precisa ter o Photoshop instalado para fazer a atualização no Dreamweaver. 


E « E = . P, iníci 
redimensionamento de um Objeto inteligente da 


Você pode redimensionar um Objeto inteligente na janela Documento como faria com qualquer outra imagem. 


1. Selecione o Objeto inteligente na janela Documento e arraste as alças de redimensionamento para redimensionar a imagem. Você pode 
manter a largura e a altura proporcionais mantendo a tecla Shift pressionada conforme arrasta. 


2. Clique no botão Atualizar do original no Inspetor de propriedades. 


Quando você atualiza o Objeto inteligente, a imagem da web reprocessa o novo tamanho de forma não destrutiva com base no conteúdo 
atual do arquivo original e das configurações originais de otimização. 


Edição do arquivo original do Photoshop de um Objeto inteligente is 


Após criar o Objeto inteligente na sua página do Dreamweaver, você pode editar o arquivo PSD original no Photoshop. Após fazer as alterações 
no Photoshop, você pode atualizar facilmente a imagem da Web no Dreamweaver. 


Nota: configure o Photoshop como editor principal de imagens externas. 


1. Selecione o Objeto inteligente na janela Documento. 
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2. Clique no botão Editar no Inspetor de propriedades. 


3. Faça as alterações no Photoshop e salve o novo arquivo PSD. 


4. No Dreamweaver, selecione novamente o Objeto inteligente e clique no botão Atualizar do original. 


Nota: se você tiver alterado o tamanho da imagem no Photoshop, precisará redimensionar o tamanho da imagem da Web no Dreamweaver. O 
Dreamweaver atualiza um Objeto inteligente somente com base no conteúdo do arquivo original do Photoshop e não em seu tamanho. Para 
sincronizar o tamanho de uma imagem da Web com o tamanho do arquivo original do Photoshop, clique com o botão direito do mouse na 
imagem e selecione Redefinir tamanho para original. 


Para o início 


Estados de Objetos inteligentes 


A tabela a seguir lista os vários estados de Objetos inteligentes. 


Estado de Objeto inteligente 


Imagens sincronizadas 


Ativo original modificado 


As dimensões da imagem da Web são 
diferentes da largura e altura do HTML 
selecionado. 


As dimensões do ativo original são muito 
pequenas para a largura e a altura do 
HTML selecionado. 


Ativo original não encontrado 


Descrição 


A imagem da Web está em sincronia com 
o conteúdo atual do arquivo original do 
Photoshop. Os atributos de largura e 
altura do código HTML combinam com as 
dimensões da imagem da Web. 


O arquivo original do Photoshop foi 
modificado após a criação da imagem da 
Web no Dreamweaver. 


Os atributos de largura e altura do código 
HTML são diferentes das dimensões de 
largura e altura da imagem da Web que o 
Dreamweaver criou na inserção. Se as 
dimensões da imagem da Web forem 
menores que os valores selecionados de 
largura e altura no HTML, a imagem da 
Web pode aparecer como pixels. 


Os atributos de largura e altura do código 
HTML são diferentes das dimensões de 
largura e altura do arquivo original do 
Photoshop. A imagem da Web pode 
aparecer como pixels. 


O Dreamweaver não pôde localizar o 
arquivo original do Photoshop 
especificado na caixa de texto Original do 
Inspetor de propriedades. 


Ação recomendada 


Nenhuma 


Use o botão Atualizar do original no 
Inspetor de propriedades para sincronizar 
as duas imagens. 


Use o botão Atualizar do original no 
Inspetor de propriedades para recriar a 
imagem da Web a partir do arquivo 
original do Photoshop. O Dreamweaver 
usa dimensões de altura e largura de 
HTML atualmente especificadas ao recriar 
a imagem. 


Não crie imagens da Web com dimensões 
maiores que as dimensões do arquivo 
original do Photoshop. 


Corrija o caminho do arquivo na caixa de 
texto Original do Inspetor de propriedades 
ou mova o arquivo do Photoshop para o 
local atualmente especificado. 


Zoo m Para o início 
Cópia e colagem de uma seleção do Photoshop 
Você pode copiar todas ou algumas imagens do Photoshop e colar a seleção na página do Dreamweaver como uma imagem habilitada para a 
Web. É possível copiar uma única camada ou um conjunto de camadas de uma área selecionada da imagem ou copiar uma fatia da imagem. 
Entretanto, quando se faz isso, o Dreamweaver não cria um Objeto inteligente. 


Nota: embora a função Atualizar do original não esteja disponível para imagens coladas, você ainda pode abrir e editar o arquivo original do 
Photoshop selecionando a imagem colada e clicando no botão Editar do Inspetor de propriedades. 


1. No Photoshop, execute um dos procedimentos a seguir: 
e Copie toda ou parte de uma única camada usando a ferramenta Moldura para selecionar a parte que deseja copiar e escolha Editar > 
Copiar. Somente a camada ativa da área selecionada é copiada na área de transferência. Se houver efeitos baseados em camadas, 
eles não serão copiados. 


e Copie e mescle várias camadas usando a ferramenta Letreiro para selecionar a parte que deseja copiar e escolha Editar > Copiar parte 
mesclada. Isso nivela e copia todas as camadas ativas e inferiores da área selecionada na área de transferência. Se houver efeitos 
baseados em camadas associados, eles não serão copiados. 


e Copie uma fatia usando a ferramenta Selecionar fatia para selecionar a fatia e, em seguida, escolha Editar > Copiar. Isso nivela e copia 
todas as camadas ativas e inferiores da fatia na área de transferência. 


Escolha Selecionar > Tudo para selecionar rapidamente toda a imagem para ser copiada. 
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2. No Dreamweaver (Visualização de design ou de código), coloque o ponto de inserção na página onde você deseja inserir a imagem. 


3. Selecione Editar > Colar. 


4. Na caixa de diálogo Visualização da imagem, ajuste as configurações de otimização como necessário e clique em OK. 
5. Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site. 


O Dreamweaver define a imagem de acordo com as configurações de otimização e coloca uma versão habilitada para a Web da imagem na sua 
página. As informações sobre a imagem, como o local do arquivo PSD original, são salvas em uma Design Note, independentemente de as 
Design Notes estarem ativadas para seu site. A Design Note permite que você volte para editar o arquivo de origem do Photoshop diretamente do 
Dreamweaver. 


E Reage 
Editar imagens coladas ara o início 


Após colar as imagens do Photoshop nas suas páginas do Dreamweaver, você pode editar o arquivo PSD original no Photoshop. Ao utilizar o 
fluxo de trabalho copiar/colar, a Adobe recomenda sempre manter suas edições no arquivo original PSD, e não na imagem habilitada para a Web, 
e a colar novamente para manter uma única origem. 


Nota: verifique se o Photoshop está definido como o principal editor de imagens externas para o tipo de arquivo que deseja editar. 


1. No Dreamweaver, selecione uma imagem habilitada para a Web que foi criada originalmente no Photoshop e execute um dos 
procedimentos a seguir: 
e Clique no botão Editar no Inspetor de propriedades da imagem. 


e Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no arquivo ao mesmo tempo. 


* Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma imagem, escolha Editar 
original com no menu de contexto e, em seguida, escolha Photoshop. 


Nota: esse processo presume que o Photoshop tenha sido definido como o principal editor de imagens externas para arquivos de imagem 
PSD. Você também pode definir o Photoshop como o editor padrão para os tipos de arquivo JPEG, GIF e PNG. 

2. Edite o arquivo no Photoshop. 

3. Retorne ao Dreamweaver e cole a imagem ou seleção atualizada em sua página. 


Para reotimizar a imagem a qualquer momento, selecione-a e clique no botão Editar configurações de imagem no Inspetor de propriedades. 


E dá a E ER E E ã E P, iníci 
Configuração das opções da caixa de diálogo Visualização da imagem PRE 


Ao criar um Objeto inteligente ou colar uma seleção do Photoshop, o Dreamweaver exibe a caixa de diálogo Visualização da imagem . (O 
Dreamweaver também exibe esta caixa de diálogo para qualquer outro tipo de imagem, se você selecionar a imagem e clicar no botão Editar 
configurações de imagem no Inspetor de propriedades.) Esta caixa de diálogo possibilita definir e visualizar as configurações para imagens 
habilitadas para a Web usando a combinação correta de cor, compactação e qualidade. 


Uma imagem habilitada para a Web pode ser exibida por todos os navegadores modernos e sempre tem a mesma aparência, independentemente 
do sistema ou do navegador usado pelo visualizador. Em geral, as configurações afetam a qualidade e o tamanho do arquivo. 


Nota: apenas a versão importada do arquivo de imagem é afetada, independentemente das configurações selecionadas. Os arquivos originais 
PSD do Photoshop ou PNG do Fireworks sempre permanecem inalterados. 


Predefinição Escolha a Predefinição mais adequada aos seus requisitos. O tamanho do arquivo da imagem muda de acordo com a predefinição 
escolhida. Uma visualização instantânea da imagem com a configuração aplicada é exibida em segundo plano. 


Por exemplo, para as imagens que devem ser exibidas com um alto grau da claridade, escolha PNG24 para fotos (detalhes nítidos). Selecione 
GIF para imagens de fundo (padrões) se você estiver inserindo o padrão que será a imagem do fundo da página. 


Quando uma predefinição é selecionada, suas opções configuráveis são exibidas. Para personalizar ainda mais suas configurações de 
otimização, modifique os valores dessas opções. 


(ec As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 
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Inserção de vídeo HTML5 (CC) 


Este recurso está disponível somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se à Adobe Creative 
Cloud, consulte Adobe Creative Cloud. 


O Dreamweaver permite inserir vídeo HTML5 em páginas da Web. 
O elemento de vídeo HTML5 fornece um modo padrão de incorporar filmes ou vídeos em páginas da Web. 


Para obter mais informações sobre o elemento de vídeo HTML, consulte o artigo sobre vídeo HTML5 em W3schools.com. 


Inserção de vídeo HTML5 
Visualização do vídeo no navegador 


Tutorial de vídeo 
e Adicionar vídeo HTML5 no Dreamweaver 


Para o início 


Inserção de vídeo HTML5 
1. Certifique-se de que seu cursor esteja no local em que você deseja inserir o vídeo. 
2. Selecione Inserir> Mídia> Vídeo HTML5. O elemento de vídeo HTMLS é inserido no local especificado. 


3. No painel Propriedades, especifique valores de várias opções. 


e Origem / Origem de Alt 1 / Origem de Alt 2: na Origem, insira o local do arquivo de vídeo. Como alternativa, você pode clicar no ícone 
da pasta para selecionar um arquivo de vídeo no sistema de arquivos local. O suporte de formato do vídeo varia em navegadores 
diferentes. Se o formato do vídeo na Origem não for suportado em um navegador, o formato do vídeo especificado em Origem de Alt 1 
ou Origem de Alt 2 será usado. O navegador seleciona o primeiro formato reconhecido para exibir o vídeo. 


Para adicionar vídeos rapidamente aos três campos, use a seleção múltipla. Quando você escolhe três formatos de vídeo para o mesmo 
vídeo de uma pasta, o primeiro formato na lista é usado para Origem. Os seguintes formatos na lista são usados para preencher Origem 
de Alt 1 e Origem de Alt 2 automaticamente. 


Consulte a tabela abaixo para obter mais informações sobre o navegador e formato do vídeo suportado. Para obter as últimas informações, 
consulte HTML5 — Suporte a navegador. 


Navegador MP4 WebM Ogg 
Internet Explorer 9 SIM NÃO NÃO 
Firefox 4.0 NÃO SIM SIM 
Google Chrome 6 SIM SIM SIM 
Apple Safari 5 SIM NÃO NÃO 
Opera 10.6 NÃO SIM SIM 


e Título: especifique um título para o vídeo. 

e Largura (L): insira a largura em pixel do vídeo. 

e Altura (A): insira a altura em pixel do vídeo. 

e Controles: selecione se desejar exibir os controles de vídeo como Reproduzir, Pausar e Mudo na página HTML. 

* Reprodução automática: selecione se desejar que a reprodução do vídeo seja iniciada assim que ela for carregada na página da Web. 


e Imagem do pôster: insira o local da imagem que será exibida até que o download do vídeo seja concluído ou até que o usuário clique 
em Reproduzir. Os valores de Altura e Largura são preenchidos automaticamente quando a imagem é inserida. 


* Repetição: selecione esta opção se desejar que o vídeo seja reproduzido continuamente até que o usuário o interrompa. 
e Mudo: selecione esta opção se desejar silenciar o áudio do vídeo. 

e Vídeo Flash: selecione um arquivo SWF para navegadores que não suportam vídeo HTML5. 

e Texto de emergência: forneça o texto a ser exibido se o navegador não suportar HTMLS. 


e Pré-carregar: especifique as preferências do autor em relação a como o vídeo deve ser carregado quando a página é carregada. Se 
você selecionar Automático, todo o vídeo será carregado na página de download. Se você selecionar Metadados, o download dos 
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metadados só será feito após a conclusão do download da página. 


TEA vídeo 
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[7 controls 


[) AutoPlay - prejoad 


E! Loop 
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Origem 20120721 225937.mp4 sa 
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(O Falbackdo Flash | 
so 


Texto de emergência Aguarde o download do vídeo. 


Tide Um dia em Nova York 


sa 


Painel Propriedades de vídeo HTML5 


Visualização do vídeo no navegador 


1. Salve a página da Web. 


2. Selecione Arquivo > Visualizar no navegador. Selecione o navegador no qual deseja visualizar o vídeo. 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Para o início 


Criação e abertura de documentos 


A interface de usuário da Dreamweaver CC e posterior foi simplificada. Como resultado, você talvez não consiga localizar algumas das opções 
descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo. 


Sobre a criação de documentos do Dreamweaver 

Tipos de arquivo do Dreamweaver 

Criação de um layout que usa uma página em branco 

Criação de um modelo em branco 

Criação de uma página baseada em um modelo existente 

Criação de uma página baseada em um arquivo de amostra do Dreamweaver 
Criação de outros tipos de página 

Gravação e reversão de documentos 

Definição de tipo e codificação de documento padrão 

Conversão de HTMLS5 para um tipo de documento mais antigo 

Definição da extensão de arquivo padrão de novos documentos em HTML 
Abertura e edição de documentos existentes 

Abertura de arquivos relacionados 

Abertura de Arquivos relacionados dinamicamente 

Limpeza de arquivos em HTML do Microsoft Word 


Para o início 


Sobre a criação de documentos do Dreamweaver 


O Dreamweaver oferece um ambiente flexível para trabalhar com uma variedade de documentos da Web. Além dos documentos em HTML, você 
pode criar e abrir vários documentos baseados em texto, inclusive CFML (Linguagem de markup do ColdFusion), ASP, JavaScript, e CSS (Folhas 
de estilos em cascata). Também há suporte para arquivos de código fonte como, por exemplo, Visual Basic, .NET, C& e Java. 


O Dreamweaver fornece diversas opções para criação de um novo documento. Você pode criar qualquer um dos seguintes: 


* Um novo documento em branco ou modelo 


* Um documento baseado em um dos layouts de página predefinida que é fornecido com o Dreamweaver, incluindo mais de 30 layouts de 
página baseados em CSS 


e Um documento baseado em um dos modelos existentes 


Você também pode definir as preferências do documento. Por exemplo, caso normalmente trabalhe com um tipo de documento, você pode 
defini-lo como sendo o tipo de documento padrão para novas páginas criadas. 


Você pode definir facilmente propriedades de documento como, por exemplo, marcas meta, títulos de documento e cores de fundo, além de 
várias outras propriedades de página na Visualização de design ou na Visualização de código. 


= & P iníci 
Tipos de arquivo do Dreamweaver adia, 


Você pode trabalhar com diversos tipos de arquivos no Dreamweaver. O tipo de arquivo primário com o qual você trabalhará é o arquivo HTML. 
Os arquivos HTML — ou Linguagem de markup de hipertexto — contêm a linguagem baseada na tag responsável pela exibição de uma página da 
Web em um navegador. Você pode salvar arquivos HTML usando a extensão .html ou .htm. O Dreamweaver salva arquivos usando por padrão a 
extensão .html. 


O Dreamweaver permite que você crie e edite páginas da Web baseadas em HTMLS. Layouts iniciais também estão disponíveis para a criação 
de páginas HTMLS5 a partir do zero. 


A seguir, encontram-se alguns dos outros tipos comuns de arquivos que talvez você use ao trabalhar com o Dreamweaver: 


CSS Os arquivos em folha de estilos em cascata têm uma extensão .css. Eles são usados para formatar conteúdo em HTML e controlar o 
posicionamento de vários elementos de página. 


GIF Os arquivos Graphics Interchange Format têm uma extensão .gif. GIF é um formato gráfico para Web conhecido para desenhos, logotipos, 
gráficos com áreas transparentes e animações. Os GIFs contêm 256 cores no máximo. 


JPEG Os arquivos Joint Photographic Experts Group (receberam o nome da organização que criou o formato) têm uma extensão .jpg e 
costumam ser fotografias ou imagens coloridas de alta resolução. O formato JPEG é mais conhecido por conta de fotografias digitais ou 
digitalizadas, imagens que usam texturas, imagens com transições de gradientes de cores e todas as imagens que exijam mais de 256 cores. 
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XML Os arquivos em Linguagem de markup extensível têm uma extensão .xml. Eles contêm dados em uma forma não processada que pode ser 
formatada usando a XSL (Linguagem de folha de estilos extensível). 


XSL Os arquivos em Linguagem de folha de estilos extensível têm uma extensão .xsl ou .xsit. Eles são usados para aplicar estilo a dados em 
XML que você deseja exibir em uma página da Web. 


E gia Para o início 
Criação de um layout que usa uma página em branco 


Você pode criar uma página que contenha um layout de CSS previamente elaborado ou criar uma página totalmente em branco e, em seguida, 
criar um layout próprio. 


1. Selecione Arquivo > Novo. 


2. Na categoria Página em branco da caixa de seleção Novo Documento, selecione o tipo de página que você deseja criar na coluna Tipo de 
página. Por exemplo, selecione HTML para criar uma página HTML simples. 


3. Se você deseja que sua nova página contenha um layout de CSS, selecione um layout predefinido de CSS na coluna Layout; caso 
contrário, selecione Nenhum. Com base na seleção, uma visualização e a descrição do layout selecionado são exibidas no lado direito da 
caixa de diálogo. 


Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna: 


Fixa A largura da coluna é especificada em pixels. A coluna não é redimensionada com base no tamanho do navegador ou nas 
configurações de texto do visitante do site. 


Líquida A largura da coluna é especificada como uma porcentagem da largura do navegador do visitante. O design se adapta caso o 
visitante do site torne o navegador mais largo ou mais estreito, mas não se altera com base nas configurações de texto do visitante do site. 


O Dreamweaver também oferece dois layouts HTML5 CSS: fixo de duas e três colunas. 
Nota: na Dreamweaver CC e posterior, somente os layouts CSS HTML5 estão disponíveis. 


4. Selecione um tipo de documento no menu pop-up Tipo de documento. Na maioria dos casos, você pode usar a seleção padrão, XHTML 
1.0 Transitional ou HTMLS5 (Dreamweaver CC). 


A seleção de uma das definições do tipo de documento em XHTML no menu TipoDoc (DTD) torna a página compatível com XHTML. Por 
exemplo, você pode criar um documento HTML compatível com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no 
menu. A XHTML (Linguagem de markup de hipertexto extensível) é uma reformulação do HTML como um aplicativo XML. Em geral, o uso 
de XHTML oferece a você os benefícios de XML, ao mesmo tempo em que garante a compatibilidade reversa e futura dos documentos da 
Web. 


Nota: para obter mais informações sobre XHTML, consulte o site do World Wide Web Consortium (W3C), que contém a especificação de 
XHTML 1.1 — XHTML baseada em módulo (www.w3.org/TR/xhtml11/) e de XHTML 1.0 (www. w3c.org/TR/xhtml1/), bem como sites 
validadores de XHTML para arquivos baseados na Web (hitp://validator.w3.org/) e arquivos locais (http://validator.w3.org/file-upload.html). 


5. Caso você tenha selecionado um layout de CSS na coluna Layout, selecione um local para a CSS de layout no menu pop-up CSS de 
layout. 


Adicionar a cabeçalho Adiciona CSS do layout ao cabeçalho da página que você está criando. 


Criar novo arquivo Adiciona CSS do layout a um novo arquivo CSS externo e anexa a nova folha de estilos à página que você está 
criando. 


Vincular a arquivo existente Permite a você especificar um arquivo CSS existente que já contém as regras CSS necessárias ao layout. 
Para fazer isso, clique no ícone Anexar folha de estilo acima do painel de arquivo Anexar CSS e selecione uma folha de estilo CSS 
existente. Essa opção é especialmente útil quando você deseja usar o mesmo layout de CSS (as regras de CSS contidas em um único 


arquivo) em vários documentos. 


6. (Opcional) Você também pode anexar as folhas de estilos CSS à nova página (não relacionada ao layout CSS) ao criar a página. Para 
fazer isso, clique no ícone Anexar folha de estilo acima do painel &2Anexar arquivo CSS e selecione uma folha de estilo CSS. 


Para obter uma descrição detalhada desse processo, consulte o artigo Anexar automaticamente uma folha de estilos a novos documentos 
de David Powers. 


7. Selecione Ativar InContext Editing se você deseja criar uma página com o InContext Editing ativado assim que você salvá-la. 


Uma página ativada para InContext Editing deverá ter pelo menos uma tag div que pode ser especificada como região editável. Por 
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exemplo, se tiver selecionado o tipo de página HTML, você deverá selecionar um dos layouts de CSS para sua nova página, já que esses 
layouts já contêm tags div pré-definidas. A região editável pela InContext Editing é automaticamente colocada na tag div com a ID 
content. Você poderá, posteriormente, adicionar mais regiões editáveis à página, se desejar. 


Nota: a InContext Editing foi removida na Dreamweaver CC e posterior. 


8. Clique em Preferências se você deseja configurar as preferências padrão do documento, como um tipo de documento, codificação e uma 
extensão de arquivo. 


9. Clique em Obter mais conteúdo se deseja abrir o Dreamweaver Exchange onde você poderá baixar mais conteúdo de design de página. 
10. Clique no botão Criar. 


11. Salve o novo documento (Arquivo > Salvar). 
12. Na caixa de diálogo exibida, vá até a pasta em que deseja salvar o arquivo. 


É uma boa ideia salvar seu arquivo em um site do Dreamweaver. 
13. Na caixa Nome do arquivo, digite um nome para o arquivo. 


Evite o uso de espaços e de caracteres especiais em nomes de arquivo e pasta e não comece um nome de arquivo com um numeral. Em 
particular, não use caracteres especiais (como, por exemplo, é, ç ou %) ou pontuações (como, por exemplo, dois-pontos, barras ou pontos) 
nos nomes de arquivo que você pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o 
carregamento, o que fará com que todos os links para o arquivo sejam desfeitos. 


é ás P. iníci 
Criação de um modelo em branco PR UME 


Você pode usar a caixa de diálogo Novo documento para criar os modelos do Dreamweaver. Por padrão, os modelos são salvos na pasta 
Modelos do seu site. 


1. Selecione Arquivo > Novo. 
2. Na caixa de diálogo Novo documento, selecione a categoria Modelo em branco. 


3. Selecione o tipo de página que você deseja criar na coluna Tipo de modelo. Por exemplo, selecione Modelo de HTML para criar uma 
página de HTML simples, selecione Modelo de ColdFusion para criar um modelo de ColdFusion e assim por diante. 


4. Se você deseja que sua nova página contenha um layout de CSS, selecione um layout predefinido de CSS na coluna Layout; caso 
contrário, selecione Nenhum. Com base na seleção, uma visualização e a descrição do layout selecionado são exibidas no lado direito da 
caixa de diálogo. 


Os layouts de CSS previamente criados fornecem os seguintes tipos de coluna: 


Fixa A largura da coluna é especificada em pixels. A coluna não é redimensionada com base no tamanho do navegador ou nas 
configurações de texto do visitante do site. 


Líquida A largura da coluna é especificada como uma porcentagem da largura do navegador do visitante. O design se adapta caso o 
visitante do site torne o navegador mais largo ou mais estreito, mas não se altera com base nas configurações de texto do visitante do site. 


5. Selecione um tipo de documento no menu pop-up TipoDoc. Na maioria dos casos, esta seleção padrão ficará selecionada, XHTML 1.0 
Transitional. 


A seleção de uma das definições do tipo de documento em XHTML no menu TipoDoc (DTD) torna a página compatível com XHTML. Por 
exemplo, você pode criar um documento HTML compatível com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no 
menu. A XHTML (Linguagem de markup de hipertexto extensível) é uma reformulação do HTML como um aplicativo XML. Em geral, o uso 
de XHTML oferece a você os benefícios de XML, ao mesmo tempo em que garante a compatibilidade reversa e futura dos documentos da 
Web. 


Nota: para obter mais informações sobre XHTML, consulte o site do World Wide Web Consortium (W3C), que contém a especificação de 
XHTML 1.1 — XHTML baseada em módulo (www.w3.org/TR/xhtml11/) e de XHTML 1.0 (www. w3c.org/TR/xhtml11/), bem como sites 
validadores de XHTML para arquivos baseados na Web (hitp://validator.w3.org/) e arquivos locais (http://validator.w3.org/file-upload.html). 


6. Caso você tenha selecionado um layout de CSS na coluna Layout, selecione um local para a CSS de layout no menu pop-up CSS de 
layout. 


Adicionar a cabeçalho Adiciona CSS do layout ao cabeçalho da página que você está criando. 


Criar novo arquivo Adiciona CSS do layout a uma nova folha de estilos CSS externa e anexa a nova folha de estilos à página que você 
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13. 


14. 


está criando. 


Vincular a arquivo existente Permite a você especificar um arquivo CSS existente que já contém as regras de CSS necessárias ao layout. 
Para fazer isso, clique no ícone Anexar folha de estilo acima do e painel Anexar arquivo CSS e selecione uma folha de estilo CSS 
existente. Essa opção é especialmente útil quando você deseja usar o mesmo layout de CSS (as regras de CSS contidas em um único 
arquivo) em vários documentos. 


(Opcional) Você também pode anexar as folhas de estilos CSS à nova página (não relacionada ao layout CSS) ao criar a página. Para 
fazer isso, clique no ícone Anexar folha de estilo acima do & painel Anexar arquivo CSS e selecione uma folha de estilo CSS. 


Selecione Ativar InContext Editing se você deseja criar uma página com o InContext Editing ativado assim que você salvá-la. 


Uma página ativada para InContext Editing deverá ter pelo menos uma tag div que pode ser especificada como região editável. Por 
exemplo, se tiver selecionado o tipo de página HTML, você deverá selecionar um dos layouts de CSS para sua nova página, já que esses 
layouts já contêm tags div pré-definidas. A região editável pela InContext Editing é automaticamente colocada na tag div com a ID 
content. Você poderá, posteriormente, adicionar mais regiões editáveis à página, se desejar. 


Clique em Preferências se você deseja configurar as preferências padrão do documento, como um tipo de documento, codificação e uma 
extensão de arquivo. 


. Clique em Obter mais conteúdo se deseja abrir o Dreamweaver Exchange onde você poderá baixar mais conteúdo de design de página. 
. Clique no botão Criar. 


. Salve o novo documento (Arquivo > Salvar). Caso você ainda não tenha adicionado regiões editáveis ao modelo, uma caixa de diálogo é 


exibida informando você de que não há regiões editáveis no documento. Clique em OK para fechar a caixa de diálogo. 


Na caixa de diálogo Salvar como, selecione um local para salvar o modelo. 


Na caixa Nome de arquivo, digite um nome para o novo modelo. Você não precisa acrescentar uma extensão de arquivo ao nome do 
modelo. Ao clicar em Salvar, a extensão .dwt é adicionada ao novo modelo, que será salvo na pasta Modelos do seu site. 


Evite o uso de espaços e de caracteres especiais em nomes de arquivo e pasta e não comece um nome de arquivo com um numeral. Em 
particular, não use caracteres especiais (como, por exemplo, é, ç ou %) ou pontuações (como, por exemplo, dois-pontos, barras ou pontos) 
nos nomes de arquivo que você pretende colocar em um servidor remoto. Muitos servidores alteram esses caracteres durante o 
carregamento, o que fará com que todos os links para o arquivo sejam desfeitos. 


Para o início 


Criação de uma página baseada em um modelo existente 


Você pode selecionar, visualizar e criar um novo documento usando um modelo existente. Você pode usar a caixa de diálogo Novo documento 
para selecionar um modelo de qualquer um dos seus sites definidos do Dreamweaver ou usar o painel Ativos para criar um novo documento de 
um modelo existente. 


Criação de um documento com base em um modelo 


1. 


Selecione Arquivo > Novo. 
Na caixa de diálogo Novo documento, selecione a categoria Página de modelo. 


Na coluna Site, selecione o site do Dreamweaver que contém o modelo que você deseja usar e, em seguida, selecione um modelo da lista 
à direita. 


Desmarque Atualizar a página quando o modelo for alterado caso você queira atualizar a página sempre que fizer alterações no modelo no 
qual a página se baseie. 


Clique em Preferências se você deseja configurar as preferências padrão do documento, como um tipo de documento, codificação e uma 
extensão de arquivo. 


Clique em Obter mais conteúdo se deseja abrir o Dreamweaver Exchange onde você poderá baixar mais conteúdo de design de página. 


Clique em Criar e salve o documento (Arquivo > Salvar). 


Criação de um documento de um modelo no painel Ativos 


1. 


Abra o painel Ativos (Janela > Ativos), caso ele ainda não esteja aberto. 
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No painel Ativos, clique no ícone Modelos E3 à esquerda para exibir a lista dos modelos no site atual. 


Caso tenha acabado de criar o modelo que você deseja aplicar, você talvez precise clicar no botão Atualizar para vê-lo. 


Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no modelo que você deseja aplicar e, em 
seguida, selecione Novo a partir de modelo. 


O documento é aberto na janela Documento. 


Salve o documento. 


Para o início 


Criação de uma página baseada em um arquivo de amostra do Dreamweaver 


O Dreamweaver é acompanhado de vários arquivos de design CSS profissionalmente desenvolvidos e páginas iniciais para aplicativos móveis. 
Você pode usar esses arquivos de amostra como ponto de partida para o design de páginas nos sites. Quando você criar um documento 
baseado em um arquivo simples, o Dreamweaver criará uma cópia do arquivo. 


Você pode visualizar um arquivo de amostra e ler uma breve descrição dos elementos de design de um documento na caixa de diálogo Novo 
documento. No caso das folhas de estilos CSS, você pode copiar uma folha de estilos previamente criada e aplicá-la aos documentos. 


q. 


Selecione Arquivo > Novo. 


Na caixa de diálogo Novo documento, selecione a categoria Página da amostra. 

Na Dreamweaver CC, selecione a categoria Modelos iniciais. 

Na coluna Pasta de modelos, selecione Folha de estilos CSS ou Iniciadores de disp. móveis; em seguida selecione um arquivo de amostra 
da lista à direita. 

Nota: a opção Folha de estilos CSS foi removida na Dreamweaver CC e posterior. 

Clique no botão Criar. 

O novo documento é aberto na janela Documento (Visualizações de código e design). Se você tiver selecionado Folha de estilo CSS, ela 
será aberta na Visualização de código. 


Salve o documento (Arquivo > Salvar). 


Caso a caixa de diálogo Copiar arquivos dependentes seja exibida, defina as opções e, em seguida, clique em Copiar para copiar os ativos 
para a pasta selecionada. 


Você pode selecionar seu próprio local para os arquivos dependentes ou usar o local padrão de pasta que o Dreamweaver gera (baseado 
no nome da fonte do arquivo modelo). 


Consulte também 


Para o início 


Criação de outros tipos de página 


A categoria Outros da caixa de diálogo Novo documento permite criar vários tipos de páginas que talvez você deseje usar no Dreamweaver, 
incluindo C%, VBScript e páginas apenas com texto. 


1. 


Gravação e reversão de documentos 


Selecione Arquivo > Novo. 


Na caixa de diálogo Novo documento, selecione a categoria Outros. 


Nota: a categoria Outro foi removida na Dreamweaver CC e posterior. 
Selecione o tipo de documento que você deseja criar na coluna Tipo de página e clique no botão Criar. 


Salve o documento (Arquivo > Salvar). 


Para o início 


Você pode salvar um documento usando seu nome e local atual, ou salvar uma cópia de um documento usando outro nome e local. 


Ao nomear arquivos, evite usar espaços e caracteres especiais nos nomes de arquivo e pasta. Em particular, não use caracteres especiais (é, ç 
ou %) ou pontuação (como dois-pontos, barras ou pontos) nos nomes de arquivos que você pretende colocar em um servidor remoto. Muitos 
servidores alteram esses caracteres durante o carregamento, o que fará com que quaisquer links para o arquivo sejam quebrados. Além disso, 
não comece um nome de arquivo com números. 
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Gravação de um documento 
1. Siga um destes procedimentos: 
e Para substituir a versão atual no disco e salvar todas as alterações feitas, selecione Arquivo > Salvar. 


e Para salvar o arquivo em uma pasta diferente ou com outro nome, selecione Arquivo > Salvar como. 


2. Na caixa de diálogo Salvar como exibida, vá até a pasta em que deseja salvar o arquivo. 


3. Na caixa de texto Nome do arquivo, digite um nome para o arquivo. 


4. Clique em Salvar para salvar o arquivo. 


Gravação de todos os documentos abertos 


1. Selecione Arquivo > Salvar tudo. 
2. Se houver documentos não salvos abertos, a caixa de diálogo Salvar como é exibida para cada documento não salvo. 
Na caixa de diálogo exibida, vá até a pasta em que deseja salvar o arquivo. 


3. Na caixa Nome do arquivo, digite um nome para o arquivo e clique em Salvar. 


Reversão para a última versão salva de um documento 


1. Selecione Arquivo > Reverter. 
Uma caixa de diálogo pergunta se você deseja descartar as alterações e reverter para a versão salva anteriormente. 


2. Clique em Sim para reverter para a versão anterior. Clique em Não para manter as alterações. 


Nota: se você salvar um documento e, em seguida, sair do Dreamweaver, não será possível reverter para a versão anterior do documento 
quando reiniciar o Dreamweaver. 


Definição de tipo e codificação de documento padrão Nida 


Você pode definir o tipo de documento usado como documento padrão de um site. 
Por exemplo, caso a maioria das páginas do site seja de um tipo de arquivo específico (como, por exemplo, documentos do ColdFusion, HTML ou 
ASP), você pode definir as preferências de documento que criam automaticamente novos documentos do tipo de arquivo especificado. 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
Você poderá também clicar no botão Preferências na caixa de diálogo Novo documento para configurar as preferências do novo 
documento quando um novo documento for criado. 
2. Clique em Novo documento na lista de categorias à esquerda. 
3. Defina ou altere as preferências conforme necessário e clique em OK para salvá-las. 


Documento padrão Selecione um tipo de documento a ser usado nas páginas que você criar. 


Extensão padrão Especifique a extensão de arquivo que você prefere (.htm ou .html) para novas páginas em HTML criadas. 
Nota: essa opção está desativada para outros tipos de arquivo. 
Tipo padrão de documento (DDT) Selecione uma das definições do tipo padrão de documento (DTD) em XHTML para tornar novas 


páginas compatíveis com XHTML. Por exemplo, você pode criar um documento HTML compatível com XHTML selecionando XHTML 1.0 
Transitional ou XHTML 1.0 Strict no menu. 


Codificação padrão Especifique a codificação a ser usada quando uma nova página é criada, bem como quando um documento é aberto 
sem especificar nenhuma codificação. 


Se você selecionar Unicode (UTF-8) como a codificação de documento, a codificação da entidade não será necessária, pois o UTF-8 
poderá representar com segurança todos os caracteres. Se você selecionar outra codificação de documento, a codificação de entidade 
provavelmente será necessária para representar determinados caracteres. Para obter mais informações sobre as entidades de caractere, 
consulte www.w3.org/TR/REC-html40/sgml/entities.himl. 


Se você selecionar Unicode (UTF-8) como a codificação padrão, será possível incluir uma marca BOM (marca de ordem de byte) no 
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documento selecionando a opção Incluir assinatura Unicode (BOM). 


Uma BOM consiste em 2 a 4 bytes no início de um arquivo de texto que identifica um arquivo como Unicode, bem como a ordem dos bytes 
a seguir. Como a codificação UTF-8 não tem ordem de bytes, a adição de um BOM UTF-8 é opcional. Na UTF-16 e UTF-32, ela é 
obrigatória. 

Formulário de normalização unicode Selecione uma destas opções caso você escolha Unicode (UTF-8) como codificação padrão. 

Há quatro formulários de normalização unicode. O mais importante deles é o formulário de normalização C, pois é o formulário mais comum 


utilizado no modelo de caractere da World Wide Web. A Adobe fornece os outros três para ser mais completa. 


Mostrar caixa de diálogo Novo documento ao pressionar Control+N Desmarque essa opção (“on Command+N” para Macintosh) a fim 
de criar automaticamente um documento do tipo padrão quando você usa o comando principal. 


No Unicode, há caracteres que são visualmente semelhantes, mas que podem ser armazenados no documento de diferentes maneiras. Por 
exemplo, “&” (e-umlaut) pode ser representado como um caractere único, “e com trema”, ou como dois caracteres, “e latino regular” + 
“trema”. O caractere de combinação Unicode é aquele utilizado com o caractere anterior; sendo assim, o trema apareceria acima do “e 
latino”. Os dois formulários têm como resultado a mesma tipografia visual, mas o que é salvo no arquivo é diferente em cada formulário. 


A normalização é o processo que garante que todos os caracteres que podem ser salvos de formas diferentes serão salvos de uma mesma 
forma. Ou seja, todos os caracteres “é” de um documento serão salvos como um único “e com trema” ou como “e” + “trema” , e não de 
duas formas em um documento. 


Para obter mais informações sobre a normalização unicode e as formas específicas que podem ser usadas, consulte o site da Unicode em 
www .unicode.org/reports/tr15. 


Conversão de HTMLS para um tipo de documento mais antigo diáii 


A utilização de Arquivo > Converter para alternar entre HTML5 e um tipo de arquivo mais antigo não remove elementos HTMLS5 ou atributos. 
Somente as modificações de tipo de arquivo e as barras (para XHTML) são inseridas. 


As tags semânticas, como <header> e <article>, e os atributos, como required, placeholder e type="number", não são afetados. 


Nota: a opção Converter foi removida na Dreamweaver CC e posterior. 


A xs « as P, iníci 
Definição da extensão de arquivo padrão de novos documentos em HTML ida 


Você pode definir a extensão padrão de arquivos de documentos em HTML criados no Dreamweaver. Por exemplo, você pode usar uma 
extensão .htm ou .html para todos os novos documentos em HTML. 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
Você poderá também clicar no botão Preferências na caixa de diálogo Novo documento para configurar as preferências do novo 
documento quando um novo documento for criado. 
2. Clique em Novo documento na lista de categorias à esquerda. 


3. Verifique se HTML está selecionado no menu pop-up Documento padrão. 


4. Na caixa Extensão padrão, especifique a extensão de arquivo que você deseja para os novos documentos em HTML criados no 
Dreamweaver. 
No Windows, você pode especificar as seguintes extensões: .html, .htm, .shtml, .shtm, .stm, .tpl, .lasso, .xhtml. 


No Macintosh, você pode especificar as seguintes extensões: .html, .htm, .shtml, .shtm, tpl, .lasso, .xhtml, .ssi. 


= ERR RNEE 
Abertura e edição de documentos existentes PR 


Você pode abrir uma página da Web ou um documento baseado em texto que tenha sido criado ou não no Dreamweaver e editá-lo na 
Visualização de design ou código. 


Se o documento aberto for um arquivo do Microsoft Word salvo como um documento em HTML document, você poderá usar o comando Limpar 
HTML do Word para remover as tags de markup estranhas que o Word insere nos arquivos HTML. 


Para limpar HTML ou XHTML que não foi gerado pelo Microsoft Word, use o comando Limpar HTML. 


Você também pode abrir arquivos de texto que não são em HTML como, por exemplo, arquivos do JavaScript, arquivos em XML, folhas de estilos 
CSS ou arquivos de texto salvos por processadores ou editores de texto. 
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1. Selecione Arquivo > Abrir. 
Você também pode usar o painel Arquivos para abrir arquivos. 
2. Navegue até e selecione o arquivo que você deseja abrir. 
Nota: se ainda não tiver feito isso, será uma boa ideia organizar os arquivos que você planeja abrir e editar em um site do Dreamweaver, 
em vez de abri-los de outro local. 


3. Clique em Abrir. 


O documento é aberto na janela Documento. JavaScript, texto e folhas de estilo CSS são abertos na Visualização de código por padrão. É 
possível atualizar o documento enquanto você trabalha no Dreamweaver e salvar as alterações no arquivo. 


. - Para o início 
Abertura de arquivos relacionados gi 


O Dreamweaver permite exibir arquivos relacionados ao documento principal, sem perder o foco do documento principal. Por exemplo, se você 
tem arquivos CSS e JavaScript anexados a um documento principal, o Dreamweaver permite exibir e editar esses arquivos relacionados na janela 
Documento, ao mesmo tempo que mantém o documento principal visível. 


Nota: arquivos rel. dinamicamente (tais como arquivos PHP em Sistemas de gerenciamento de conteúdo) são abordados na próxima seção de 
Ajuda. 


Por padrão, o Dreamweaver mostra os nomes de todos arquivos relacionados a um documento principal na barra de ferramentas Arquivos 
relacionados abaixo do título de documento principal. A ordem dos botões na barra de ferramentas segue a ordem dos links de arquivos 
relacionados existentes no documento principal. 


Nota: se estiver faltando um arquivo relacionado, o Dreamweaver ainda exibirá o botão correspondente na barra de ferramentas Arquivos 
relacionados. Se você clicar no botão, no entanto, o Dreamweaver não exibe nada. 


O Dreamweaver oferece suporte aos seguintes tipos de arquivos relacionados: 
e Arquivos de script do cliente 
e Inclusões do servidor 


e Fontes de conjuntos de dados do Spry (XML e HTML) 


e Folhas de estilos CSS externas (incluindo folhas de estilos aninhadas) 


Abertura de um arquivo relacionado na barra de ferramentas Arquivos relacionados 
Siga um destes procedimentos: 


e Na barra de ferramentas Arquivos relacionados, na parte superior do documento, clique no nome do arquivo relacionado que deseja abrir. 


e Na barra de ferramentas Arquivos relacionados, clique com o botão direito do mouse no nome do arquivo relacionado que deseja abrir e 
selecione Abrir como arquivo separado, no menu de contexto. Ao abrir um arquivo relacionado por este método, o documento principal não 
permanecerá visível simultaneamente. 


Abertura de um arquivo relacionado no Navegador de código 
1. Coloque o ponto de inserção em uma linha ou uma área que você sabe ser afetada por um arquivo relacionado. 
2. Espere até que o indicador do Navegador de código seja exibido e, em seguida, clique nele para abrir o Navegador de código. 
3. Passe o mouse sobre os itens no Navegador de código para ver mais informações sobre eles. Por exemplo, se você deseja alterar uma 
propriedade de cor CSS específica mas não sabe em que regra ela está, é possível localizar a propriedade focalizando as regras 


disponíveis no Navegador de código. 


4. Clique no item desejado para abrir o arquivo relacionado correspondente. 


Retorno ao código-fonte do documento principal 


e Clique no botão Código-fonte na barra de ferramentas Arquivos relacionados. 


Alteração da exibição de arquivos relacionados 
Você pode exibir os arquivos relacionados de diversas maneiras: 


e Ao abrir um arquivo relacionado na Visualização de design ou nas Visualizações de código e design (visualização dividida), o arquivo 
relacionado é exibido na visualização dividida acima da Visualização de design do documento principal. 
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Você poderá selecionar Visualizar > Visualização de design na parte superior se desejar que o arquivo relacionado seja exibido na parte 
inferior da janela Documento. 


e Ao abrir um arquivo relacionado nas Visualizações divididas verticalmente de código e design (Visualizar > Dividir verticalmente), o arquivo 
relacionado é exibido na visualização dividida junto com a Visualização de design do documento principal. 


Você pode marcar ou desmarcar a Visualização de design à esquerda (Visualizar > Visualização de design à esquerda), dependendo do 
local em que você deseja a Visualização de design. 


e Ao abrir um arquivo relacionado na Visualização de dividir código ou Visualização de dividir código na vertical (Visualizar > Visualização de 
dividir código e Visualizar > dividir verticalmente), o arquivo relacionado será exibido em uma visualização dividida abaixo, acima ou ao lado 
do do código-fonte do documento principal, dependendo das opções selecionadas. 


A “visualização de código” na opção de exibição se refere ao código-fonte do documento principal. Por exemplo, se você selecionar 
Visualizar > Visualização de código na parte superior, o Dreamweaver mostrará o código-fonte do documento principal na metade da parte 
superior da janela Documento. Se você selecionar Visualizar > Visualização de código à esquerda, o Dreamweaver mostrará o código-fonte 
do documento principal à esquerda da janela Documento. 


e A Visualização de código padrão não permite exibir Documentos relacionados ao mesmo tempo que o código-fonte do documento principal. 


Desativação de arquivos relacionados 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Na categoria Geral, desmarque Ativar arquivos relacionados. 


; & a g Para o início 
Abertura de Arquivos relacionados dinamicamente pe 


O recurso de Arquivos relacionados dinamicamente estende a funcionalidade do recurso de Arquivos relacionados permitindo que você veja os 
arquivos relacionados das páginas dinâmicas na barra de ferramentas Arquivos relacionados. Especificamente, o recurso Arquivos relacionados 
dinamicamente permite a visualização das numerosas inclusões dinâmicas necessárias para gerar o código de tempo de execução para as 
conhecidas estruturas de fonte aberta do Sistema de gerenciamento de conteúdo PHP, tais como WordPress, Drupal e Joomla!. 


Para usar o recurso Arquivos relacionados dinamicamente, é necessário que você tenha acesso a um servidor de aplicativo PHP remoto ou local 
que execute WordPress, Drupal ou Joomla!. Uma abordagem comum para páginas de teste é definir um servidor de aplicativo PHP de host local 
e testar as páginas localmente. 


Antes de testar as páginas, é necessário que você execute as seguintes etapas: 


e Defina um site Dreamweaver e certifique-se de ter preenchido a caixa de texto URL da Web na caixa de diálogo Configuração de site. 
e Configure um servidor de aplicativo PHP. 
Nota: o servidor deve estar sendo executado antes de você tentar trabalhar com os Arquivos relacionados dinamicamente no Dreamweaver. 

* Instale WordPress, Drupal ou Joomla! no servidor de aplicativo. Para obter mais informações, consulte: 

* Instalação do WordPress 

e Instalação do Drupal 

e Instalação do Joomla 
e No Dreamweaver, defina uma pasta local em que você baixará e editará os arquivos CMS. 
e Defina o local de instalação dos arquivos WordPress, Drupal ou Joomla! como sua pasta de teste remota. 


e Baixe dos arquivos CMS da pasta remota. 


Definição das preferências de Arquivos relacionados dinamicamente 

Quando você abrir uma página associada aos Arquivos relacionados dinamicamente, o Dreamweaver pode identificar os arquivos 
automaticamente ou permitir a identificação dos arquivos manualmente (o que é possível clicando em um link na barra Informações acima da 
página). A configuração padrão é identificação manual. 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh OS). 
2. Na categoria Geral, verifique se a opção Ativar arquivos relacionados está selecionado. 


3. Selecione Manualmente ou Automaticamente no menu pop-up arquivos rel. dinamicamente. Também é possível desativar a identificação 
inteiramente selecionando Desativado. 


Identificação de Arquivos relacionados dinamicamente 
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1. Abra uma página que tenha Arquivos relacionados dinamicamente associados a ela—por exemplo, página raiz do site index.php de um site 
WordPress, Drupal ou Joomla!. 


2. Se a identificação de Arquivos relacionados dinamicamente estiver definida como manual (padrão), clique no link Identificar na barra de 
Informações que aparece acima da página na janela Documento. 


Se a identificação de Arquivos relacionados dinamicamente estiver ativada automaticamente, uma lista de Arquivos relacionados 
dinamicamente será exibida na barra de ferramentas Arquivos relacionados. 


A ordem dos Arquivos relacionados e Arquivos relacionados dinamicamente na barra de ferramentas Arquivos relacionados é a seguinte: 


e Arquivos relacionados estáticos (ou seja, arquivos relacionados que não exigem qualquer tipo de processamento dinâmico) 
e Arquivos relacionados externos (ou seja, arquivos .css e .js) que estão anexados ao servidor de caminho dinâmico que inclui arquivos 


e O servidor de caminho dinâmico inclui arquivos (ou seja, arquivos .php, .inc e .module) 


Filtro de arquivos relacionados 
Como Arquivos relacionados e Arquivos relacionados dinamicamente podem ser com frequência numerosos, o Dreamweaver permite o filtro de 
Arquivos relacionados para que seja possível localizar os arquivos com os quais você deseja trabalhar. 


1. Abra uma página que tenha Arquivos relacionados a ela. 
2. Identifique os Arquivos relacionados dinamicamente caso seja necessário. 
3. Clique no ícone de Filtrar arquivos relacionados no lado direito da barra de ferramentas Arquivos relacionados. 


4. Selecione os tipos de arquivos que você deseja visualizar na barra de ferramentas Arquivos relacionados. Por padrão, o Dreamweaver 
seleciona todos os Arquivos relacionados. 
5. Para criar um filtro personalizado, clique no ícone de Filtrar arquivos relacionados e selecione Filtro personalizado. 


A caixa de diálogo Filtro personalizado permite somente filtrar os nomes exatos de arquivos (estilo.css), extensões de arquivos (.php) e 
expressões curingas usando asteriscos (*menu*). É possível filtrar expressões curingas múltiplas pela separação de cada expressão com 
um ponto-e-vírgula (por exemplo, estilo.css; *.js; *tpl.php). 


Nota: as configurações de filtro não se mantêm após o fechamento do arquivo. 


Limpeza de arquivos em HTML do Microsoft Word Para o início 


Você pode abrir documentos salvos pelo Microsoft Word como arquivos em HTML e, em seguida, usar o comando Limpar HTML do Word para 
remover o código HTML estranho gerado pelo Word. O comando Limpar HTML do Word está disponível para documentos salvos como arquivos 
em HTML pelo Word 97 ou posterior. 


O código que o Dreamweaver remove é usado principalmente pelo Word para formatar e exibir documentos no Word e não é necessário para 
exibir o arquivo em HTML. Mantenha uma cópia do arquivo do Word (.doc) original como backup porque você talvez não consiga reabrir o 
documento em HTML no Word por ter aplicado o recurso Limpar HTML do Word. 


Para limpar HTML ou XHTML que não foi gerado pelo Microsoft Word, use o comando Limpar HTML. 
1. Salve o documento do Microsoft Word como um arquivo em HTML. 
Nota: no Windows, feche o arquivo do Word para evitar uma violação no compartilhamento. 
2. Abra o arquivo em HTML no Dreamweaver. 


Para exibir o código em HTML gerado pelo Word, alterne para a Visualização de código (Visualizar > Código). 


3. Selecione Comandos > Limpar HTML do Word. 


Nota: se não for possível que o Dreamweaver determine a versão do Word usado para salvar o arquivo, selecione a versão correta no 
menu pop-up. 


4. Marque (ou desmarque) as opções de limpeza. As preferências que você digita são salvas como configurações de limpeza padrão. 
O Dreamweaver aplica as configurações de limpeza ao documento em HTML e um registro de alterações é exibido (a menos que você 


desmarque essa opção na caixa de diálogo). 


Remover todos os markups específicos do Word Remove todo o HTML específico do Microsoft Word, incluindo XML das tags HTML, 
metadados personalizados do Word e tags link do cabeçalho do documento, markups XML do Word, tags condicionais e seu conteúdo, 
além de parágrafos vazios e margens de estilos. Você pode selecionar cada uma dessas opções individualmente usando a guia Detalhado. 
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Limpar CSS Remove todas as CSS específicas do Word, inclusive estilos de CSS inline quando possível (onde o estilo pai tem as mesmas 
propriedades de estilo), atributos de estilo que começam com “mso”, declarações de estilo não cSS, atributos de estilo de CSS de tabelas e 
todas as definições de estilo não usadas do cabeçalho. Você pode personalizar ainda mais essa opção usando a aba Detalhado. 


Limpar tags <font> Remove tags HTML, convertendo o texto do corpo padrão em texto HTML tamanho 2. 


Corrigir tags aninhadas de forma inválida Remove as tags de markup de fonte inseridas pelo Word fora das tags de parágrafo e 
cabeçalho (nível do bloco). 


Aplicar formatação de origem Aplica as opções de formatação de origem que você especifica nas preferências de formato HTML e 
SourceFormat.txt ao documento. 


Mostrar conclusão do logon Exibe uma caixa de alerta com detalhes sobre as alterações feitas no documento assim que a limpeza é 
concluída. 


5. Clique em OK ou clique na guia Detalhado se você deseja personalizar ainda mais as opções Remover todo o markup específico do Word 
e Limpar CSS e, em seguida, clique em OK. 


e Código XHTML 

e Business Catalyst InContext Editing 

e Salvar arquivos de estrutura e conjunto de estruturas 
e Introdução à codificação de documento 

e Código de limpeza 

e Iniciar um editor externo para arquivos de mídia 

e Trabalhar com arquivos no painel Arquivos 

e Alternar entre visualizações na janela Documento 

e Navegar até o código relacionado 

e Visualização de páginas no Dreamweaver 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 


352 


Inserção de áudio HTML5 (CC) 


Este recurso está disponível somente para membros da Creative Cloud e assinantes do produto de ponto. Para associar-se à Adobe Creative 
Cloud, consulte Adobe Creative Cloud. 


O Dreamweaver permite inserir e visualizar áudio HTML5S em páginas da Web. O elemento de áudio HTML5 fornece um modo padrão de 
incorporar o conteúdo de áudio em páginas da Web. 


Para obter mais informações sobre o elemento de áudio HTML, consulte o artigo sobre áudio HTML5 em W3schools.com. 


Inserção de áudio HTML5 
Visualização do áudio no navegador 


Para o início 


Inserção de áudio HTML5 


1. Certifique-se de que seu cursor esteja no local em que você deseja inserir o áudio. 


2. Selecione Inserir > Mídia > Áudio HTMLS. O arquivo de áudio é inserido no local especificado. 


3. No 


painel Propriedades, insira as informações a seguir: 


Origem / Origem de Alt 1 / Origem de Alt 2: em Origem, insira o local do arquivo de áudio. Como alternativa, clique no ícone da pasta 
para selecionar um arquivo de áudio em seu computador. O suporte para formatos de áudio varia em navegadores diferentes. Se o 
formato de áudio na Origem não for suportado, o formato especificado em Origem de Alt 1 ou Origem de Alt 2 será usado. O navegador 
seleciona o primeiro formato reconhecido para exibir o áudio. 


Para adicionar vídeos rapidamente aos três campos, use a seleção múltipla. Quando você escolhe três formatos de vídeo para o mesmo 
vídeo de uma pasta, o primeiro formato na lista é usado para Origem. Os seguintes formatos na lista são usados para preencher Origem 
de Alt 1 e Origem de Alt 2 automaticamente. 


Navegador MP3 Wav Ogg 
Internet Explorer 9 SIM NÃO NÃO 
Firefox 4.0 NÃO SIM SIM 
Google Chrome 6 SIM SIM SIM 
Apple Safari 5 SIM SIM NÃO 
Opera 10.6 NÃO SIM SIM 


Propriedades 


H ID x1267] + class |none =| Origem 2153 ny.wav 
1á áudio 


Título: insira um título para o arquivo de áudio. 

Texto de emergência: insira o texto a ser exibido em navegadores que não fornecem suporte ao HTML5. 

Controles: selecione se você deseja exibir os controles de áudio como Reproduzir, Pausar e Mudo na página HTML. 

Reprodução automática: selecione se quiser que a reprodução do áudio seja iniciada assim que ela for carregada na página da Web. 
Áudio de repetição: selecione esta opção se desejar que o áudio seja reproduzido continuamente até que o usuário interrompa a 
reprodução. 

Mudo: selecione esta opção se desejar silenciar o áudio depois do download. 


Pré-carregar: selecione Automático para carregar o arquivo de áudio inteiro no download da página. Se você selecionar Metadados, o 
download dos metadados só será feito após a conclusão do download da página. 


Tite | Sinfonia de Nova York 
Texto de emergência Aguarde o download do audio 


s0 


E 


Controls Autoplay — Preload Origem de Alt 1 2153 ny.mp3 [ts De) 


Muted Origem de altZ 2153 ny.ogg so 


Painel Propriedades do áudio HTML5 


Para o início 


Visualização do áudio no navegador 
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1. Salve a página da Web. 


2. Selecione Arquivo > Visualizar no navegador. Selecione o navegador no qual deseja visualizar o áudio. 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Mais zoom e Menos zoom 


Mais zoom ou menos zoom em uma página 

Edição de uma página após a aplicação de zoom 

Panorama de uma página após a aplicação de zoom 

Preenchimento da janela Documento com uma seleção 

Preenchimento da janela Documento com uma página inteira 
Preenchimento da janela Documento com a largura inteira de uma página 


O Dreamweaver permite aumentar a ampliação (mais zoom) na janela Documento, a fim de que você possa verificar a precisão de pixel dos 
gráficos, selecionar itens pequenos com mais facilidade, criar páginas com texto pequeno, criar páginas grandes etc. 


Nota: As ferramentas de zoom estão disponíveis somente na Visualização de design. 


E raio Para o início 
Mais zoom ou menos zoom em uma pagina 


1. Clique na ferramenta Zoom (o ícone de lupa) no canto inferior direito da janela Documento. 
2. Siga um destes procedimentos: 


e Clique no ponto da página que você deseja ampliar até obter a ampliação desejada. 

* Arraste uma caixa sobre a área da página que você deseja ampliar e libere o botão do mouse. 
e Selecione um nível de ampliação predefinido no menu pop-up Zoom. 

e Digite um nível de ampliação na caixa de texto Zoom. 


Você também pode aplicar mais zoom sem usar a ferramenta Zoom. Para isso, pressione Control+= (Windows) ou Command+= 


(Macintosh). 
3. Para aplicar menos zoom (reduzir a ampliação), selecione a ferramenta Zoom, pressione Alt (Windows) ou Option (Macintosh) e clique na 
página. 
Você também pode aplicar menos zoom sem usar a ferramenta Zoom. Para isso, pressione Control+- (Windows) ou Command+- 
(Macintosh). 


ia pol ” x a Para o início 
Edição de uma página após a aplicação de zoom 


*& Clique na ferramenta Selecionar (o ícone de ponteiro) no canto inferior direito da janela Documento e clique dentro da página. 


Za: a z a Para o início 
Panorama de uma página após a aplicação de zoom 


1. Clique na ferramenta Mão (o ícone de mão) no canto inferior direito da janela Documento. 
2. Arraste a página. 


E a 
Preenchimento da janela Documento com uma seleção PER 


1. Selecione um elemento na página. 
2. Selecione Exibir > Ajustar seleção. 


i h Za: a a P iníci 
Preenchimento da janela Documento com uma página inteira ir 


“ Selecione Exibir > Ajustar tudo. 


i ] = = , & P Edo 
Preenchimento da janela Documento com a largura inteira de uma página iba 


*& Selecione Exibir > Ajustar largura. 
Mais tópicos da Ajuda 
Visão geral da barra de status 
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Funcionamento dos widgets do Spry (instruções gerais) 


Sobre widgets do Spry 

Recursos e tutoriais dos dispositivos do spry 
Inserir um widget do Spry 

Selecionar um widget do Spry 

Editar um widget do Spry 

Criar o estilo de um widget do Spry 

Obter mais widgets 

Alterar a pasta de ativos padrão do Spry 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre widgets do Spry 


Um widget do Spry é um elemento de página que enriquece a experiência do usuário por meio de interação. Um widget do Spry consiste no 
seguinte: 


Estrutura do widget Um bloco de código HTML que define a composição estrutural do widget. 
Comportamento do widget JavaScript que controla como o widget responde a eventos iniciados pelo usuário. 


Estilo de widget CSS que especifica a aparência do widget. 


A estrutura do Spry utiliza um conjunto de widgets reutilizáveis desenvolvidos em HTML, CSS e JavaScript padrão. Você pode inserir facilmente 
esses widgets (o código é HTML e CSS bem simplificados) e, em seguida, aplicar o estilo. Os comportamentos na estrutura incluem funções que 
permitem aos usuários mostrar ou ocultar conteúdo na página, alterar a aparência (como cor) da página, interagir com itens de menu, e muito 
mais. 


Cada widget na estrutura do Spry está associado a arquivos CSS e JavaScript exclusivos. O arquivo CSS contém tudo o que é necessário para 
criar o estilo do widget, e o arquivo JavaScript é responsável pela funcionalidade do widget. Quando você insere um widget usando a interface do 
Dreamweaver, o Dreamweaver vincula automaticamente esses arquivos à sua página, e o widget ganha funcionalidade e estilo. 


Os arquivos CSS e JavaScript associados a determinado widget recebem o nome do widget para que você possa facilmente correlacionar os 
arquivos aos widgets. (Por exemplo, os arquivos associados ao widget Acordeão chamam-se SpryAccordion.css e SpryAccordion.js). Quando 
você insere um widget em uma página salva, o Dreamweaver cria um diretório SpryAssets no site e salva os arquivos JavaScript e CSS 
correspondentes nesse local. 


Para o início 


Recursos e tutoriais dos dispositivos do spry 

Os recursos on-line a seguir fornecem mais informações sobre como personalizar os dispositivos do Spry. 
Amostras de dispositivos do Spry 

Personalização de barras de menu do Spry no Dreamweaver 


Dispositivos de validação do Spry (tutorial em vídeo) 


Para o início 


Inserir um widget do Spry 
e Selecione Inserir > Spry e escolha o widget a ser inserido. 


Ao inserir um widget, Dreamweaver você automaticamente inclui os arquivos JavaScript e CSS necessários do Spry em seu site quando salva a 
página. 


Nota: Para inserir widgets do Spry, você também pode usar a categoria Spry no painel Inserir. 
E a E 
Selecionar um widget do Spry ara o início 


1. Mantenha o ponteiro do mouse sobre o widget até aparecer a estrutura azul com abas. 
2. Clique na aba no canto superior esquerdo do widget. 
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Para o início 


Editar um widget do Spry 
* Selecione o widget para editá-lo e fazer alterações no Inspetor de propriedades (Janela > Propriedades). 


Para obter detalhes sobre como efetuar alterações em determinados widgets, consulte as seções apropriadas a cada widget. 


Criar o estilo de um widget do Spry ERRAR 


e Localize o arquivo CSS apropriado para o widget na pasta SpryAssets do site e edite o CSS de acordo com suas preferências. 
Para obter detalhes sobre como criar o estilo de determinados widgets, consulte as seções apropriadas sobre personalização para cada widget. 


Você também pode formatar um widget do Spry editando os estilos no painel CSS, da mesma forma que faria com qualquer outro elemento 
com estilo na página. 


Para o início 


Obter mais widgets 


Há muito mais widgets da Web disponíveis além dos widgets do Spry instalados com o Dreamweaver. O Adobe Exchange fornece widgets da 
Web desenvolvidos por outros profissionais de criação. 
* Escolha Procurar widgets da Web no menu Estender Dreamweaver, na Barra de aplicativos. % v 


Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre o funcionamento com widgets da web, consulte 
www.adobe.com/go/dw1lOwidgets br. 


Para o início 


Alterar a pasta de ativos padrão do Spry 


Quando você insere um widget, um conjunto de dados ou um efeito do Spry em uma página salva, o Dreamweaver cria um diretório SpryAssets 
no site e salva os arquivos JavaScript e CSS correspondentes nesse local. Você pode alterar o local padrão em que o Dreamweaver salva os 
ativos do Spry, caso prefira salvá-los em outro local. 

1. Selecione Arquivos > Gerenciar sites. 

2. Selecione o seu site na caixa de diálogo Gerenciar sites e clique em Editar. 

3. Na caixa de diálogo Configuração de site, expanda as Configurações avançadas e selecione a categoria Spry. 

4 


. Informe um caminho para a pasta a ser usada para os ativos do Spry e clique em OK. Você também pode clicar no ícone de pasta para 
navegar até determinado local. 


A Adobe também recomenda 
* Introdução às folhas de estilos em cascata 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Uso de uma imagem de rastreamento para criar uma página 


Você pode inserir um arquivo de imagem que será usado como guia na criação da página. A imagem aparece como uma imagem de plano de 
fundo, que você pode “projetar sobre” enquanto expõe a sua página. 


1. Selecione Modificar > Propriedades da página ou clique no botão Propriedades da página no Inspetor de propriedades de texto. 


2. Escolha a categoria Imagem de decalque e defina as opções. 
Imagem de decalque Especifica uma imagem a ser usada como guia na cópia de um design. Essa imagem serve apenas como referência 


e não aparece quando o documento é exibido em um navegador. 


Transparência Determina a opacidade da imagem de decalque, de completamente transparente a completamente opaco. 


(69) ev-nc-sn ] 
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Trabalho com texto 


Adição de texto a um documento 

Inserção de caracteres especiais 

Adição de espaço entre caracteres 

Adição do espaçamento do parágrafo 

Criação de listas numeradas e com marcadores 
Procura e substituição de texto 

Definição de abreviações e acrônimos 
Definição das preferências de cópia e colagem 


a . — 
Adição de texto a um documento ara o início 


Para adicionar texto a um documento do Dreamweaver, digite o texto diretamente na janela Documento ou recorte e cole o texto. Também é 
possível importar texto de outros documentos. 


Quando você colar texto em um documento do Dreamweaver, use o comando Colar ou Colar especial. O comando Colar especial permite 
especificar o formato do texto colado de diferentes formas. Por exemplo, se você deseja colar texto de um documento formatado do Microsoft 
Word no documento do Dreamweaver, mas deseja retirar toda a formatação para que possa aplicar sua própria folha de estilos CSS ao texto 
colado, selecione texto no Word, copie-o para a área de transferência e use o comando Colar especial para selecionar a opção que permite colar 
apenas texto. 


Ao usar o comando Colar para colar texto de outros aplicativos, defina as preferências de colagem como opções padrão. 


Nota: A combinação de teclas Control+V (Windows) e Command+V (Macintosh) sempre cola apenas texto (sem formatação) na Visualização de 
código. 
“+ Adicione texto ao documento seguindo um destes procedimentos: 


e Digite o texto diretamente na janela Documento. 


e Copie o texto de outro aplicativo, alterne para Dreamweaver, posicione o ponto de inserção na Visualização de design da janela Documento 
e selecione Editar > Colar ou Editar > Colar especial. 


Ao selecionar Editar > Colar especial, selecione várias opções de formatação de colagem. 


Você também pode colar texto usando os seguintes atalhos de teclado: 


opção Colar Atalho de teclado 


Colar Control+V (Windows) 


Command+V (Macintosh) 


Colar especial Control+Shift+V (Windows) 
Command+Shift+V (Macintosh) 


” és Para o início 
Inserção de caracteres especiais 


Determinados caracteres especiais são representados em HTML por um nome ou número, denominado entidade. O HTML inclui nomes de 
entidade para caracteres como símbolo de direitos autorais (&copy;), E comercial (&amp;) e símbolo de marca registrada (&reg;). Cada entidade 
possui um nome (&mdash;, por exemplo) e um equivalente numérico (&4*151;, por exemplo). 


O HTML usa os colchetes angulares <> em seu código, mas talvez seja necessário expressar os caracteres especiais de sinal de maior que 
ou sinal de menor que sem que o Dreamweaver os interpretem como código. Nesse caso, use &gt; como sinal de maior (>) e &lt; como sinal 
de menor (<). 


Infelizmente, muitos navegadores mais antigos não exibem adequadamente várias das entidades denominadas. 


1. Na janela Documento, coloque o ponto de inserção no local em que deseja inserir um caractere especial. 


2. Siga um destes procedimentos: 


* Selecione o nome do caractere no submenu Inserir > HTML > Caracteres especiais. 
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e Na categoria Texto do painel Inserir, clique no botão Caracteres e selecione o caractere no submenu. 


Há vários outros caracteres especiais disponíveis. Para selecionar um deles, selecione Inserir > HTML > Caracteres especiais > Outros 
ou clique no botão Caracteres, na categoria Texto do painel Inserir e selecione a opção Outros caracteres. Selecione um caractere na 
caixa de diálogo Inserir outro caractere e clique em OK. 


ELAS P, iníci 
Adição de espaço entre caracteres adiado 


O HTML permite apenas um espaço entre os caracteres. Para adicionar espaços extras em um documento, insira um espaço não separável. É 
possível definir uma preferência para adicionar automaticamente espaços não separáveis em um documento. 


Inserção de um espaço não separável 
“+ Siga um destes procedimentos: 


e Selecione Inserir > HTML > Caracteres especiais > Espaço não separável. 
e Pressione Control+Shift+Barra de espaços (Windows) ou Option+Barra de espaços (Macintosh). 


e Na categoria Texto do painel Inserir, clique no botão Caracteres e selecione o ícone Espaço não separável. 


Defina uma preferência para adicionar espaços não separáveis. 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Na categoria geral, verifique se a opção Permitir vários espaços consecutivos está marcada. 


Adição do espaçamento do parágrafo aa 


O Dreamweaver funciona da mesma forma que muitos editores de texto: pressione Enter (Windows) ou Return (Macintosh) para criar um novo 
parágrafo. Os navegadores da Web inserem automaticamente um linha de espaço em branco entre os parágrafos. Você pode adicionar uma única 
linha de espaço entre os parágrafos inserindo uma quebra de linha. 


Adição de um retorno de parágrafo 
“ Pressione Enter (Windows) ou Return (Macintosh). 


Adição de uma quebra de linha 
*& Siga um destes procedimentos: 
* Pressione Shift+Enter (Windows) ou Shift+Return (Macintosh). 
* Selecione Inserir > HTML > Caracteres especiais > Quebra de linha. 


e Na categoria Texto do painel Inserir, clique no botão Caracteres e selecione o ícone Quebra de linha. 


a aii 
Criação de listas numeradas e com marcadores di 


Você pode criar listas numeradas (ordenadas), listas com marcadores (não ordenadas) e listas de definições a partir de um texto existente ou de 
um texto novo enquanto digita na janela Documento. 


As listas de definições não usam caracteres à esquerda, como pontos de marcador ou números, e geralmente são usadas em glossários ou 
descrições. As listas também podem ser aninhadas. As listas aninhadas contêm outras listas. Por exemplo, você provavelmente precisará de uma 
lista ordenada ou com marcadores aninhada dentro de outra lista numerada ou ordenada. 


Use a caixa de diálogo Propriedades da lista para definir a aparência de uma lista inteira ou de um item de lista individual. Você pode definir um 
estilo de número, redefinir a numeração ou definir opções de estilo de marcador para itens de lista individuais ou para uma lista inteira. 


Criação de uma nova lista 
1. No documento do Dreamweaver, coloque o ponto de inserção onde deseja adicionar uma lista e siga um destes procedimentos: 


e No Inspetor de propriedades HTML, clique no botão Lista com marcadores ou Lista numerada. 


e Selecione Formatar > Lista e, em seguida, selecione o tipo de lista desejado: Lista não ordenada (com marcadores), Lista ordenada 
(numerada) ou Lista de definição. 


O caractere à esquerda do item de lista especificado aparece na janela Documento. 


2. Digite o texto do item de lista e pressione Enter (Windows) ou Return (Macintosh) para criar outro item de lista. 


3. Para concluir a lista, pressione Enter duas vezes (Windows) ou pressione Return duas vezes (Macintosh). 
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Criação de uma lista usando um texto existente 
1. Selecione uma série de parágrafos para transformar em uma lista. 


2. No Inspetor de propriedades HTML, clique no botão Lista com marcadores ou Lista numerada ou selecione Formatar > Lista e selecione o 
tipo de lista desejado: Lista não ordenada, Lista ordenada ou Lista de definição. 


Criação de uma lista aninhada 
1. Selecione os itens de lista que você deseja aninhar. 
2. No Inspetor de propriedades HTML, clique no botão Citação em bloco ou selecione Formatar > Recuar. 


O Dreamweaver recua o texto e cria uma lista separada com os atributos HTML da lista original. 


3. Aplique um novo estilo ou tipo de lista ao texto recuado seguindo o mesmo procedimento usado acima. 


Definição das propriedades de uma lista inteira 
1. Na janela Documento, crie pelo menos um item de lista. O novo estilo será aplicado automaticamente aos itens extras que você adicionar à 
lista. 


2. Como ponto de inserção no texto do item de lista, selecione Formatar > Lista > Propriedades, para abrir a caixa de diálogo Propriedades 
da lista. 


3. Defina as opções com as deseja definir a lista: 
Tipo de lista Especifica as propriedades de lista, enquanto Item de lista especifica um item individual em uma lista. Use o menu pop-up 
para selecionar uma lista com marcadores, numerada, de diretórios ou de menus. Dependendo do Tipo de lista selecionado, diferentes 
opções aparecerão na caixa de diálogo. 


Estilo Determina o estilo de números ou marcadores usados em uma lista numerada ou com marcadores. Todos os itens da lista terão 
esse estilo, a menos que você especifique um novo estilo para os itens na lista. 


Iniciar contagem Define o valor do primeiro item em uma lista numerada. 


4. Clique em OK para definir as opções. 


Definição das propriedades de lista de um item de lista 
1. Na janela Documento, coloque o ponto de inserção no texto de um item de lista que você deseja afetar. 


2. Selecione Formatar > Lista > Propriedades. 


3. Em Item de lista, defina as opções que deseja definir: 
Novo estilo Especifica um estilo para o item de lista selecionado. Os estilos no menu Novo estilo são relacionados ao tipo de lista exibido 
no menu Tipo de lista. Por exemplo, se o menu Item de lista exibir Lista com marcadores, somente as opções de marcador estarão 
disponíveis no menu Novo estilo. 


Redefinir contagem para Define um número específico a partir do qual as entradas de item de lista serão numeradas. 


4. Clique em OK para definir as opções. 


una Ar 
Procura e substituição de texto fade 


Você pode usar o comando Localizar e substituir para procurar texto e atributos e tags HTML em um documento ou em um conjunto de 
documentos. O painel Pesquisa, no grupo de painéis Resultados, mostra os resultados de uma pesquisa Localizar tudo. 


Nota: Para procurar arquivos em um site, use diferentes comandos: Localizar no site local e Localizar no site remoto. 


Procura e substituição de texto 
1. Abra o documento em que será realizada a pesquisa ou selecione documentos ou uma pasta no painel Arquivos. 


2. Selecione Editar > Localizar e substituir. 


3. Use a opção Localizar em para especificar quais arquivos serão pesquisados: 
Texto selecionado Restringe a pesquisa ao texto atualmente selecionado no documento ativo. 


Documento atual Restringe a pesquisa ao documento ativo. 
Documentos abertos Pesquisa todos os documentos que estão abertos no momento. 


Pasta Restringe a pesquisa a uma pasta específica. Após escolher Pasta, clique no ícone de pasta a ser acessado e selecione uma pasta 
a ser pesquisada. 


Arquivos selecionados no site Restringe a pesquisa aos arquivos e pastas atualmente selecionados no painel Arquivos. 


Todo o site local atual Expande a pesquisa para todos os documentos HTML, arquivos de biblioteca e documentos de texto do site 
atual. 


4. Use o menu pop-up Pesquisar para especificar o tipo de pesquisa a ser executado: 
Código-fonte Procura sequências de texto específicas no código-fonte HTML. Você pode procurar tags específicas usando esta opção, 
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Fê 
8. 


mas a pesquisa Tag específica oferece uma abordagem mais flexível para a procura de tags. 


Texto Procura sequências de texto específicas no texto do documento. Uma pesquisa de texto ignora qualquer HTML que interrompe a 
sequência de caracteres. Por exemplo, a procura de o cão preto retornaria o cão preto e o cão <i>preto</i>. 


Texto (avançado) Procura sequências de texto específicas que estejam ou não dentro de uma ou mais tags. Por exemplo, em um 
documento que contenha o HTML a seguir, se você procurar tenta e especificar Fora da tag e a tag i, somente a segunda ocorrência da 
palavra tenta será localizada: João <i>tenta</i> terminar o trabalho no tempo estipulado, mas nem sempre consegue. Ele tenta com afinco. 


Tag específica Procure tags, atributos e valores de atributo específicos, como todas as tags td com valign definido como top. 

Nota: A combinação de teclas Control+Enter ou Shift+Enter (Windows), ou Control+Return, Shift+Return ou Command+Return (Macintosh) 
adicionará quebras de linha nos campos de pesquisa de texto, permitindo que você procure um caractere de retorno. Ao realizar uma 
pesquisa desse tipo, desmarque a opção Ignorar diferenças de espaços em branco, caso não esteja usando expressões regulares. Essa 
pesquisa localiza um caractere de retorno específico, e não simplesmente a ocorrência de uma quebra de linha. Por exemplo, ela não 
localiza uma tag <br> ou <p>. Os caracteres de retorno aparecem como espaços na Visualização de design, e não como quebras de linha. 


Use as opções a seguir para expandir ou limitar a pesquisa: 
Coincidir maiúscula/minúscula Limita a pesquisa ao texto que corresponde exatamente ao uso de maiúscula ou minúscula que você 
deseja localizar. Por exemplo, se você procurar brown derby, não encontrará Brown Derby. 


Ignorar espaço em branco Trata todos os espaços em branco como um único espaço para fins de correspondência. Por exemplo, com 
esta opção selecionada, este texto retornará este texto e este | texto, mas não estetexto. Esta opção não estará disponível quando a 
opção Utilizar expressões regulares estiver selecionada. Escreva explicitamente a expressão regular para ignorar o espaço em branco. 
Observe que as tags <p> e <br> não contam como espaço em branco. 


Coincidir palavra inteira Limita a pesquisa ao texto que corresponde a uma ou mais palavras completas. 
Nota: O uso desta opção é o mesmo que procurar uma sequência de pesquisa que inicia e termina com lb, através de uma pesquisa de 
expressão regular, a expressão regular de limite de palavras. 


Utilizar expressões regulares Faz com que determinados caracteres e sequências de caracteres curtas (como ?, *, w e lb) da sequência 
de pesquisa sejam interpretados como operadores de expressão regular. Por exemplo, a procura de o cão plw*b retornaria o cão preto e o 
cão peralta. 

Nota: Se você estiver trabalhando na Visualização de código e fizer alterações no documento, e tentar localizar e substituir algo que não 
seja o código-fonte, uma caixa de diálogo aparecerá informando que o Dreamweaver está sincronizando as duas visualizações antes de 
realizar a pesquisa. 


Para realizar a pesquisa sem substituir, clique em Localizar próximo ou Localizar tudo: 

Localizar próximo Seleciona a próxima ocorrência do texto de pesquisa ou as tags no documento atual. Se não houver mais ocorrências 
da tag no documento atual, o Dreamweaver irá para o próximo documento, caso você esteja realizando a pesquisa em mais de um 
documento. 


Localizar tudo Abre o painel Pesquisa no grupo de painéis Resultados. Se você estiver pesquisando um único documento, o recurso 
Localizar tudo exibirá todas as ocorrências do texto de pesquisa ou das tags, com algum contexto delimitado. Se você estiver pesquisando 
um diretório ou site, o recurso Localizar tudo exibirá uma lista dos documentos que contêm a tag. 

Para substituir o texto localizado ou as tags, clique em Substituir ou Substituir tudo. 

Quando terminar, clique em Fechar. 


Nova pesquisa sem exibir a caixa de diálogo Localizar e substituir 
«& Pressione F3 (Windows) ou Command+G (Macintosh). 


Visualização de um resultado de pesquisa no contexto 


de 
2. 


Selecione Janela > Resultados para exibir o painel Pesquisa. 
Clique duas vezes em uma linha no painel Pesquisa. 


Se você estiver pesquisando o arquivo atual, a janela documento exibirá a linha que contém esse resultado de pesquisa. 


Se você estiver pesquisando um conjunto de arquivos, o arquivo que contém esse resultado de pesquisa será aberto. 


Execução da mesma pesquisa novamente 
*& Clique no botão Localizar e substituir. 


Interrupção de uma pesquisa em andamento 
* Clique no botão Parar. 


Procura de uma tag específica 
Use a caixa de diálogo Localizar e substituir para procurar texto ou tags em um documento, e substituir o material localizado por outro texto ou 
tags. 


de 


Selecione Editar > Localizar e substituir. 
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2. No menu pop-up Pesquisar, selecione Tag específica. 


3. Selecione uma tag específica ou [qualquer tag] no menu pop-up ao lado do menu pop-up Pesquisar ou digite um nome de tag na caixa de 


texto. 


. (Opcional.) Limite a pesquisa com um dos seguintes modificadores de tag: 


Com atributo Especifica um atributo que deve estar contido na tag. Você pode especificar um valor específico para o atributo ou selecionar 
[qualquer valor]. 


Sem atributo Seleciona um atributo que não deve estar contido na tag. Por exemplo, selecione esta opção para procurar todas as tags 
img que não tenham o atributo alt. 


Contendo Especifica um texto ou uma tag que deve estar contido na tag original. Por exemplo, no código <b><font size="4">heading 
1</font></b>, a tag font está contida na tag b. 


Não contendo Especifica um texto ou uma tag que não deve estar contido na tag original. 
Dentro da tag Especifica uma tag na qual a tag de destino deve estar contida. 


Fora da tag Especifica uma tag na qual a tag de destino não deve estar contida. 


5. (Opcional.) Para limitar ainda mais a pesquisa, clique no botão de adição (+) e repita a etapa 3. 


6. Se você não tiver aplicado nenhum modificador de tag nas etapas 3 e 4, clique no botão de subtração (-) para remover o menu pop-up de 


modificadores de tag. 


. Para executar uma ação quando a tag for encontrada (como remover ou substituir a tag), selecione a ação no menu pop-up Ação e, se 
aplicável, especifique quaisquer informações adicionais necessárias à execução da ação. 


Procura de texto específico (avançado) 


Use a caixa de diálogo Localizar e substituir para procurar texto ou tags em um documento, e substituir o material localizado por outro texto ou 
tags. 
1. Selecione Editar > Localizar e substituir. 
2. No menu pop-up Pesquisar, selecione Texto (avançado). 
3. Digite texto no campo de texto adjacente ao menu pop-up Pesquisa. 
Por exemplo, digite a palavra Sem título. 
4. Selecione Dentro da tag ou Fora da tag e, em seguida, selecione uma tag no menu pop-up adjacente. 
Por exemplo, selecione Dentro da tag e depois título. 
5. (Opcional.) Clique no botão de adição (+) para limitar a pesquisa com um dos seguintes modificadores de tag: 
Com atributo Especifica um atributo que deve estar contido na tag. Você pode especificar um valor específico para o atributo ou selecionar 
[qualquer valor]. 
Sem atributo Seleciona um atributo que não deve estar contido na tag. Por exemplo, selecione esta opção para procurar todas as tags 
img que não tenham o atributo alt. 
Contendo Especifica um texto ou uma tag que deve estar contido na tag original. Por exemplo, no código <b><font size="4">heading 
1</font></b>, a tag font está contida na tag b. 
Não contendo Especifica um texto ou uma tag que não deve estar contido na tag original. 
Dentro da tag Especifica uma tag na qual a tag de destino deve estar contida. 
Fora da tag Especifica uma tag na qual a tag de destino não deve estar contida. 
6. (Opcional.) Para limitar ainda mais a pesquisa, repita a etapa 4. 


Definição de abreviações e acrônimos 


Para o início 


O HTML fornece tags que permitem definir as abreviações e os acrônimos usados na página para mecanismos de pesquisa, verificadores 
ortográficos, programas de conversão de idioma ou sintetizadores de fala. Por exemplo, talvez seja necessário especificar que a abreviação EM 


na 


4. 


2 
3. 
4 


Definição das preferências de cópia e colagem 


página significa engenharia mecânica ou que o acrônimo WHO significa World Health Organization. 
Selecione a abreviação ou o acrônimo no texto da página. 
. Selecione Inserir > HTML > Objetos de texto > Abreviação ou Inserir > HTML > Objetos de texto > Acrônimo. 
Digite o texto completo do acrônimo ou da abreviação. 
. Digite o idioma, como en para inglês, de para alemão ou it para italiano. 


Para o início 


Você pode definir preferências de colagem especial como opções padrão ao usar Editar > Colar para colar texto de outros aplicativos. Por 
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exemplo, se você deseja colar o texto sempre como apenas texto ou texto com formatação básica, defina a opção padrão na caixa de diálogo 
Preferências de cópia/colagem. 


Nota: Quando você colar texto em um documento do Dreamweaver, use o comando Colar ou Colar especial. O comando Colar especial permite 
especificar o formato do texto colado de diferentes formas. Por exemplo, se você deseja colar texto de um documento formatado do Microsoft 
Word no documento do Dreamweaver, mas deseja retirar toda a formatação para que possa aplicar sua própria folha de estilos CSS ao texto 
colado, selecione texto no Word, copie-o para a área de transferência e use o comando Colar especial para selecionar a opção que permite colar 
apenas texto. 

Nota: As preferências definidas na caixa de diálogo Preferências de cópia/colagem se aplicam apenas ao material colado na Visualização de 


design. 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
2. Clique na categoria Copiar/colar. 


3. Defina as opções a seguir e clique em OK. 
Apenas texto Permite que você cole texto sem formatação. Se o texto original estiver formatado, toda a formatação, incluindo quebras de 
linha e parágrafos, será removida. 


Texto com estrutura Permite colar um texto que retenha a estrutura, mas não retenha a formatação básica. Por exemplo, você pode colar 
o texto e reter a estrutura de parágrafos, listas e tabelas, sem reter o negrito, o itálico e outras formatações. 


Texto com estrutura e formatação básica Permite colar um texto HTML estruturado e simples (por exemplo, parágrafos e tabelas, assim 
como um texto formatado com a tag b, i, u, strong, em, hr, abbr ou acronym). 


Texto com estrutura e formatação integral Permite colar um texto que retenha a estrutura, a formatação HTML e os estilos CSS. 
Nota: A opção Formatação integral não pode reter estilos CSS provenientes de uma folha de estilos externa nem reter estilos caso o 
aplicativo do qual você esteja colando os dados não retenha estilos após a colagem para a área de transferência. 


Reter quebras de linha Permite manter quebras de linha no texto colado. Esta opção estará desativada se você tiver selecionado Apenas 
texto. 


Limpar espaçamento de parágrafo do Word Selecione esta opção se tiver selecionado Texto com estrutura ou Texto com estrutura e 
formatação básica, e deseje eliminar espaço extra entre parágrafos ao colar o texto. 


Mais tópicos da Ajuda 
Definição de propriedades CSS 


(65) ev-nc-sa ] 
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Trabalho com o widget Dica de ferramentas do Spry 


Sobre o widget Dica de ferramenta 
Inserir o widget Dica de ferramenta 
Editar opções do widget Dica de ferramenta 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Dica de ferramenta 


O widget Dica de ferramenta do Spry exibe informações adicionais quando o usuário passa o mouse sobre um elemento específico em uma 
página da Web. O conteúdo adicional desaparece quando o usuário tira o mouse desse local. Também é possível configurar as dicas de 
ferramenta para permanecerem abertas por períodos maiores para que os usuários possam interagir com o seu conteúdo. 


O widget Dica de ferramenta contém os três elementos a seguir: 
e O recipiente da dica de ferramenta. Este elemento contém a mensagem ou o conteúdo que deve ser exibido assim que o usuário ativa a 
dica de ferramenta. 
e Os elementos da página que ativam a dica de ferramenta. 


e O script do construtor. É o JavaScript que informa ao Spry quando deve criar a funcionalidade de dica de ferramenta. 


Quando você inserir um widget Dica de ferramenta, o Dreamweaver cria um recipiente de dica de ferramenta usando as tags div e coloca as 
tags span antes e depois do elemento “acionador" (o elemento da página que ativa a dica de ferramenta). O Dreamweaver usa essas tags por 
padrão. No entanto, as tags para a dica de ferramenta e para o elemento acionador podem ser de qualquer tipo, contanto que estejam no corpo 
da página. 


Leve em consideração os seguintes pontos ao trabalhar com o widget Dica de ferramenta: 


e Uma dica de ferramenta aberta será fechada antes que a próxima seja aberta. 
e As dicas de ferramenta são exibidas enquanto o usuário passa o mouse pela área de acionamento. 


e Não existe nenhuma restrição quanto ao tipo de tag que pode ser usado para os acionadores e para o conteúdo da dica de ferramenta. No 
entanto, os elementos em nível de bloco são sempre recomendados para evitar possíveis problemas de processamento entre navegadores. 


e Por padrão, a dica de ferramenta aparece 20 pixels abaixo e à direita do cursor. Para definir um ponto de aparência personalizada, use as 
opções Deslocamento horizontal e vertical do Inspetor de propriedades. 


e Atualmente, não é possível manter uma dica de ferramenta aberta durante o carregamento da página no navegador. 


O widget Dica de ferramenta requer muito pouco CSS. O Spry usa o JavaScript para mostrar, ocultar e posicionar a dica de ferramenta. Você 
pode aplicar outros estilos para a dica de ferramenta com as técnicas de CSS padrão, conforme necessário para sua página. A única regra 
contida no arquivo CSS padrão é uma solução para problemas do Internet Explorer 6; essa regra faz com que a dica de ferramenta apareça 
acima dos elementos de formulário ou objetos Flash. 


Para obter uma explicação mais abrangente sobre como o widget Dica de ferramenta Spry funciona, inclusive uma anatomia completa do 
respectivo código, consulte www.adobe.com/go/learn dw sprytooltip br. 


Para assistir a um tutorial em vídeo sobre como trabalhar com o widget Dica de ferramenta Spry, consulte www.adobe.com/go/lrvid4046 dw br. 


, . ; E a 
Inserir o widget Dica de ferramenta ara o início 


e Selecione Inserir > Spry > Dica de ferramenta do Spry. 
Nota: Para inserir um widget Dica de ferramenta, você também pode usar a categoria Spry no painel Inserir. 


Essa ação insere um novo widget Dica de ferramenta com um recipiente para o conteúdo da dica de ferramenta e uma sentença de alocador de 
espaço que age como o acionador da dica de ferramenta. 


Você também pode selecionar um elemento existente na página (por exemplo, uma imagem) e, em seguida, inserir a dica de ferramenta. Ao fazer 
isso, o elemento selecionado age como o acionador da nova dica de ferramenta. É necessário selecionar um elemento de tag completa (por 
exemplo, uma tag img ou p) para que o Dreamweaver possa atribuir uma ID a esse elemento caso ainda não exista uma. 
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Editar opções do widget Dica de ferramenta ii 


É possível definir opções que permitem personalizar o comportamento do widget Dica de ferramenta. 
Nome 


O nome do recipiente da dica de ferramenta. O recipiente armazena o conteúdo da dica de ferramenta. Por padrão, o Dreamweaver usa uma tag 
div como o recipiente. 


Acionador 


O elemento da página que ativa a dica de ferramenta. Por padrão, o Dreamweaver insere uma sentença de alocador de espaço, com as tags 
span antes e depois, como o acionador, mas é possível selecionar qualquer elemento da página que tenha uma ID exclusiva. 


Seguir o mouse 


Quando está selecionada, esta opção faz com que a dica de ferramenta siga o mouse enquanto o usuário está passando pelo elemento 
acionador. 


Ocultar ao retirar o mouse 


Quando está selecionada, esta opção mantém a dica de ferramenta aberta enquanto o mouse está passando por ela (mesmo que o mouse saia 
do elemento acionador). Manter a dica de ferramenta aberta será útil se houver links ou outros elementos interativos na dica de ferramenta. Se 
essa opção não for selecionada, o elemento de dica de ferramenta será fechado quando o mouse sair da área de acionamento. 


Deslocamento horizontal 


Calcula a posição horizontal da dica de ferramenta em relação ao mouse. O valor de deslocamento é calculado em pixels e o padrão equivale a 
20 pixels. 


Deslocamento vertical 


Calcula a posição vertical da dica de ferramenta em relação ao mouse. O valor de deslocamento é calculado em pixels e o padrão equivale a 20 
pixels. 


Mostrar atraso 

O atraso em milissegundos para que a dica de ferramenta apareça depois de ter entrado no elemento acionador. O valor padrão é O. 
Ocultar atraso 

O atraso em milissegundos para que a dica de ferramenta desapareça depois de ter saído do elemento acionador. O valor padrão é O. 
Efeito 


O tipo de efeito que deve ser usado quando a dica de ferramenta for exibida. Veneziana simula uma janela veneziana que se move para cima e 
para baixo para mostrar ou ocultar a dica de ferramenta. Atenuar ativa e desativa a dica de ferramenta. O valor padrão é Nenhum. 


1. Passe o mouse sobre ou coloque o ponto de inserção no conteúdo da dica de ferramenta na página. 
2. Clique na aba azul do widget Dica de ferramenta para selecioná-lo. 


3. Defina as opções como desejar no Inspetor de propriedades do widget Dica de ferramenta. 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Trabalho com o widget Painéis com aba do Spry 


Sobre o widget Painéis com aba 
Inserir e editar o widget Painéis com aba 
Personalizar o widget Painéis com aba 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


Para o início 


Sobre o widget Painéis com aba 


O widget Painéis com aba é um conjunto de painéis que podem armazenar conteúdo em um espaço compacto. Os visitantes do site ocultam ou 
revelam o conteúdo armazenado nos Painéis com aba clicando na aba do painel que eles desejam acessar. Os painéis do widget abrem de 
acordo com as abas em que o visitante clica. Em um widget Painéis com aba, somente um painel de conteúdo é aberto em determinado 
momento. Este exemplo mostra um widget Painéis com aba, com o terceiro painel aberto: 


c+ Content 
Content 
Content 
Content 


| 
D 


A. Aba B. Conteúdo C. Widget Painéis com aba D. Painel com aba 


O código HTML do widget Painéis com aba consiste em uma tag div externa que contém todos os painéis, uma lista das abas, um div para 
conter os painéis de conteúdo e um div para cada painel de conteúdo. O HTML do widget Painéis com aba também inclui tags de script no 
cabeçalho do documento e após o markup HTML do widget Painel com aba. 


Para obter uma explicação abrangente sobre como o widget Painéis com aba funciona, inclusive uma anatomia completa do respectivo código, 
consulte www.adobe.com/go/learn dw sprytabbedpanels br. 


a E « do dejá P. iníci 
Inserir e editar o widget Painéis com aba tida 


Inserir o widget Painéis com aba 
e Selecione Inserir > Spry > Painéis com aba do Spry. 


Nota: Para inserir um widget Painéis com aba, você também pode usar a categoria Spry no painel Inserir. 


Adicionar um painel em um widget Painéis com aba 
1. Selecione um widget Painéis com aba na janela Documento. 
2. Clique no botão de adição de Painéis no Inspetor de propriedades (Janela > Propriedades). 
3. (Opcional) Altere o nome da aba selecionando o texto da aba na Visualização de design. 


Excluir um painel de um widget Painéis com aba 
1. Selecione um widget Painéis com aba na janela Documento. 


2. No menu Painéis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel a ser excluído e clique no botão de 
subtração. 


Abrir painel para edição 
* Siga um destes procedimentos: 


e Mova o ponteiro do mouse sobre a aba do painel para abri-lo na Visualização de design e clique no ícone em forma de olho que 
aparece à direita da aba. 


* Selecione um widget Painéis com aba na janela Documento e clique no nome do painel para editá-lo no menu Painéis do Inspetor de 
propriedades (Janela > Propriedades). 
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Alterar a ordem dos painéis 
1. Selecione um widget Painéis com aba na janela Documento. 
2. No menu Painéis do Inspetor de propriedades (Janela > Propriedades), selecione o nome do painel que você deseja mover. 


3. Clique nas setas para cima e para baixo para mover o painel para cima ou para baixo. 


Definir o painel aberto padrão 
Você pode definir qual painel do widget Painéis com aba abre por padrão quando a página é aberta no navegador. 


1. Selecione um widget Painéis com aba na janela Documento. 
2. No Inspetor de propriedades (Janela > Propriedades), selecione o painel que você deseja abrir por padrão no menu pop-up Painel padrão. 


a à ea Para o início 
Personalizar o widget Painéis com aba fi 


Embora o Inspetor de propriedades permita que você faça edições simples em um widget Painéis com aba, ele não aceita tarefas de estilização 
personalizadas. Você pode alterar as regras de CSS para o dispositivo Painéis com aba e criar um dispositivo com o estilo de sua preferência. 


Para obter uma referência rápida sobre como alterar as cores no dispositivo Painéis com guias, consulte o Guia rápido para painéis com guias, 
acordeões e contrair painéis de David Powers. 


Para obter uma lista mais avançada de tarefas de estilização, consulte www.adobe.com/go/learn dw sprytabbedpanels custom br. 


Todas as regras de CSS nos tópicos a seguir se referem às regras padrão localizadas no arquivo SpryTabbedPanels.css. O Dreamweaver salva O 
arquivo SpryTabbedPanels.css na pasta SpryAssets do seu site sempre que você cria um widget Painéis com aba do Spry. Esse arquivo também 
contém informações úteis comentadas sobre vários estilos que se aplicam ao widget. 


Embora você possa facilmente editar regras para o widget Painéis com aba diretamente no arquivo CSS relacionado, você também pode usar 
o painel Estilos CSS para editar o CSS do widget. Esse painel é útil para localizar as classes de CSS atribuídas a diversos trechos do widget, 
especialmente se você usar o modo Atual do painel. 


Criar o estilo do texto do widget Painéis com aba 
Para criar o estilo do texto de um widget Painéis com aba, configure as propriedades do recipiente inteiro do widget Painéis com aba ou configure 
as propriedades dos componentes do widget individualmente. 


e Para alterar o estilo do texto de um widget Painéis com aba, use a seguinte tabela para localizar a regra de CSS apropriada e, em seguida, 
adicionar seus próprios valores e propriedades de estilo do texto: 


Texto a ser alterado Regra de CSS relevante Exemplo de propriedades e valores a 
adicionar 
. Ee . TabbedPanels . . . 
Texto no widget inteiro fonte: Arial; font-size:medium; 


; . TabbedPanelsTabGroup ou . E ; 
Texto nas abas do painel apenas .TabbedPanelsTab fonte: Arial; font-size:medium; 


or , . TabbedPanelsContentGroup ou . . . 
Texto nos painéis de conteúdo apenas .TabbedPanelsContent fonte: Arial; font-size:medium; 


Alterar as cores de fundo do widget Painéis com aba 
e Para alterar as cores de fundo de diversas partes de um widget Painéis com aba, use a seguinte tabela para localizar a regra de CSS 
apropriada e, em seguida, adicionar ou alterar as propriedades e os valores da cor de fundo de sua preferência: 


Cor a alterar Regra de CSS relevante Exemplo de propriedade e valor a 
adicionar ou alterar 


. TabbedPanelsTabGroup ou 


Cor de fundo das abas do painel .TabbedPanelsTab cor de fundo: 4DDD; (este é o valor 
padrão.) 
ur , .Tabbed PanelsContentGroup ou . 
Cor de fundo dos painéis de conteúdo .TabbedPanelsContent cor de fundo: HEEE; (este é o valor 
padrão.) 
. .TabbedPanelsTabSelected . 
Cor de fundo da aba selecionada cor de fundo: 4EEE; (este é o valor 
padrão.) 
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. TabbedPanelsTabHover 


Cor de fundo das abas do painel cor de fundo: 4CCC; (este é o valor 
quando o ponteiro do mouse passa por padrão.) 
cima 


Restringir a largura dos painéis com aba 
Por padrão, o widget Painéis com aba se expande até ocupar o espaço disponível. Entretanto, você pode restringir a largura de um widget Painéis 
com aba configurando uma propriedade de largura para o recipiente do acordeão. 


1. Abra o arquivo SpryTabbedPanels.css para localizar a regra de CSS .TabbedPanels. Essa regra define propriedades para o principal 
elemento recipiente do widget Painéis com aba. 


Você também pode localizar a regra selecionando o widget Painéis com aba e verificando o painel Estilos CSS (Janela > Estilos CSS). 
Verifique se o painel está definido no modo Atual. 


2. Adicione um valor e uma propriedade de largura à regra. Por exemplo largura: 300px;. 


A Adobe também recomenda 


As publicações do Twitter?” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Sobre a estrutura do Spry 


Nota: Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets 
do Spry existentes na página, você não pode adicionar novos. 


A estrutura do Spry é uma biblioteca JavaScript que permite aos designers criar páginas da Web que garantam experiências mais interessantes 
aos visitantes do site. Com o Spry, você pode usar HTML, CSS e o mínimo de JavaScript para incorporar dados XML aos documentos HTML, 
criar widgets como acordeões e barras de menu, e adicionar diferentes tipos de efeitos a vários elementos de página. A estrutura do Spry foi 
elaborada para simplificar e facilitar o uso do markup aos que têm conhecimentos básicos de HTML, CSS e JavaScript. 


A estrutura do Spry destina-se principalmente aos profissionais de design na Web ou designers não profissionais avançados. Essa não é uma 
estrutura integral de aplicativos da Web para o desenvolvimento de conteúdo da Web em nível empresarial (embora ela possa ser usada com 
outras páginas de nível empresarial). 


Para obter mais informações sobre a estrutura do Spry, consulte www.adobe.com/go/learn dw spryframework br. 


A Adobe também recomenda 
e Guia do desenvolvedor do Spry 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Modelos 
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Utilizando regiões opcionais em modelos 


Sobre as regiões opcionais do modelo 
Inserir uma região opcional 
Definir valores para uma região opcional 


= Raid ua RE 
Sobre as regiões opcionais do modelo PERA BRESE 


Uma região opcional é uma região em um modelo que os usuários podem definir para que seja exibida ou oculta em um documento baseado em 
modelo. Use uma região opcional quando quiser definir condições para a exibição de conteúdo em um documento. 


Ao inserir uma região opcional, você pode definir valores específicos para um parâmetro de modelo ou definir instruções condicionais (instruções 
Hf...else) para regiões do modelo. Use operações verdadeiro/falso simples ou defina expressões e instruções condicionais mais complexas. 
Posteriormente, você poderá modificar a região opcional, caso seja necessário. De acordo com as condições que você definir, os usuários do 
modelo podem editar os parâmetros em documentos baseados em modelo e controlar se a região opcional é exibida. 


Você pode vincular várias regiões opcionais a um determinado parâmetro. No documento baseado em modelo, as duas regiões serão exibidas ou 
ocultas como uma unidade. Por exemplo, você pode exibir uma imagem "fechada" e uma área de texto com o preço de venda de um item. 


E EPA ã Para o início 
Inserir uma regiao opcional 


Use uma região opcional para controlar o conteúdo que pode ou não ser exibido em um documento baseado em modelo. Existem dois tipos de 
regiões opcionais: 


* Regiões opcionais não editáveis, que permitem aos usuários do modelo mostrar e ocultar regiões marcadas sem ativá-las para a edição do 
conteúdo. 


A aba do modelo de uma região opcional é precedida da palavra if. Com base na condição definida no modelo, o usuário pode definir se é 
possível visualizar a região nas páginas que ele cria. 


* Regiões opcionais editáveis, que permitem aos usuários do modelo definir se a região será exibida ou não, e lhes permite editar conteúdo 
na região. 


Por exemplo, se a região opcional inclui uma imagem ou um texto, o usuário do modelo pode definir se o conteúdo será exibido, bem como 
editar o conteúdo se assim desejar. Uma região editável é controlada por uma instrução condicional. 


Inserir uma região opcional não editável 
1. Na janela Documento, selecione o elemento a ser definido como uma região opcional. 
2. Siga um destes procedimentos: 


* Selecione Inserir > Objetos de modelo > Região opcional. 


e Clique com o botão direito do mouse (Windows) ou Control-clique (Macintosh) sobre o conteúdo selecionado e selecione Modelos > 
Nova região opcional. 


e Na categoria Comum do painel Inserir, clique no botão Modelos e selecione Região opcional, no menu pop-up. 


3. Insira um nome para a região opcional, clique na aba Avançado se quiser definir valores para a região opcional e clique em OK. 


Inserir uma região editável opcional 
1. Na janela Documento, posicione o ponto de inserção onde deseja inserir a região opcional. 
Não é possível quebrar o texto de uma seleção para criar uma região editável opcional. Insira a região e, em seguida, insira o conteúdo 
na região. 


2. Siga um destes procedimentos: 
e Selecione Inserir > Objetos de modelo > Região opcional editável. 
e Na categoria Comum do painel Inserir, clique no botão Modelos e selecione Região opcional editável, no menu pop-up. 


3. Insira um nome para a região opcional, clique na aba Avançado se quiser definir valores para a região opcional e clique em OK. 


ga ag á Para o início 
Definir valores para uma região opcional 
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Você pode editar as configurações da região opcional depois de inserir a região em um modelo. Por exemplo, você pode alterar se a configuração 
padrão para o conteúdo deve ser exibida ou não, vincular um parâmetro a uma região opcional existente ou modificar uma expressão de modelo. 


Crie parâmetros de modelo e defina instruções condicionais (instruções If... else) para regiões de modelo. Você pode usar operações 
verdadeiro/falso simples ou definir expressões e instruções condicionais mais complexas. 


Na aba Avançado, você pode vincular várias regiões opcionais a determinado parâmetro. No documento baseado em modelo, as duas regiões 
serão exibidas ou ocultas como uma unidade. Por exemplo, você pode exibir uma imagem "fechada" e uma área de texto com o preço de venda 
de um item. 


Você também pode usar a aba Avançado para gravar uma expressão de modelo que avalie um valor para a região opcional que a exibirá ou 
ocultará. 


1. Na janela Documento, siga um destes procedimentos: 
e Na Visualização de design, clique na aba de modelo da região opcional que você deseja modificar. 


e Na Visualização de design, posicione o ponto de inserção na região de modelo; em seguida, no seletor de tag, na parte inferior da 
janela Documento, selecione a tag de modelo<mmtemplate:if>. 


e Na visualização de código, clique na aba de comentário da região de modelo que você deseja modificar. 
No Inspetor de propriedades (Janela > Propriedades), clique em Editar. 


Na aba Básica, insira um nome para o parâmetro na caixa Nome. 


Selecione Mostrar por padrão para definir a região selecionada a ser exibida no documento. Desmarque-a para definir o valor padrão como 
falso. 
Nota: Para definir outro valor para o parâmetro, na visualização de código, localize o parâmetro na seção do documento e edite o valor. 


5. (Opcional) Clique na aba Avançado e defina as seguintes opções: 


e Se você quiser vincular parâmetros de regiões opcionais, clique na aba Avançado, selecione Usar parâmetro e, no menu pop-up, 
selecione o parâmetro existente que você deseja vincular ao conteúdo selecionado. 


e Para gravar uma expressão de modelo a fim de controlar a exibição de uma região opcional, clique na aba Avançado, selecione Inserir 
expressão e informe a expressão na caixa. 


Nota: O Dreamweaver insere marcas de aspas duplas em torno do texto inserido. 


6. Clique em OK. 
Quando você usa o objeto de modelo Região opcional, o Dreamweaver insere comentários de modelo no código. Um parâmetro de modelo 
é definido na seção head, como no seguinte exemplo: 


<!-- TemplateParam name="departmentImage" type="boolean" value="true" --> 


No local em que a região opcional é inserida, um código semelhante a este é exibido: 


<!-- TemplateBeginIf cond="departmentImage" --> 
<p><img src="/images/airfare on.gif" width="85" height="22"> </p> 
<!-- TemplateEndIf --> 


Você pode acessar e editar parâmetros de modelo no documento baseado em modelo. 


Mais tópicos da Ajuda 
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Sintaxe do modelo 


Regras gerais de sintaxe 
Tags de modelo 

Tags de ocorrência 
Verificar sintaxe de modelo 


Regras gerais de sintaxe 


Para o início 


O Dreamweaver usa tags de comentário HTML para especificar regiões em modelos e documentos baseados em modelo, de forma que os 
documentos baseados em modelo permanecem arquivos HTML válidos. Quando você insere um objeto de modelo, as tags de modelo são 


inseridas no código. 


Estas são regras gerais de sintaxe: 


e Você sempre pode substituir qualquer espaço em branco (espaços, abas, quebras de linha) que aparecer. O espaço em branco é 


obrigatório, exceto no início ou no fim de um comentário. 


e Os atributos podem ser especificados em qualquer ordem. Por exemplo, em um TemplateParam, é possível especificar o tipo antes do 


nome. 


e Os nomes de atributo e comentário diferenciam maiúsculas e minúsculas. 


e Todos os atributos devem estar entre aspas. Podem ser usadas aspas simples ou duplas. 


Tags de modelo 


O Dreamweaver usa as seguintes tags de modelo: 


<!-- TemplateBeginEditable name="..." --> 

<!-- TemplateEndEditable --> 

<!-- TemplateParam name="..." type="..." value=",.." --> 
<!-- TemplateBeginRepeat name="..." --> 

<!-- TemplateEndRepeat --> 

<!-- TemplateBeginIf cond="..." --> 

<!-- TemplateEndIf --> 

<!-- TemplateBeginPassthroughIf cond="..." --> 


<!-- TemplateEndPassthroughIf --> 

<!-- TemplateBeginMultipleIf --> 

<!-- TemplateEndMultipleIf --> 

<!-- TemplateBeginPassthroughMultipleIf --> 
<!-- TemplateEndPassthroughMultipleIf --> 


<!-- TemplateBeginIfClause cond="..." --> 

<!-- TemplateEndIfClause --> 

<!-- TemplateBeginPassthroughIfClause cond="..." --> 
<!-- TemplateEndPassthroughIfClause --> 

<!-- TemplateExpr expr="..." --> (equivalent to 00...00) 
<!-- TemplatePassthroughExpr expr="..." --> 

<!-- TemplateInfo codeOutsideHTMLIsLocked="..." --> 


Tags de ocorrência 


O Dreamweaver usa as seguintes tags de ocorrência: 


<!-- InstanceBegin template="..." codeOutsideHTMLIsLocked=".,.." --> 
<!-- InstanceEnd --> 

<!-- InstanceBeginEditable name="..." --> 

<!-- InstanceEndEditable --> 

<!-- InstanceParam name="..." type="..." value=",.." passthrough="..." 
<!-- InstanceBeginRepeat name="..." --> 


375 


Para o início 


Para o início 


<!-- InstanceEndRepeat --> 
<!-- InstanceBeginRepeatEntry --> 
<!-- InstanceEndRepeatEntry --> 


das E Para o início 
Verificar sintaxe de modelo cá 


O Dreamweaver verifica a sintaxe quando você salva o modelo, mas você pode verificar manualmente a sintaxe do modelo antes de salvar o 
modelo. Por exemplo, se você adicionar uma expressão ou um parâmetro de modelo na visualização de código, poderá verificar se o código 
segue a sintaxe correta. 


1. Abra o documento a ser verificado na janela Documento. 
2. Selecione Modificar > Modelos > Verificar sintaxe de modelo. 


É exibida uma mensagem de erro se a sintaxe estiver mal formulada. A mensagem de erro descreve o erro e refere-se à linha específica do 
código em que está o erro. 


Mais tópicos da Ajuda 
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Configuração de preferências de criação para os modelos 


Personalização das preferências de codificação por cor de um modelo 
Definir preferências de realce para regiões de modelo 


5 = A a agá js P. iníci 
Personalização das preferências de codificação por cor de um modelo PRP ERUE 


As preferências de cor de código controlam atributos de texto, cor de fundo e estilo do texto exibido na visualização de código. Você pode definir 
seu próprio esquema de cores para diferenciar facilmente as regiões do modelo quando visualizar um documento na Visualização de código. 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
Selecione Codificação por cores na lista de categorias à esquerda. 
Selecione HTML na lista Tipo de documento e clique no botão Editar esquema de cores. 


Na lista Estilos de, selecione Tags de modelo. 


1 Reto O 


Defina os atributos de cor, cor de fundo e estilo para o texto da visualização de código da seguinte maneira: 


* Para alterar a cor do texto, na caixa Cor do texto, digite o valor hexadecimal da cor a ser aplicada ao texto selecionado ou use o seletor 
de cores para escolher uma cor para aplicar ao texto. Faça o mesmo no campo Fundo para adicionar ou alterar uma cor de fundo do 
texto selecionado. 


e Para adicionar um atributo de estilo ao código selecionado, clique nos botões N (negrito), | (itálico) ou S (sublinhado) para definir o 
formato desejado. 


6. Clique em OK. 
Nota: Se quiser efetuar alterações globais, você poderá editar o arquivo de origem que armazena suas preferências. No Windows XP, ele 
está localizado em CiDocuments and Settingsl%nome do usuário%lApplication DatalAdobelDreamweaver 
91ConfigurationiCodeColoringiColors.xml. No Windows Vista, ele está localizado em C:lUsersi%nome do usuário%lApplication 
DatalAdobelDreamweaver 91ConfigurationlCodeColoringiColors.xml. 


fts a A - E Para o início 
Definir preferências de realce para regiões de modelo 


Você pode usar as preferências de realce do Dreamweaver para personalizar as cores de realce dos contornos das regiões editáveis e 
bloqueadas de um modelo na Visualização de design. A cor da região editável aparece no modelo, bem como nos documentos baseados no 
modelo. 


Alterar cores de realce de modelo 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
2. Selecione Realce na lista de categorias à esquerda. 
3. Clique nas caixas de cor Regiões editáveis, Regiões aninhadas ou Regiões bloqueadas e escolha uma cor de realce usando o seletor de 
cores (ou insira o valor hexadecimal da cor de realce na caixa). 
Para obter informações sobre o uso do seletor de cor, consulte Usar o seletor de cores. 


4. (Opcional) Repita o processo para outros tipos de região de modelo, caso seja necessário. 
5. Clique na opção Mostrar para ativar ou desativar a exibição de cores na janela Documento. 

Nota: A Região aninhada não tem uma opção Mostrar; sua exibição é controlada pela opção Região editável. 
6. Clique em OK. 


Exibir cores de realce na janela Documento 

*& Selecione Exibir > Auxílios visuais > Elementos invisíveis. 

As cores de realce aparecem na janela de documento somente quando Exibir > Auxílios visuais > Elementos invisíveis está ativado e as opções 
apropriadas são ativadas nas preferências de realce. 


Nota: Se os elementos invisíveis estiverem visíveis, mas as cores de realce não, selecione Editar > Preferências (Windows) ou Dreamweaver > 
Preferences (Macintosh), e selecione a categoria Realce. Certifique-se de que a opção Mostrar ao lado da cor de realce apropriada esteja 
selecionada. Certifique-se também de que a cor desejada apareça contra a cor de fundo da página. 

Mais tópicos da Ajuda 
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Reconhecimento de modelos e documentos baseados em modelo 


Reconhecimento de modelos na Visualização de design 
Reconhecimento de modelos na visualização de código 
Reconhecimento de documentos baseados em modelo na Visualização de design 
Reconhecimento de documentos baseados em modelo na visualização de código 


E] E « ds « P, iníci 
Reconhecimento de modelos na Visualização de design iiiincças 


Na visualização de design, as regiões editáveis aparecem na janela Documento entre contornos retangulares com uma cor de realce predefinida. 
Uma pequena aba aparece no canto superior esquerdo de cada região, indicando o nome da região. 


Para identificar um arquivo de modelo, verifique a barra de título na janela Documento. A barra de título de um arquivo de modelo contém a 
palavra <<Modelo>> e a extensão do nome de arquivo é .dwt. 


Bi <<Template>> (trioHome.dwt*) 


<body>|<px 784x 434 » 25K / 7 sec 


A - - no o dis P das: 
Reconhecimento de modelos na visualização de código ane o NISTO 


Na Visualização de código, as regiões de conteúdo editável são marcadas em HTML com os seguintes comentários: 
<!-- TemplateBeginEditable> and <!-- TemplateEndEditable --> 


Você pode usar preferências de cor de código para definir seu próprio esquema de cores de forma a diferenciar facilmente as regiões do 
modelo quando exibir um documento na Visualização de código. 


Tudo o que estiver entre esses comentários será editável nos documentos baseados no modelo. O código de origem HTML de uma região 
editável deve ser assim: 


<table width="75%" border="1" cellispacing="0" cellpadding="0"> 
<tr bgcolor="4333366"> 
<td>Name</td> 
<td><font color="4FFFFFF">Address</font></td> 
<td><font color="4FFFFFF">Telephone Number</font></td> 
</tr> 
<!-- TemplateBeginEditable name="LocationList" --> 
<Er> 
<td>Enter name</td> 
<td>Enter Address</td> 
<td>Enter Telephone</td> 
</tr> 
<!-- TemplateEndEditable --> 
</table> 
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Nota: Ao editar o código do modelo na visualização de código, tenha cuidado para não alterar as tags de comentário relacionadas ao modelo 
que o Dreamweaver utiliza. 


: : : sa : P iníci 
Reconhecimento de documentos baseados em modelo na Visualização de design fia 
Em um documento baseado em modelo, as regiões editáveis aparecem na Visualização de design da janela Documento circundadas por 
contornos retangulares em uma cor de realce predefinida. Uma pequena aba aparece no canto superior esquerdo de cada região, indicando o 
nome da região. 


Além dos contornos de regiões editáveis, a página inteira tem um contorno em outra cor, com uma aba no canto superior direito que exibe o 
nome do modelo do documento. Esse retângulo realçado informa que o documento baseia-se em um modelo e que é possível alterar o conteúdo 
fora das regiões editáveis. 


Pi TRIO Motor Company (Untitled-2*) 


” 
e | > 
<mmtinstance:editable > 784x 421 + 25K /7 sec 


; E ” ”, edi Para o início 
Reconhecimento de documentos baseados em modelo na visualização de código Roe 
Na visualização de código, as regiões editáveis de um documento derivadas de um modelo aparecem em uma cor diferente da do código nas 
regiões não editáveis. Você pode efetuar alterações somente no código nas regiões editáveis ou nos parâmetros editáveis, e não pode digitar nas 
regiões bloqueadas. 


O conteúdo editável é marcado em HTML com os seguintes Dreamweaver comentários: 
<!-- InstanceBeginEditable> and <!-- InstanceEndEditable --> 


Tudo o que está entre esses comentários é editável em um documento baseado em modelo. O código de origem HTML de uma região editável 
deve ser assim: 


<body bgcolor="H&FFFFFF" leftmargin="0"> 
<table width="75%" border="1" cellspacing="0" cellpadding="0"> 
<tr bgcolor="4333366"> 
<td>Name</td> 
<td><font color="4FFFFFF">Address</font></td> 
<td><font color="4FFFFFF">Telephone Number</font></td> 
</tr> 
<!-- InstanceBeginEditable name="LocationList" --> 
<tr> 
<td>Enter name</td> 
<td>Enter Address</td> 
<td>Enter Telephone</td> 
</tr> 
<!-- InstanceEndEditable --> 
</table> 
</body> 


A cor padrão de um texto não editável é cinza. Você pode selecionar outra cor para as regiões editáveis e não editáveis na caixa de diálogo 
Preferências. 


Mais tópicos da Ajuda 
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Exportação e importação de conteúdo de modelo 


Sobre o conteúdo XML do modelo 

Exportar regiões editáveis de um documento como XML 
Importar conteúdo XML 

Exportar um site sem markup de modelo 


Sobre o conteúdo XML do modelo PPS IARR 


Você pode considerar um documento baseado em modelo como um documento que contém dados representados por pares de nome e valor. 
Cada par consiste no nome de uma região editável e o conteúdo dessa região. 


Você pode exportar os pares de nome e valor para um arquivo XML para poder trabalhar com os dados fora do Dreamweaver (por exemplo, em 
um editor XML ou um editor de texto, ou um aplicativo de banco de dados). Inversamente, se você tiver um documento XML que esteja 
estruturado corretamente, poderá importar os dados dele para um documento baseado em um modelo do Dreamweaver. 


E e NA 
Exportar regiões editáveis de um documento como XML dia 


1. Abra um documento baseado em modelo que contenha regiões editáveis. 
2. Selecione Arquivo > Exportar > Dados do modelo como XML. 
3. Selecione uma das opções de Notação: 
* Se o modelo contiver parâmetros de modelo ou regiões repetitivas, selecione Usar tags padrão de XML do Dreamweaver. 
* Se o modelo não contiver parâmetros de modelo ou regiões repetitivas, selecione Usar nomes de regiões editáveis como tags de XML. 


4. Clique em OK. 
5. Na caixa de diálogo exibida, selecione um local de pasta, insira um nome para o arquivo XML e clique em Salvar. 
É gerado um arquivo XML que contém o material dos parâmetros e das regiões editáveis do documento, inclusive as regiões editáveis 


dentro das regiões repetitivas ou das regiões opcionais. O arquivo XML inclui o nome do modelo original, bem como o nome e o conteúdo 
de cada região do modelo. 


Nota: O conteúdo nas regiões não editáveis não é exportado para o arquivo XML. 


Importar conteúdo XML Para o início 


1. Selecione Arquivo > Importar > Importar XML para modelo. 
2. Selecione o arquivo XML e clique em Abrir. 


O Dreamweaver cria um novo documento baseado no modelo especificado no arquivo XML. Ele preenche o conteúdo de cada região 
editável nesse documento usando os dados do arquivo XML. O documento resultante aparece em uma nova janela Documento. 


Se seu arquivo XML não estiver configurado exatamente da forma como o Dreamweaver espera, pode ser que você não consiga 
importar os dados. Uma solução para esse problema é exportar um arquivo XML do Dreamweaver, de forma que você terá um arquivo 
XML com exatamente a mesma estrutura. Em seguida, copie os dados do arquivo XML original para o arquivo XML exportado. O 
resultado é um arquivo XML com a estrutura correta que contém os dados apropriados, prontos para serem importados. 


PCR 
Exportar um site sem markup de modelo fico 


Você pode exportar documentos baseados em modelo de um site para outro sem incluir o markup de modelo. 


1. Selecione Modificar > Modelos > Exportar sem markup. 


2. Na caixa Pasta, insira o caminho até a pasta para a qual o arquivo será exportado ou clique em Procurar e selecione a pasta. 
Nota: Você deve selecionar uma pasta fora do site atual. 


3. Se você quiser salvar uma versão XML dos documentos baseados em modelo, selecione Manter arquivos de dados de modelo. 


4. Se você quiser atualizar alterações em arquivos exportados anteriormente, selecione Extrair somente arquivos alterados e clique em OK. 


[5 ex-nc-sa ) 
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Edição de conteúdo em um documento baseado em modelo 


Sobre a edição de conteúdo em documentos baseados em modelo 
Modificar propriedades de modelo 
Adicionar, excluir e alterar a ordem de uma entrada da região repetitiva 


a , ES 
Sobre a edição de conteúdo em documentos baseados em modelo PRA UMES 


Os modelos do Dreamweaver especificam regiões que são bloqueadas (não editáveis) e outras que são editáveis para documentos baseados em 
modelos. 


Nas páginas baseadas em modelos, os usuários do modelo só podem editar o conteúdo em regiões editáveis. Você pode facilmente identificar e 
selecionar regiões editáveis para editar conteúdo. Os usuários do modelo não podem editar o conteúdo das regiões bloqueadas. 


Nota: Se você tentar editar uma região bloqueada em um documento baseado em modelo quando o realce estiver desativado, o ponteiro do 
mouse mudará para indicar que não é possível clicar em uma região bloqueada. 
Os usuários do modelo também podem modificar propriedades e editar entradas de uma região repetitiva em documentos baseados em modelos. 


Modificar propriedades de modelo EN 


Quando os autores do modelo criam parâmetros em um modelo, os documentos baseados no modelo herdam automaticamente os parâmetros e 
suas configurações de valor iniciais. O usuário do modelo pode atualizar os atributos de tag editáveis e outros parâmetros de modelo (como 
configurações de região opcionais). 


Modificar um atributo de tag editável 
1. Abra o documento baseado em modelo. 
2. Selecione Modificar > Propriedades de modelo. 


A caixa de diálogo Propriedades de modelo é aberta, mostrando uma lista das propriedades disponíveis. A caixa de diálogo mostra as 
regiões opcionais e os atributos de tag editáveis. 


3. Na lista Nome, selecione a propriedade. 
A área inferior da caixa de diálogo é atualizada de forma a mostrar o rótulo da propriedade selecionada e seu valor atribuído. 


4. No campo à direita do rótulo de propriedade, edite o valor para modificar a propriedade no documento. 
Nota: O nome do campo e os valores atualizáveis são definidos no modelo. Os atributos que não aparecerem na lista Nome não podem 
ser editados no documento baseado em modelo. 


5. Selecione Permitir modelos aninhados para controlar isto se você quiser passar a propriedade editável junto com os documentos baseados 
no modelo aninhado. 


Modificar parâmetros de modelo de região opcionais 
1. Abra o documento baseado em modelo. 
2. Selecione Modificar > Propriedades de modelo. 


A caixa de diálogo Propriedades de modelo é aberta, mostrando uma lista das propriedades disponíveis. A caixa de diálogo mostra as 
regiões opcionais e os atributos de tag editáveis. 


3. Na lista Nome, selecione uma propriedade. 
A caixa de diálogo é atualizada de forma a mostrar o rótulo da propriedade selecionada e seu valor atribuído. 


4. Selecione Mostrar para exibir a região opcional no documento ou desmarque Mostrar para ocultar a região opcional. 
Nota: O nome do campo e a configuração padrão são definidos no modelo. 


5. Selecione Permitir modelos aninhados para controlar isto se você quiser passar a propriedade editável junto com os documentos baseados 
no modelo aninhado. 


ida E cias Ea P, iníci 
Adicionar, excluir e alterar a ordem de uma entrada da região repetitiva ideas 


Use controles de região repetitiva para adicionar, excluir ou alterar a ordem de entradas em documentos baseados em modelo. Quando você 
adiciona uma entrada de região repetitiva, uma cópia da região repetitiva inteira é adicionada. Para atualizar o conteúdo nas regiões repetitivas, o 
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modelo original deve incluir uma região editável na região repetitiva. 


Modelo: simpleRepeat 


Product Name SKUg Price 
Repeat:enterProduct +|-|wja] 
Macadamia nuts Mac3423 12.00 lb. 
updateProducts 
Brazil nuts Brag302 9.00 lb. 
updateProducts 


Adicionar, excluir ou alterar a ordem de uma região repetitiva 
1. Abra o documento baseado em modelo. 
2. Posicione o ponto de inserção na região repetitiva para selecioná-la. 


3. Siga um destes procedimentos: 
e Clique no botão de mais (+) para adicionar uma entrada de região repetitiva abaixo da entrada selecionada. 
* Clique no botão de menos (—) para excluir a entrada da região repetitiva selecionada. 
e Clique no botão Seta abaixo para mover a entrada selecionada uma posição para baixo. 
e Clique no botão Seta para cima para mover a entrada selecionada uma posição para cima. 


Nota: Uma alternativa é selecionar Modificar > Modelo e marcar uma das opções de entrada repetitiva na parte inferior do menu de 
contexto. Você pode usar esse menu para inserir uma nova entrada repetitiva ou mover a posição da entrada selecionada. 


Recortar, copiar e excluir entradas 
1. Abra o documento baseado em modelo. 
2. Posicione o ponto de inserção na região repetitiva para selecioná-la. 


3. Siga um destes procedimentos: 
e Para recortar uma entrada repetitiva, selecione Editar > Entradas repetitivas > Recortar entrada repetitiva. 
* Para copiar uma entrada repetitiva, selecione Editar > Entradas repetitivas > Copiar entrada repetitiva. 
e Para remover uma entrada repetitiva, selecione Editar > Entradas repetitivas > Excluir entrada repetitiva. 
e Para colar uma entrada repetitiva, selecione Editar > Colar. 
Nota: A colagem insere uma nova entrada, ela não substitui qualquer entrada existente. 


Mais tópicos da Ajuda 
Criar uma página baseada em um modelo 
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Edição, atualização e exclusão de modelos 


Sobre a edição e a atualização de modelos 

Abrir um modelo para edição 

Renomear um modelo 

Alterar a descrição de um modelo 

Atualizar manualmente documentos baseados em modelos 
Atualizar modelos em site do Contribute 

Excluir um arquivo de modelo 


PR . dá P, iníci 
Sobre a edição e a atualização de modelos De, eia 


Quando você efetua alterações e salva um modelo, todos os documentos baseados no modelo são atualizados. Você também pode atualizar 
manualmente um documento baseado em modelo ou o site inteiro, caso isso seja necessário. 


Nota: Para editar um modelo para um site do Contribute, use o Dreamweaver; não é possível editar modelos no Contribute. 
Use a categoria Modelos do painel Ativos para gerenciar modelos existentes, inclusive renomear e excluir arquivos de modelo. 


Você pode executar estas tarefas de gerenciamento de modelo com o painel Ativos: 
e Criar um modelo 
e Editar e atualizar modelos 
e Aplicar ou remover um modelo em um documento 


O Dreamweaver verifica a sintaxe do modelo ao salvá-lo. Não é recomendável verificar manualmente a sintaxe durante a edição do modelo. 


. Rusia P iníci 
Abrir um modelo para edição PR RER 


Você pode abrir um arquivo de modelo diretamente para edição ou abrir um documento baseado em modelo e, em seguida, abrir o modelo 
anexado para edição. 


Quando você realiza uma alteração em um modelo, o Dreamweaver solicita que você atualize os documentos baseados no modelo. 


Nota: Você também pode atualizar manualmente os documentos para refletir as alterações do modelo, caso isso seja necessário. 


Abrir e editar um arquivo de modelo 
1. No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel 3. 


O painel Ativos lista todos os modelos disponíveis para o site e exibe uma visualização do modelo selecionado. 
2. Na lista de modelos disponíveis, siga um destes procedimentos: 
e Clique duas vezes no nome do modelo a ser editado. 
e Selecione um modelo para edição e clique no botão Editar [7 na parte inferior do painel Ativos. 


3. Modifique o conteúdo do modelo. 
Para modificar as propriedades de página do modelo, selecione Modificar > Propriedades da página. (Os documentos baseados em um 
modelo herdam as propriedades de página do modelo.) 


4. Salve o modelo. O Dreamweaver solicita que você atualize páginas com base no modelo. 


5. Clique em Atualizar para atualizar todos os documentos com base no modelo modificado; clique em Não atualizar se não quiser atualizar os 
documentos baseados no modelo modificado. 


O Dreamweaver exibe um registro que indica os arquivos que foram atualizados. 


Abrir e modificar o modelo anexado ao documento atual 
1. Abra o documento baseado em modelo na janela Documento. 
2. Siga um destes procedimentos: 


* Selecione Modificar > Modelos > Abrir modelo anexado. 
e Clique com o botão direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Abrir modelo anexado. 


3. Modifique o conteúdo do modelo. 
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Para modificar as propriedades de página do modelo, selecione Modificar > Propriedades da página. (Os documentos baseados em um 
modelo herdam as propriedades de página do modelo.) 


4. Salve o modelo. O Dreamweaver solicita que você atualize páginas com base no modelo. 
5. Clique em Atualizar para atualizar todos os documentos com base no modelo modificado; clique em Não atualizar se não quiser atualizar os 
documentos baseados no modelo modificado. 


O Dreamweaver exibe um registro que indica os arquivos que foram atualizados. 


Para o início 
Renomear um modelo 


1. No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel 3. 
2. Clique no nome do modelo para selecioná-lo. 
3. Clique no nome novamente para que o texto possa ser selecionado e insira um novo nome. 
Esse método de renomeação funciona da mesma forma que a renomeação de um arquivo no Windows Explorer (Windows) ou no Finder 


(Macintosh). Assim como no Windows Explorer e no Finder, faça uma pausa rápida entre os cliques. Não clique duas vezes no nome, pois 
esse procedimento abre o modelo para edição. 


4. Clique em outra área do painel Ativo ou pressione Enter (Windows) ou Return (Macintosh) para ativar a alteração. 
Um alerta pergunta se você deseja atualizar os documentos baseados nesse modelo. 


5. Para atualizar todos os documentos do site que utilizam esse modelo, clique em Atualizar. Clique em Não atualizar se você não quiser 
atualizar qualquer documento baseado nesse modelo. 


Resid Para o início 
Alterar a descrição de um modelo gi 


A descrição do modelo aparece na caixa de diálogo Novo documento quando você cria uma página a partir de um modelo existente. 


1. Selecione Modificar > Modelos > Descrição. 


2. Na caixa de diálogo Descrição do modelo, edite a descrição e clique em OK. 


: IE 
Atualizar manualmente documentos baseados em modelos o 


Quando você faz uma alteração em um modelo, o Dreamweaver solicita que você atualize os documentos baseados no modelo. Você pode 
atualizar manualmente o documento atual ou o site inteiro, caso seja necessário. O processo de atualização manual dos documentos baseados 
em modelo é igual ao de reaplicação do modelo. 


Aplicar alterações de modelo ao documento baseado em modelo 
1. Abra o documento na janela Documento. 
2. Selecione Modificar > Modelos > Atualizar página atual. 


O Dreamweaver atualiza o documento com todas as alterações do modelo. 


Atualizar o site inteiro ou todos os documentos que usam determinado modelo 
Você pode atualizar todas as páginas no site ou somente as páginas de um modelo específico. 
1. Selecione Modificar > Modelos > Atualizar páginas. 
2. No menu Pesquisar, siga um destes procedimentos: 


e Para atualizar todos os arquivos no site selecionado com seus modelos correspondentes, selecione Site inteiro e indique o nome do site 
no menu pop-up adjacente. 


e Para atualizar os arquivos de um modelo específico, selecione Arquivos que usam e indique o nome do modelo no menu pop-up 
adjacente. 
3. Verifique se Modelos está selecionado na opção Atualizar. 


4. Se você não quiser ver um registro dos arquivos que o Dreamweaver atualiza, desmarque a opção Mostrar registro; caso contrário, deixe a 
opção selecionada. 


5. Clique em Iniciar para atualizar os arquivos como indicado. Se você marcou a opção Mostrar registro, o Dreamweaver fornecerá 
informações sobre os arquivos que ele tenta atualizar, inclusive informações sobre o sucesso da atualização. 


6. Clique em Fechar. 


5 5 ' Para o início 
Atualizar modelos em site do Contribute Ee 
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Os usuários do Contribute não podem alterar um modelo do Dreamweaver. Entretanto, você pode usar o Dreamweaver para alterar um modelo 
de um site do Contribute. 


Lembre-se do seguinte ao atualizar modelos em um site do Contribute: 


e O Contribute somente recupera modelos novos e alterados no site quando o Contribute é iniciado e quando um usuário do Contribute altera 
as respectivas informações de conexão. Se você efetuar alterações em um modelo enquanto um usuário do Contribute edita um arquivo 
baseado nesse modelo, o usuário não verá as alterações no modelo até reiniciar o Contribute. 


e Se você remover uma região editável de um modelo, o usuário do Contribute que estiver editando uma página baseada nesse modelo pode 
ficar confuso sobre o que fazer com o conteúdo da região editável. 


Para atualizar um modelo em um site do Contribute, siga as etapas a seguir. 


1. Abra o modelo do Contribute no Dreamweaver, edite-o e salve-o. Para obter instruções, consulte Abrir um modelo para edição. 


2. Solicite que todos os usuários do Contribute que estiverem trabalhando no site reiniciem o Contribute. 


' ' Para o início 
Excluir um arquivo de modelo 


1. No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel 3. 
2. Clique no nome do modelo para selecioná-lo. 


3. Clique no botão Excluir if na parte inferior do painel e confirme se deseja excluir o modelo. 
Importante: Depois de excluído, o arquivo de modelo não pode ser recuperado. O arquivo de modelo é excluído do site. 


Os documentos baseados em um modelo excluído não são desanexados do modelo; eles retêm a estrutura e as regiões editáveis que o 
arquivo de modelo tinha antes de ser excluído. É possível converter esse documento em um arquivo HTML sem regiões editáveis ou 
bloqueadas. 


Mais tópicos da Ajuda 


ERES 
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Definição de atributos de tag editáveis em modelos 


Especificar atributos de tag editáveis em um modelo 
Tornar não editável um atributo de tag editável 


Especificar atributos de tag editáveis em um modelo Para o início 


Você pode permitir que um usuário do modelo modifique atributos de tag específicos em um documento criado com um modelo. 


Por exemplo, você pode definir uma cor de fundo no documento de modelo e permitir que os usuários definam outra cor de fundo para as 
páginas que eles criarem. Os usuários só podem atualizar os atributos especificados como editáveis. 


Você também pode definir vários atributos editáveis em uma página para que os usuários do modelo possam modificar os atributos nos 
documentos baseados em modelo. Estes são os tipos de dados aceitos: texto, booliano (verdadeiro/falso), cor e URL. 


A criação de um atributo de tag editável insere um parâmetro de modelo no código. Um valor inicial para o atributo é definido no documento de 
modelo; quando um documento baseado em modelo é criado, ele herda o parâmetro. Um usuário de modelo poderá, em seguida, editar o 
parâmetro no documento baseado em modelo. 


Nota: Se você vincular um atributo editável a uma folha de estilos, os atributos da folha de estilos não ficarão mais disponíveis para visualização 
ou edição no arquivo de modelo. 

1. Na janela Documento, selecione um item para o qual você deseja definir um atributo de tag editável. 

2. Selecione Modificar > Modelos > Tornar atributo editável. 


3. Na caixa Atributo, insira um nome ou selecione um atributo na caixa de diálogo Atributos de tag editáveis de uma das seguintes maneiras: 
e Se o atributo que ficará editável constar do menu pop-up Atributo, selecione-o. 


e Se o atributo que ficará editável não estiver no menu pop-up Atributo, clique em Adicionar e, na caixa de diálogo exibida, insira o nome 
do atributo a ser adicionado e clique em OK. 
4. Certifique-se de que a opção Tornar atributo editável esteja selecionada. 


5. Na caixa Rótulo, insira um nome exclusivo para o atributo. 
Para facilitar a identificação posterior de determinado atributo de tag editável, use um rótulo que identifique o elemento e o atributo. Por 
exemplo, você pode rotular como logoSrc uma imagem cuja origem seja editável ou rotular a cor de fundo editável de uma tag de corpo 
como bodyBgcolor. 


6. No menu Tipo, selecione o tipo de valor permitido para este atributo definindo uma das seguintes opções: 


e Para que um usuário insira um valor de texto para o atributo, selecione Texto. Por exemplo, você pode usar texto com o atributo align; 
em seguida, o usuário pode definir o valor do atributo como left, right ou center. 


e Para inserir um link em um elemento, como um caminho de arquivo até uma imagem, selecione URL. O uso dessa opção atualiza 
automaticamente o caminho usado em um link. Se o usuário mover a imagem para uma nova pasta, a caixa de diálogo Atualizar links 
será exibida. 


e Para ter o seletor de cores disponível para escolher um valor, marque Cor. 
e Para ativar um usuário a fim de selecionar um valor de verdadeiro ou falso na página, selecione Verdadeiro/falso. 


* Para permitir que o usuário do modelo digite um valor numérico para atualizar um atributo (por exemplo, para alterar os valores de 
altura ou de largura de uma imagem), selecione Número. 


7. A caixa Valor padrão exibe o valor do atributo de tag selecionado no modelo. Insira um novo valor nessa caixa para definir outro valor inicial 
para o parâmetro no documento baseado em modelo. 

8. (Opcional) Se você quiser efetuar alterações em outro atributo da tag selecionada, marque o atributo e defina as opções desse atributo. 

9. Clique em OK. 


ra aa « e: P. iníci 
Tornar não editável um atributo de tag editável a 


Uma tag anteriormente marcada como editável pode ser marcada como não editável. 


No documento de modelo, clique no elemento associado ao atributo editável ou use o seletor para selecionar a tag. 
Selecione Modificar > Modelos > Tornar atributo editável. 


No menu pop-up Atributos, selecione o atributo que será afetado. 


MOL IN IR 


Desmarque Tornar atributo editável e clique em OK. 
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5. Atualize os documentos baseados no modelo. 


Mais tópicos da Ajuda 


ERES 
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Criação de um modelo aninhado 


Sobre modelos aninhados 
Criar um modelo aninhado 
Evitar que uma região editável passe para um modelo aninhado 


Para o início 


Sobre modelos aninhados 


Um modelo aninhado é um modelo cujo design e regiões editáveis baseiam-se em outro modelo. Os modelos aninhados são úteis para controlar o 
conteúdo em páginas de um site que tenham muitos elementos de design em comum, mas algumas variações entre as páginas. Por exemplo, um 
modelo base pode conter áreas de design mais abrangentes a serem usadas por muitos contribuidores de conteúdo de um site, ao passo que um 
modelo aninhado pode definir melhor as regiões editáveis das páginas de uma seção específica de um site. 


As regiões editáveis de um modelo base são passadas para o modelo aninhado e permanecem editáveis nas páginas criadas a partir de um 
modelo aninhado, a não ser que novas regiões de modelo sejam inseridas nessas regiões. 


As alterações realizadas em um modelo base são automaticamente atualizadas em modelos que utilizam o modelo base e em todos os 
documentos baseados em modelos que utilizam os modelos principal e aninhado. 


No seguinte exemplo, o modelo trioHome contém três regiões editáveis, denominadas Body, NavBar e Footer: 


Bi <<Template>> (trioHome.dwt*) 


<body>|<px 784x 434 + 25K / 7 sec 


Para criar um modelo aninhado, um novo documento com base no modelo foi criado e, em seguida, salvo como um modelo e denominado 
TrioNested. No modelo aninhado, duas regiões editáveis foram adicionadas à região editável denominada Body. 
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| Template>> (TrioNested.dwt*) 


TRIO DEALERS 


nsert list of certified dealers 


Dealer 1 


Dealer 2 


<mmtinstance:editable > <mmtemplate:editable > <p> 


Quando você adiciona uma nova região editável a uma região editável passada para o modelo aninhado, a cor de realce da região editável muda 
para laranja. O conteúdo adicionado fora da região editável, como o gráfico na editableColumn, não poderá mais ser editado em documentos 
baseados no modelo aninhado. As áreas editáveis com realce azul, independentemente de terem sido adicionadas ao modelo aninhado ou de 
serem provenientes do modelo base, permanecem editáveis em documentos que se baseiam no modelo aninhado. As regiões de modelo não 
contêm uma região editável passada para os documentos baseados em modelo como regiões editáveis. 


õ ê P iníci 
Criar um modelo aninhado PEA 


Os modelos aninhados permitem que você crie variações de um modelo base. Você pode aninhar diversos modelos para definir layouts cada vez 
mais específicos. 


Por padrão, todas as regiões editáveis do modelo base passam do modelo aninhado para o documento baseado nesse modelo aninhado. Isso 
significa que se você criar uma região editável em um modelo base e, em seguida, criar um modelo aninhado, a região editável aparecerá em 
documentos baseados no modelo aninhado (se você não inseriu novas regiões de modelo nessa região do modelo aninhado). 


Nota: É possível inserir markup de modelo dentro de uma região editável para que ela não passe como uma região editável em documentos 
baseados no modelo aninhado. Essas regiões têm uma borda laranja em vez de azul. 


1. Para criar um documento a partir do modelo no qual você deseja basear o modelo aninhado, siga um destes procedimentos: 


e Na categoria Modelos do painel Ativos, clique com o botão direito do mouse (Windows) ou Control-clique (Macintosh) no modelo com o 
qual você deseja criar um novo documento e selecione Novo a partir de modelo no menu de contexto. 


e Selecione Arquivo > Novo. Na caixa de diálogo Novo documento, selecione a categoria Página de modelo e selecione o site que contém 
o modelo a ser usado. Na lista Modelo, clique duas vezes no modelo para criar um novo documento. 


2. Selecione Arquivo > Salvar como modelo para salvar o novo documento como um modelo aninhado: 


3. Insira um nome na caixa Salvar como e clique em OK. 


E ad ER « P. iníci 
Evitar que uma região editável passe para um modelo aninhado no cid 


Nos modelos aninhados, as regiões editáveis de passagem têm uma borda azul. É possível inserir markup de modelo dentro de uma região 
editável para que ela não passe como uma região editável em documentos baseados no modelo aninhado. Essas regiões têm uma borda laranja 
em vez de azul. 


1. Na visualização de código, localize a região editável que não deve ser passada. 
As regiões editáveis são definidas por tags de comentário de modelo. 


2. Acrescente o seguinte código ao código da região editável: 


co(" "aa 


Este código de modelo pode ser colocado em qualquer lugar dentro de <!-- InstanceBeginEditable --><!As tags -- InstanceEndEditable --> 
que rodeiam a região editável. Por exemplo: 
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<!-- InstanceBeginEditable name="EditRegion1" --> 
<p>00("")00 Editable 1 </p> 
<!-- InstanceEndEditable --> 


Mais tópicos da Ajuda 
Modelos aninhados 
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Criação de regiões repetitivas em modelos 


Sobre regiões repetitivas do modelo 

Criar uma região repetitiva em um modelo 

Inserir uma tabela repetitiva 

Definir cores de fundo alternadas em uma tabela repetitiva 


g = SR 
Sobre regiões repetitivas do modelo cansa 


Uma região repetitiva é uma seção do modelo que pode ser duplicada inúmeras vezes em uma página baseada em modelo. Normalmente, as 
regiões repetitivas são usadas com tabelas mas é possível definir uma região repetitiva para outros elementos da página. 


As regiões repetitivas permitem que você controle o layout da página por meio da repetição de certos itens, como um item de catálogo e um 
layout de descrição, ou uma linha de dados como uma lista de itens. 


Você pode usar dois objetos de modelo de região repetitiva: região repetitiva e tabela repetitiva. 


. Ei Ea Para o início 
Criar uma região repetitiva em um modelo 


As regiões repetitivas permitem que os usuários do modelo dupliquem uma região específica de um modelo o quanto desejarem. Uma região 
repetitiva não é necessariamente uma região editável. 


Para criar conteúdo em uma região repetitiva editável (por exemplo, permitir que um usuário insira texto em uma célula da tabela do documento 
baseado em modelo), é preciso inserir uma região editável na região repetitiva. 


1. Na janela Documento, siga um destes procedimentos: 
e Selecione o texto ou o conteúdo que você deseja definir como uma região repetitiva. 
e Posicione o ponto de inserção no documento onde você deseja inserir a região repetitiva. 
2. Siga um destes procedimentos: 
* Selecione Inserir > Objetos de modelo > Região repetitiva. 
e Clique com o botão direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Nova região repetitiva. 
e Na categoria Comum do painel Inserir, clique no botão Modelos e selecione Região repetitiva no menu pop-up. 


3. Na caixa Nome, insira um nome exclusivo para a região do modelo. (Não é possível usar o mesmo nome para mais de uma região 
repetitiva em um modelo.) 
Nota: Ao nomear uma região, não use caracteres especiais. 


4. Clique em OK. 


E E P iníci 
Inserir uma tabela repetitiva cid 


Você pode usar uma tabela repetitiva para criar uma região editável (em formato de tabela) com linhas repetitivas. Você pode definir atributos de 
tabela e determinar quais células são editáveis. 


1. Na janela Documento, posicione o ponto de inserção onde a tabela repetitiva deve ser incluída no documento. 


2. Siga um destes procedimentos: 
* Selecione Inserir > Objetos de modelo > Tabela repetitiva. 
e Na categoria Comum do painel Inserir, clique no botão Modelos e selecione Tabela repetitiva, no menu pop-up. 


3. Especifique as opções a seguir e clique em OK. 
Linhas Determina o número de linhas da tabela. 


Colunas determina o número de colunas da tabela. 
Preenchimento da célula determina o número de pixels entre o conteúdo e os limites da célula. 


Espaçamento da célula Determina o número de pixels entre as células de tabela adjacentes. 
Se você não atribuir valores explicitamente para o preenchimento e o espaçamento da célula, a maioria dos navegadores exibirá a 
tabela como se o preenchimento da célula estivesse definido como 1 e o espaçamento como 2. Para garantir que os navegadores 
exibirão a tabela sem preenchimento ou espaçamento, defina Preenchimento da célula e Espaçamento da célula como 0. 
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Largura Especifica a largura da tabela em pixels ou como porcentagem da largura da janela do navegador. 


Borda Especifica a largura, em pixels, das bordas da tabela. 
Se você não atribuir explicitamente um valor de borda, a maioria dos navegadores exibirá a tabela como se a borda estivesse definida 
como 1. Para que os navegadores exibam a tabela sem bordas, defina Borda como O. Para visualizar os limites da célula e da tabela 
quando a borda estiver definida como O, selecione Exibir > Auxílios visuais > Bordas da tabela. 


Repetir linhas da tabela Especifica as linhas da tabela que serão incluídas na região repetitiva. 
Linha inicial Define o número especificado como a primeira linha a ser incluída na região repetitiva. 
Linha final Define o número especificado como a última linha a ser incluída na região repetitiva. 


Nome da região Permite definir um nome exclusivo para a região repetitiva. 


| E P iníci 
Definir cores de fundo alternadas em uma tabela repetitiva DNA 


Após inserir uma tabela repetitiva em um modelo, você pode personalizá-la alternando a cor de fundo das linhas da tabela. 


1. Najanela Documento, selecione uma linha na tabela repetitiva. 


2. Clique no botão Mostrar visualização de código ou Mostrar visualização de design na barra de ferramentas Documento para acessar o 
código da linha de tabela selecionada. 


3. Na visualização de código, edite a tag <tr> para incluir o seguinte código: 


<tr bgcolor="Q0( index & 1? '&FFFFFF! : '4CCCCCC' JO0O"> 


Você pode substituir os valores hexadecimais 4FFFFFF e 4CCCCCC por outras opções de cor. 
4. Salve o modelo. 
Este é um exemplo de código de uma tabela que inclui cores de linha de fundo alternadas: 


<table width="75%" border="1" cellspacing="0" cellpadding="0"> 
<tr><th>Name</th><th>Phone Number</th><th>Email Address</th></tr> 


<!-- TemplateBeginRepeat name="contacts" --> 

<tr bgcolor="Q0( index & 1? 'HFFFFFF! : "'4CCCCCC')0O"> 

<td> <!-- TemplateBeginEditable name="name" --> name <!-- TemplateEndEditable --> 
</td> 


<td> <!-- TemplateBeginEditable name="phone" --> phone <!-- TemplateEndEditable --> 
</td> 


<td> <!-- TemplateBeginEditable name="email" --> email <!-- TemplateEndEditable --> 
</td> 
</tr> 
<!-- TemplateEndRepeat --> 
</table> 


Mais tópicos da Ajuda 
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Criação de regiões editáveis em modelos 


Inserir uma região editável 

Selecionar regiões editáveis 

Remover uma região editável 

Alterar o nome de uma região editável 


p Em RÉ Para o início 
Inserir uma região editável 


As regiões editáveis do modelo controlam quais áreas de uma página baseada em modelo o usuário pode editar. Antes de inserir uma região 


editável, salve o documento no qual você está trabalhando como um modelo. 


Nota: Se você inserir uma região editável em um documento, e não em um arquivo de modelo, receberá um alerta de que o documento será 
automaticamente salvo como um modelo. 

Você pode posicionar a região editável em qualquer local da página, mas considere os seguintes pontos caso esteja criando uma tabela ou um 
elemento de posicionamento absoluto (elemento PA) editável: 


e Você pode marcar uma tabela inteira ou uma célula específica da tabela como editável, mas não pode marcar várias células da tabela 
como uma única região editável. Se uma tag <td> estiver selecionada, a região editável incluirá a região ao redor da célula; caso contrário, a 
região editável afetará somente o conteúdo dentro da célula. 


* Os elementos PA e o conteúdo dos elementos PA são itens separados. Ao tornar um elemento PA editável, você altera a posição do 
elemento PA, bem como a de seu conteúdo. Entretanto, ao tornar o conteúdo de um elemento PA editável, você pode alterar somente o 
conteúdo do elemento PA, e não sua posição. 


1. Na janela Documento, proceda de uma das seguintes maneiras para selecionar a região: 
e Selecione o texto ou o conteúdo que você deseja definir como uma região editável. 
e Posicione o ponto de inserção onde você pretende inserir uma região editável. 
2. Proceda de uma das seguintes maneiras para inserir uma região editável: 
* Selecione Inserir > Objetos de modelo > Região editável. 
e Clique com o botão direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Nova região editável. 
e Na categoria Comum do painel Inserir, clique no botão Modelos e selecione Região editável, no menu pop-up. 


3. Na caixa de texto Nome, insira um nome exclusivo para a região. (Não é possível usar o mesmo nome para mais de uma região editável 
em determinado modelo.) 
Nota: Não use caracteres especiais na caixa Nome. 

4. Clique em OK. A região editável fica dentro de um retângulo realçado no modelo, cuja cor de realce é definida nas preferências. Uma aba 
no canto superior esquerdo indica o nome da região. Se você inserir uma região editável vazia no documento, o nome da região também 
aparecerá dentro da região. 


E Ei no a Para o início 
Selecionar regiões editáveis 


Você pode facilmente identificar e selecionar regiões no documento de modelo e nos documentos baseados em modelo. 


Selecionar uma região editável na janela Documento 
*& Clique na aba no canto superior esquerdo da região editável. 


Localizar uma região editável e selecioná-la no documento 

*& Selecione Modificar > Modelos e selecione o nome da região na lista na parte inferior desse submenu. 

Nota: As regiões editáveis que estão dentro de uma região repetitiva não aparecem no menu. Para localizar essas regiões, procure as bordas 
com aba na janela Documento. 

A região editável está selecionada no documento. 


Ei EE Para o início 
Remover uma região editável 


Se você marcou uma região do arquivo de modelo como editável e deseja bloqueá-la (torná-la não editável em documentos baseados em 
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modelo) novamente, use o comando Remover markup do modelo. 


1. Clique na aba no canto superior esquerdo da região editável para selecioná-la. 
2. Siga um destes procedimentos: 


e Selecione Modificar > Modelos > Remover markup do modelo. 
e Clique com o botão direito do mouse (Windows) ou Control-clique (Macintosh) e selecione Modelos > Remover markup do modelo. 


A região não poderá mais ser editada. 
a e É Es 
Alterar o nome de uma região editável ara o início 


Depois de inserir uma região editável, você não poderá mais alterar seu nome. 


1. Clique na aba no canto superior esquerdo da região editável para selecioná-la. 
2. No Inspetor de propriedades (Janela > Propriedades), insira um novo nome. 
3. Pressione Enter (Windows) ou Return (Macintosh). 


Mais tópicos da Ajuda 
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Criação de um modelo do Dreamweaver 


Sobre a criação de modelos do Dreamweaver 

Criar um modelo a partir de um documento existente 
Usar o painel Ativos para criar um novo modelo 
Sobre a criação de modelos para sites do Contribute 
Criar um modelo para um site do Contribute 


= És P, iníci 
Sobre a criação de modelos do Dreamweaver Ra 


Você pode criar um modelo a partir de um documento já existente (como um documento HTML, Adobe ColdFusion ou Microsoft Active Server 
Pages) ou pode criar um modelo a partir de um documento novo. 


Nota: O suporte para o ColdFusion e o ASP foi removido no Dreamweaver CC e posterior. 
Depois de criar um modelo, você pode inserir regiões e definir preferências para a cor de código e a cor de realce de região de modelo. 


Você pode armazenar informações adicionais sobre um modelo (como quem o criou, quando ele foi alterado pela última vez ou por que você 
optou por certos layouts) em um arquivo de Design Notes do modelo. Documentos baseados em modelo não herdam as Design Notes do 
modelo. 


Nota: Os modelos do Adobe Dreamweaver diferem dos modelos de alguns outros softwares da Adobe Creative Suite, pois as seções de página 
dos modelos do Dreamweaver são fixas (não podem ser editadas) por padrão. 


Para obter um tutorial sobre a criação de modelos, consulte www.adobe.com/go/vid0157 br. 


Para obter um tutorial sobre a utilização de modelos, consulte www.adobe.com/go/vid0158 br. 


E « - P, iníci 
Criar um modelo a partir de um documento existente e e 


Você pode criar um modelo a partir de um documento existente. 


1. Abra o documento que você deseja salvar como modelo. 
2. Siga um destes procedimentos: 


e Selecione Arquivo > Salvar como modelo. 
* Na categoria Comum do painel Inserir, clique no botão Modelos e selecione Criar modelo, no menu pop-up. 


Nota: A menos que você selecione Não mostrar esta caixa de diálogo novamente, receberá um aviso que informa que o documento 
que você está salvando não tem regiões editáveis. Clique em OK para salvar o documento como um modelo ou clique em Cancelar 
para sair desta caixa de diálogo sem criar um modelo. 


3. Selecione um site no qual o modelo será salvo no menu pop-up Site e insira um nome exclusivo para o modelo na caixa Salvar como. 


4. Clique em Salvar. O Dreamweaver salva o arquivo de modelo na pasta Modelos do site, na pasta raiz local do site, com uma extensão .dwt. 
Se a pasta Modelos ainda não existir no site, o Dreamweaver a criará automaticamente quando você salvar o novo modelo. 
Nota: Não retire os modelos da pasta Modelos, nem coloque arquivos que não são de modelo nessa pasta. Também não transfira a pasta 
Modelos para fora da pasta raiz local. Esse procedimento poderá causar erros nos caminhos dos modelos. 


E E , Para o início 
Usar o painel Ativos para criar um novo modelo 


1. No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel E3. 
2. Clique no botão Novo Modelo & na parte inferior do painel Ativos. 


Um modelo novo e sem título será adicionado à lista de modelos no painel Ativos. 
3. Com o modelo selecionado, insira um nome para esse modelo e pressione Enter (Windows) ou Return (Macintosh). 


O Dreamweaver cria um modelo em branco no painel Ativos e na pasta Modelos. 


- A E « P, iníci 
Sobre a criação de modelos para sites do Contribute qua 


Usando o Dreamweaver, você pode criar modelos para ajudar os usuários do AdobeQ ContributeQ a criar novas páginas, a garantir uma 
aparência consistente ao respectivo site e a permitir a atualização simultânea do layout de várias páginas. 
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Depois que você cria um modelo e faz o seu upload no servidor, ele fica disponível para todos os usuários do Contribute que se conectam ao seu 
site, a menos que você tenha definido restrições que limitem o uso do modelo a certas funções do Contribute. Se você definiu restrições para o 
uso do modelo, convém adicionar cada modelo novo à lista de modelos que o usuário do Contribute pode utilizar (consulte Administração do 
Contribute). 


Nota: Certifique-se de que a pasta raiz do site estabelecida na definição de sites de cada usuário do Contribute seja igual à pasta raiz do site 
estabelecida em sua definição de sites no Dreamweaver. Se a pasta raiz do site de um usuário não corresponder à sua, esse usuário não poderá 
utilizar modelos. 

Além dos modelos do Dreamweaver, você pode criar modelos que não são do Dreamweaver usando as ferramentas de administração do 
Contribute. Um modelo que não seja do Dreamweaver é uma página já existente que os usuários do Contribute podem utilizar para criar novas 
páginas; ele assemelha-se a um modelo do Dreamweaver, exceto pelo fato de que as páginas que nele se baseiam não são atualizadas quando 
você o altera. Além disso, os modelos que não são do Dreamweaver não podem conter elementos de modelo do Dreamweaver, como regiões 
editáveis, bloqueadas, repetitivas e opcionais. 


Quando um usuário do Contribute cria um novo documento em um site que contém modelos do Dreamweaver, o Contribute lista os modelos 
disponíveis (modelos do Dreamweaver e modelos que não são do Dreamweaver) na caixa de diálogo Nova página. 


Novo documento 


Modelos para o se “rry Tesmplate” 
myTemçiste 
myTempltez 


[7] atualizar a página quando o modelo for akerado 


Para incluir páginas que usam codificações diferentes de Latin-1 em seu site, pode ser necessário criar modelos (sejam modelos Dreamweaver 
ou nãoDreamweaver). Os usuários do Contribute podem editar páginas que usam qualquer codificação, mas quando criarem uma nova página 
em branco, o programa utilizará a codificação Latin-1. Para criar uma página que utiliza outra codificação, o usuário do Contribute pode criar uma 
cópia de uma página existente que utilize outra codificação ou usar um modelo que utilize outra codificação. Contudo, se não houver páginas ou 
modelos no site que utilizem outras codificações, primeiro crie uma página ou um modelo no Dreamweaver que utilize essa outra codificação. 


. « a P PR, 
Criar um modelo para um site do Contribute PRRSPREEE O 


1. Selecione Site > Gerenciar sites. 
2. Selecione um site e clique em Editar. 
3. Na caixa de diálogo Configuração de site, selecione a categoria Contribute. 
4. Caso ainda não o tenha feito, você precisará ativar a compatibilidade do Contribute. 
Selecione Ativar compatibilidade do Contribute e insira um URL raiz do site. 
5. Clique em Administrar site do Contribute. 
6. Se solicitado, insira a senha de administrador e clique em OK. 
7. Na categoria Usuários e funções, selecione uma função e clique no botão Editar configurações de função. 
8. Selecione a categoria Novas páginas e adicione as páginas existentes à lista em Criar uma página nova copiando uma página desta lista. 


Para obter mais informações, consulte Administração do Contribute. 
9. Clique duas vezes em OK para fechar as caixas de diálogo. 


Mais tópicos da Ajuda 
Criação de tutorial sobre modelos 


Uso de tutorial sobre modelos 


Criação de um modelo em branco 
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Aplicação ou remoção de um modelo em um documento 


Aplicar um modelo a um documento 
Desanexar um documento de um modelo 


, Para o início 
Aplicar um modelo a um documento 


Quando você aplica um modelo a um documento que já tem conteúdo, o Dreamweaver tenta estabelecer uma correspondência entre o conteúdo 
existente e uma região no modelo. Se você estiver aplicando uma versão revisada de um seus modelos, os nomes provavelmente serão 
correspondentes. 


Se você aplicar um modelo a um documento que não utilizou um modelo, não haverá regiões editáveis para comparação e não haverá 
correspondência. O Dreamweaver rastreia essas falhas de correspondência para que você possa selecionar para qual região ou regiões o 
conteúdo da página atual será transferido ou que você possa excluir o conteúdo não correspondente. 


É possível aplicar um modelo a um documento usando o painel Ativos na janela Documento. Você pode desfazer a aplicação de um modelo se 
necessário. 


Importante: Quando você aplica um modelo a um documento existente, o modelo substitui o conteúdo do documento pelo conteúdo do modelo. 


Sempre faça backup do conteúdo de uma página antes de aplicar um modelo a ela. 


Aplicar um modelo a um documento usando o painel Ativos 
1. Abra o documento ao qual você deseja aplicar o modelo. 
2. No painel Ativos (Janela > Ativos), selecione a categoria Modelos no lado esquerdo do painel Ed. 


3. Siga um destes procedimentos: 
e Arraste o modelo a ser aplicado do painel Ativos para a janela Documento. 
e Selecione o modelo a ser aplicado e clique no botão Aplicar na parte inferior do painel Ativos. 


Se houver conteúdo no documento que não possa ser atribuído automaticamente a uma região de modelo, a caixa de diálogo Nomes 
de região inconsistentes será exibida. 


4. Selecione um destino para o conteúdo usando o menu Mover conteúdo para nova região para selecionar um destes: 
e Selecione uma região no novo modelo para a qual o conteúdo existente será movido. 
e Selecione Em lugar nenhum para remover o conteúdo do documento. 


5. Para mover todo conteúdo não resolvido para a região selecionada, clique em Usar para todos. 


6. Clique em OK para aplicar o modelo ou clique em Cancelar para cancelar a aplicação do modelo ao documento. 
Importante: Quando você aplica um modelo a um documento existente, o modelo substitui o conteúdo do documento pelo conteúdo do 
modelo. Sempre faça backup do conteúdo de uma página antes de aplicar um modelo a ela. 


Aplicar um modelo a um documento na janela Documento 
1. Abra o documento ao qual você deseja aplicar o modelo. 
2. Selecione Modificar > Modelos > Aplicar modelo à página. 


A caixa de diálogo Selecionar modelo é exibida. 
3. Escolha um modelo na lista e clique em Selecionar. 


Se houver conteúdo no documento que não possa ser atribuído automaticamente a uma região de modelo, a caixa de diálogo Nomes de 
região inconsistentes será exibida. 


4. Selecione um destino para o conteúdo usando o menu Mover conteúdo para nova região para selecionar um destes: 
* Selecione uma região no novo modelo para a qual o conteúdo existente será movido. 
* Selecione Em lugar nenhum para remover o conteúdo do documento. 


5. Para mover todo conteúdo não resolvido para a região selecionada, clique em Usar para todos. 


6. Clique em OK para aplicar o modelo ou clique em Cancelar para cancelar a aplicação do modelo ao documento. 
Importante: Quando você aplica um modelo a um documento existente, o modelo substitui o conteúdo do documento pelo conteúdo do 
modelo. Sempre faça backup do conteúdo de uma página antes de aplicar um modelo a ela. 
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Desfazer alterações do modelo 
* Selecione Editar > Desfazer Aplicar modelo. 
O documento retorna ao estado anterior à aplicação do modelo. 


Para o início 
Desanexar um documento de um modelo Ea 


Para efetuar alterações nas regiões bloqueadas de um documento baseado em modelo, desanexe o documento do modelo. Depois de 
desanexado, o documento inteiro ficará editável. 


Nota: Não é possível converter um arquivo de modelo (.dwt) em um arquivo normal salvando novamente o arquivo de modelo como um arquivo 
HTML (.html). Fazer isso não exclui o código de modelo que aparece em todo o documento. Se você deseja converter um arquivo de modelo em 
um arquivo normal, você pode salvar o documento como um arquivo HTML normal, mas precisa excluir manualmente todo o código de modelo na 
Visualização de código. 

1. Abra o documento baseado em modelo a ser desanexado. 

2. Selecione Modificar > Modelos > Desanexar do modelo. 


O documento é desanexado do modelo e todo o código do modelo é removido. 


ERES 
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Sobre os modelos do Dreamweaver 


Noções básicas sobre modelos do Dreamweaver 

Tipos de regiões de modelo 

Links em modelos 

Scripts de servidor em modelos e documentos baseados em modelo 
Parâmetros de modelo 

Expressões de modelo 

Linguagem da expressão de modelo 

Condição If múltiplo em código de modelo 


” za Para o início 
Noções básicas sobre modelos do Dreamweaver 
Um modelo é um tipo especial de documento usado para criar um layout de página "fixo". Os documentos criados com base no modelo herdam o 
seu layout de página. Ao criar um modelo, você especifica o conteúdo que os usuários podem editar em um documento criado com esse modelo. 
Os modelos permitem que seus autores controlem os elementos de página que os usuários do modelo (redatores, artistas gráficos ou 
desenvolvedores da Web) podem editar. Há diversos tipos de regiões que o autor do modelo pode incluir em um documento. 


Nota: Os modelos permitem que você controle uma grande área de design e reutilize layouts completos. Se você quiser reutilizar elementos de 
design específicos, como um logotipo ou informações de copyright de um site, crie itens de biblioteca. 

Com o uso de modelos, você pode atualizar várias páginas de uma vez. Um documento criado com um modelo permanece conectado a esse 
modelo até ser desanexado. É possível modificar um modelo e imediatamente atualizar o design em todos os documentos nele baseados. 


Nota: Os modelos do Dreamweaver diferem dos modelos de alguns outros softwares da Adobe Creative Suite, pois as seções de página dos 
modelos do Dreamweaver são fixas (não podem ser editadas) por padrão. 


: ano Para o início 
Tipos de regiões de modelo 
Quando você salva um documento como modelo, grande parte das regiões do documento são bloqueadas. Como autor do modelo, você 
especifica quais regiões do documento baseado em modelo serão editáveis. Para isso, você insere regiões editáveis ou parâmetros editáveis no 
modelo. 


Ao criar o modelo, você pode alterar as regiões editáveis e as regiões bloqueadas. Contudo, em um documento baseado no modelo, o usuário do 
modelo só pode efetuar alterações nas regiões editáveis; as regiões bloqueadas não podem ser modificadas. 


Existem quatro tipos de regiões de modelo: 


Uma região editável Uma região desbloqueada em um documento baseado em modelo: uma seção que o usuário do modelo pode editar. O 
autor do modelo pode especificar qualquer área do modelo como editável. Para ser eficaz, o modelo deve conter pelo menos uma região editável; 
caso contrário, as páginas baseadas no modelo não poderão ser editadas. 

Uma região repetitiva Uma seção do layout do documento definida para que o usuário do modelo possa adicionar ou excluir cópias da região 
repetitiva de um documento baseado no modelo quando necessário. Por exemplo, você pode definir que uma linha da tabela se repita. As seções 
repetitivas são editáveis; portanto, o usuário do modelo pode editar o conteúdo no elemento repetitivo, enquanto o próprio design fica sob o 
controle do autor do modelo. 

Há dois tipos de regiões repetitivas que você pode inserir em um modelo: região repetitiva e tabela repetitiva. 


Uma região opcional Uma seção de um modelo cujo conteúdo (como texto ou imagem) que pode aparecer ou não em um documento. Na 
página baseada em modelo, o usuário do modelo geralmente controla se o conteúdo é exibido. 

Um atributo de tag editável Permite que você desbloqueie um atributo de tag em um modelo, de forma que o atributo possa ser editado em 
uma página baseada em modelo. Por exemplo, você pode "bloquear" a imagem que aparecerá no documento, mas permitir que o usuário do 
modelo defina o alinhamento à esquerda, à direita ou ao centro. 


- Para o início 
Links em modelos 
Quando você cria um arquivo de modelo salvando uma página existente como modelo, o novo modelo na pasta Modelos e os links no arquivo 
são atualizados para que os caminhos relativos ao documento estejam corretos. Posteriormente, quando você criar um documento baseado 
nesse modelo e o salvar, todos os links relativos ao documento serão atualizados novamente para continuar a apontar para os arquivos corretos. 


Ao adicionar um novo link de documento ao arquivo de modelo, você pode facilmente errar o nome do caminho se o digitar na caixa de texto do 
link no Inspetor de propriedades. O caminho correto em um arquivo de modelo é o caminho da pasta Modelos para o documento vinculado, e não 
o caminho da pasta do documento baseado em modelo para o documento vinculado. Verifique se os caminhos para os links estão corretos 
usando o ícone de pasta ou o ícone Indicar arquivo no Inspetor de propriedades ao criar links em modelos. 
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Preferência de atualização de link do Dreamweaver 8.01 

Antes do Dreamweaver 8 (ou seja, o Dreamweaver MX 2004 e anterior), o Dreamweavernão atualizava links para arquivos da pasta Modelos. 
(Por exemplo, se você tiver um arquivo denominado main.css na pasta Modelos e criar um link href="main.css" no arquivo de modelo, o 
Dreamweaver não atualizará esse link ao criar uma página baseada em modelo.) 


Alguns usuários tiravam proveito da maneira como o Dreamweaver tratava os links para arquivos na pasta Modelos e usavam essa inconsistência 
para criar links que eles não queriam atualizar ao criar páginas baseadas em modelo. Por exemplo, se você usa o Dreamweaver MX 2004 e tem 
um site com diferentes pastas para diferentes aplicativos: Dreamweaver, Flash e Photoshop. Cada pasta de produto contém uma página 
index.html baseada em modelo e uma versão exclusiva do arquivo main.css no mesmo nível. Se o arquivo de modelo contiver o link referente ao 
documento href="main.css" (um link para uma versão do arquivo main.css na pasta Modelos) e você quiser que as páginas index.html baseadas 
em modelo também contenham esse link, crie as páginas index.html baseadas em modelo sem se preocupar que o Dreamweaver atualize esses 
links específicos. Quando o Dreamweaver MX 2004 cria as páginas index.html baseadas em modelo, os links href="main.css" (não atualizados) 
referem-se aos arquivos main.css existentes nas pastas do Dreamweaver, Flash e Photoshop, e não ao arquivo main.css contido na pasta 
Modelos. 


Entretanto, no Dreamweaver 8, esse comportamento foi alterado para que todos os links relativos a documentos sejam atualizados quando 
páginas baseadas em modelo forem criadas, independentemente do local aparente dos arquivos vinculados. Nessa situação, o Dreamweaver 
examina o link no arquivo de modelo (href="main.css” e cria um link na página baseada em modelo que é relacionado ao local do novo 
documento. Por exemplo, se você estiver criando um documento baseado em modelo um nível acima da pasta Modelos, o Dreamweaver gravará 
o link no novo documento como href="Templates/main.css". Essa atualização no Dreamweaver 8 quebrou os links em páginas criadas pelos 
designers que tiraram proveito da prática anterior do Dreamweaver de não atualizar links para arquivos na pasta Modelos. 


O Dreamweaver 8.01 incluiu uma preferência que permite ativar e desativar o comportamento dos links relativos a atualizações. (Essa preferência 
especial aplica-se somente aos links para arquivos na pasta Modelos, e não a links em geral.) O comportamento padrão é não atualizar esses 
links (como no Dreamweaver MX 2004 e anterior), mas se você quiser que o Dreamweaver atualize esses tipos de links ao criar páginas 
baseadas em modelo, basta desmarcar a preferência. (Você só faria isso se, por exemplo, tivesse uma página CSS (folhas de estilos em 
cascata), main.css, na pasta Modelos, e precisasse do link href="Templates/main.css" no documento baseado em modelo. Contudo, essa não é 
uma prática recomendável, porque somente os arquivos de modelo (DWT) do Dreamweaver devem estar na pasta Modelos.) 


Para que o Dreamweaver atualize os caminhos relacionados a documentos para arquivos que não são de modelo da pasta Modelos, selecione a 
categoria Modelos na caixa de diálogo Configuração de site (que está abaixo de Configurações avançadas) e desmarque a opção Não regravar 
caminhos relativos a documentos. 


Para obter mais informações, consulte o Dreamweaver TechNote no site da Adobe em www.adobe.com/go/f55d8739 br. 


Scripts de servidor em modelos e documentos baseados em modelo dog 
Alguns scripts de servidor são inseridos no início ou no fim do documento (antes da tag <html> ou após a tag </html>). Esses scripts exigem 
tratamento especial em modelos e documentos baseados em modelo. Normalmente, se você altera o código do script antes da tag <html> ou 
após a tag </html> em um modelo, as alterações não são copiadas para os documentos que se baseiam nesse modelo. Isso pode gerar erros se 
outros scripts de servidor, dentro do corpo principal do modelo, dependerem dos scripts que não forem copiados. Um alerta avisa se você alterar 
scripts antes da tag <html> ou após a tag </html> em um modelo. 


Para evitar esse problema, você pode inserir o seguinte código na seção head do modelo: 


<!-- TemplateInfo codeOutsideHTMLIsLocked="true" --> 


Quando esse código está em um modelo, as alterações em scripts antes da tag <html> ou após a tag </html> são copiadas para documentos 
baseados nesse modelo. Contudo, você não poderá mais editar esses scripts em documentos baseados no modelo. Dessa forma, você pode 
optar por editar esses scripts no modelo ou em documentos baseados no modelo, mas não em ambos. 


ã = = 
Parâmetros de modelo ara o início 


Os parâmetros de modelo indicam valores para controlar o conteúdo em documentos baseados em modelo. Use parâmetros de modelo para 
regiões opcionais ou atributos de tags editáveis ou para definir os valores que você deseja passar para um documento anexado. Para cada 
parâmetro, você seleciona um nome, um tipo de dados e um valor padrão. Cada parâmetro deve ter um nome exclusivo que diferencie 
maiúsculas e minúsculas. Eles devem ser de um dos cinco tipos de dados permitidos: texto, booliano, cor, URL ou número. 


Os parâmetros de modelo são passados para o documento como parâmetros de ocorrência. Na maioria dos casos, o usuário de um modelo pode 
editar o valor padrão do parâmetro para personalizar o que é exibido no documento baseado em modelo. Em outros casos, o autor do modelo 
pode determinar o que aparece no documento, de acordo com o valor de uma expressão do modelo. 


=» eo 
Expressões de modelo ara o início 


As expressões de modelo são instruções que computam ou avaliam um valor. 


Você pode usar uma expressão para armazenar um valor e exibi-lo em um documento. Por exemplo, uma expressão pode ser simples como o 
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valor de um parâmetro, como DO(Param)d, ou complexa o suficiente para computar valores que alternam a cor de fundo em uma linha de 
tabela, como DO(( index & 1) ? red: blus)DO. 


Você também pode definir expressões para condições if e if múltiplo. Quando uma expressão é usada em uma instrução condicional, o 
Dreamweaver a avalia como verdadeira ou falsa. Se a condição é verdadeira, a região opcional aparece no documento baseado em modelo; se é 
falsa, ela não aparece. 


Você pode definir expressões na visualização de código ou na caixa de diálogo Região opcional ao inserir uma região opcional. 


Na visualização de código, há duas formas de definir expressões de modelo: use o comentário <!-- TemplateExpr expr="sua expressão"--> 
comment ou DO (sua expressão) (O (OD. Quando você insere a expressão no código de modelo, um marcador de expressão é exibido na 
Visualização de design. Quando você aplica o modelo, o Dreamweaver avalia a expressão e exibe o valor no documento baseado em modelo. 


E sa Para o início 
Linguagem da expressão de modelo 


A linguagem da expressão de modelo é um pequeno subconjunto de JavaScript e usa regras precedentes e sintaxe JavaScript. Use os 


operadores JavaScript para desenvolver uma expressão como esta: 


0O(firstName+lastName) 00 


Estes recursos e operadores podem ser usados: 
* literais numéricos, sequências de caracteres literais (somente sintaxe entre aspas duplas), boolianos literais (verdadeiro ou falso) 
e referência de variável (veja a lista de variáveis definidas nesta seção) 
e referência de campo (operador "dot”) 
* operadores unários: +, -, -,! 
e operadores binários: +, -,*,/,%, &, |”, &&, ||, <, <=, >, >=, ==, I=, <<, >> 


* operador condicional: ?: 


parênteses: () 


Estes são os tipos de dados usados: booliano, ponto flutuante IEEE 64 bpc, sequência de caracteres e objeto. Os modelos do Dreamweaver 
não utilizam os tipos JavaScript “nulo” ou “não definido”. Eles também não permitem que tipos escalares sejam convertidos implicitamente 
em um objeto; portanto, a expressão "abc".length acionaria um erro, em vez de gerar o valor 3. 


Os únicos objetos disponíveis são os definidos pelo modelo de objeto de expressão. As seguintes variáveis são definidas: 

- documento Contém os dados do modelo em nível de documento com um campo para cada parâmetro no modelo. 

“repeat Definido apenas para expressões que aparecem em uma região repetitiva. Fornece informações internas sobre a região 
“índice O índice numérico (a partir de 0) da entrada atual 

“numRows O número total de entradas nesta região repetitiva 

“isFirst Verdadeiro se a entrada atual for a primeira entrada na região repetitiva 

“isLast Verdadeiro se a entrada atual for a última entrada na região repetitiva 

* prevRecord O objeto repeat da entrada anterior. É um erro acessar esta propriedade para a primeira entrada na região. 
“nextRecord O objeto repeat da próxima entrada. É um erro acessar esta propriedade para a última entrada na região. 


* parent Em uma região repetitiva aninhada, ele informa o objeto repeat para a região repetitiva externa. É um erro acessar esta 
propriedade fora de uma região repetitiva aninhada. 


Durante a avaliação da expressão, todos os campos dos objetos document e repeat estão implicitamente disponíveis. Por exemplo, você 
pode inserir title em vez de . document.title para acessar o parâmetro de título do documento. 


Em casos nos quais há conflito de campo, os campos do objeto repeat têm prioridade em relação aos campos do objeto document. 
Portanto, não há necessidade de mencionar explicitamente document ou repeat, a não ser que document seja necessário em uma 
região repetitiva para fazer referência aos parâmetros de documento que são ocultos por parâmetros de região repetitiva. 


Quando regiões repetitivas aninhadas são usadas, somente os campos das regiões repetitivas mais internas estão implicitamente 
disponíveis. As regiões externas devem ser referenciadas explicitamente com parent. 


Condição If múltiplo em código de modelo findi 


Você pode definir expressões de modelo para condições if e if múltiplo. Este exemplo demonstra como definir um parâmetro denominado “Dept”, 
como configurar um valor inicial e como definir uma condição if múltiplo que determina a exibição de determinado logotipo. 


Este é um exemplo do código a ser inserido na seção head do modelo: 
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<!-- TemplateParam name="Dept" type="number" value="1" --> 


A instrução de condição a seguir verifica o valor atribuído ao parâmetro Dept. Quando a condição é verdadeira ou correspondente, a imagem 
apropriada é exibida. 


<!-- TemplateBeginMultipleIf --> 


<!-- checks value of Dept and shows appropriate image--> 

<!-- TemplateBeginIfClause cond="Dept == 1" --> <img src=".../sales.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept == 2" --> <img src=".../support.gif"> <!-- TemplateEndIfClause--> 
<!-- TemplateBeginIfClause cond="Dept == 3" --> <img src=".../hr.gif"> <!-- TemplateEndIfClause --> 
<!-- TemplateBeginIfClause cond="Dept != 3" --> <img src=".../spacer.gif"> <!-- TemplateEndIfClause --> 


<!-- TemplateEndMultipleIf --> 


Quando você cria um documento baseado em modelo, os parâmetros de modelo são passados para o documento automaticamente. O usuário do 
modelo determina qual imagem será exibida. 


Mais tópicos da Ajuda 


Avisos legais | Política de privacidade on-line 
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Sobre XML e XSLT 


Uso de XML e XSL com páginas da Web 
Transformações XSL do servidor 
Transformações XSL do cliente 

Dados XML e elementos repetitivos 
Visualização de dados XML 


Za Para o início 
Uso de XML e XSL com páginas da Web E 
A linguagem de markup extensível (XML) é uma linguagem que permite estruturar informações. Como o HTML, o XML permite estruturar 
informações com tags, mas as tags XML não são predefinidas como as tags HTML. Em vez disso, o XML permite criar tags que definem melhor 
sua estrutura de dados (esquema). As tags são aninhadas em outras para criar um esquema de tags pai e filho. Como a maioria das tags HTML, 
todas as tags de um esquema XML têm uma tag de abertura e uma de fechamento. 


O exemplo a seguir mostra a estrutura básica de um arquivo XML: 


<?xml version="1.0"> 
<mybooks> 
<book bookid="1"> 
<pubdate>03/01/2004</pubdate> 
<title>Displaying XML Data with Adobe Dreamweaver</title> 
<author>Charles Brown</author> 
</book> 
<book bookid="2"> 
<pubdate>04/08/2004</pubdate> 
<title>Understanding XML</title> 
<author>John Thompson</author> 
</book> 
</mybooks> 


Nesse exemplo, cada tag <book> pai contém três tags filho: <pubdate>, <title> e <author>. No entanto, cada tag <book> também é uma tag filho 
da tag <mybooks>, que é a tag no maior nível do esquema. Você pode nomear e estruturar as tags XML de qualquer maneira, contanto que as 
tags sejam aninhadas corretamente em outras e que cada tag de abertura seja atribuída a uma tag de fechamento correspondente. 


Os documentos XML não contêm nenhuma formatação: são apenas recipientes de informações estruturadas. Depois de criar um esquema XML, 
você pode usar a linguagem de folha de estilos extensível (XSL) para exibir as informações. Assim como as folhas de estilos em cascata (CSS) 
permitem formatar o HTML, o XSL permite formatar dados XML. Você pode definir estilos, elementos de página, layout e outros itens em um 
arquivo XSL e anexá-lo a um arquivo XML para que, quando um usuário visualize os dados XML em um navegador, os dados sejam formatados 
de acordo com o que foi definido no arquivo XSL. O conteúdo (os dados XML) e a apresentação (definida pelo arquivo XSL) são totalmente 
separados, fornecendo a você maior controle sobre a exibição das informações em uma página da Web. Em síntese, XSL é uma tecnologia de 
apresentação do XML, onde a saída principal é uma página HTML. 


As transformações de linguagem de folha de estilos extensível (XSLT) é uma linguagem de subconjunto de XSL que, na realidade, permite exibir 
dados XML em uma página da Web e "transformá-los”, junto com estilos XSL, em informações legíveis e com estilo em forma de HTML. Você 
pode usar o Dreamweaver para criar páginas XSLT que permitem executar transformações XSL usando um servidor de aplicativo em um 
navegador. Em uma transformação XSL do servidor, o servidor transforma o XML e o XSL e os exibe na página. Em uma transformação do 
cliente, um navegador (como o Internet Explorer) faz esse trabalho. 


A abordagem adotada (transformações do servidor ou do cliente) depende do que você está tentando atingir como resultado final, das tecnologias 
disponíveis no seu caso, do nível de acesso a arquivos de origem XML e de outros fatores. As duas abordagens têm suas vantagens e 
desvantagens. Por exemplo, as transformações do servidor funcionam em todos os navegadores, enquanto as transformações do cliente estão 
restritas somente a navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e Firefox 1.0.2). As transformações do servidor permitem 
exibir dados XML dinamicamente a partir do seu próprio servidor ou de qualquer outro lugar da Web, enquanto as transformações do cliente 
devem usar dados XML que estão hospedados localmente no seu próprio servidor da Web. Finalmente, as transformações do servidor exigem a 
implantação das páginas em um servidor de aplicativo configurado, enquanto as transformações do cliente precisam somente do acesso a um 
servidor da Web. 


Para assistir a um tutorial e saber mais sobre XML, consulte vaww.adobe.com/go/vid0165 br. 


a a P iníci 
Transformações XSL do servidor jifdiaiid 
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O Dreamweaver fornece métodos de criação de páginas XSLT que permitem executar transformações XSL do servidor. Quando um servidor de 
aplicativo executa a transformação XSL, o arquivo que contém os dados XML pode residir no seu próprio servidor ou em qualquer outro lugar da 
Web. Além disso, qualquer navegador pode exibir os dados transformados. No entanto, a implantação de páginas para transformações do 
servidor é um pouco complexa e requer o acesso a um servidor de aplicativo. 


Ao trabalhar com transformações XSL do servidor, você pode usar o Dreamweaver para criar páginas XSLT que geram documentos HTML 
completos (páginas XSLT inteiras) ou fragmentos XSLT que geram uma parte de um documento HTML. Uma página XSLT inteira é similar a uma 
página HTML normal. Ela contém uma tag <body> e uma tag <head> e permite exibir uma combinação de dados HTML e XML na página. Um 
fragmento XSLT é uma parte do código, usado por um documento separado, que exibe dados XML formatados. Diferente de uma página XSLT 
inteira, esse fragmento é um arquivo independente que não contém nenhuma tag <body> ou <head>. Se desejar exibir dados XML em uma 
página sua, crie uma página XSLT inteira e associe seus dados XML a essa página. Se, por outro lado, você desejar exibir dados XML em uma 
seção específica de uma página dinâmica existente (por exemplo, uma página inicial dinâmica para uma loja de artigos de esporte, com placares 
de um feed RSS exibidos em uma lateral da página), crie um fragmento XSLT e insira uma referência a ele na página dinâmica. A criação de 
fragmentos XSLT e seu uso em conjunto com outras páginas dinâmicas para exibir dados XML é o cenário mais comum. 


A primeira etapa da criação desses tipos de páginas é criar o fragmento XSLT. O fragmento é um arquivo separado que contém o layout, a 
formatação e outras informações dos dados XML que você eventualmente pode exibir na página dinâmica. Depois de criar o fragmento XSLT, 
insira uma referência a ele em sua página dinâmica (por exemplo, uma página PHP ou ColdFusion). A referência inserida ao fragmento funciona 
de modo semelhante a uma inclusão do servidor (SSI) — os dados XML formatados (o fragmento) residem em um arquivo separado, enquanto a 
Visualização de design exibe um alocador de espaço para o fragmento na página dinâmica propriamente dita. Quando um navegador solicita a 
página dinâmica que contém a referência ao fragmento, o servidor processa a instrução incluída e criam um novo documento no qual o conteúdo 
formatado do documento (e não o alocador de espaço) é exibido. 


SERVIDOR WEB 


<HTML> 


o EE] 


L] exsl:> | — 
</xsl:> 


Navegador da web 


Lo! isa —O- 


</HTML> 


1. Navegador solicita a página dinâmica. 2. Servidor Web localiza e passa a página para o servidor de aplicativo 3. Servidor de aplicativo 
rastreia a página em busca de instruções e obtém fragmento do XSLT. 4. Servidor de aplicativo executa transformação (lê o fragmento do XSLT, 
obtém e formata os dados xml). 5. Servidor de aplicativo insere o fragmento transformado na página e a passa de volta para o servidor 

Web. 6. Servidor Web envia a página concluída para o navegador. 


Use o comportamento Transformação XSL do servidor para inserir a referência a um fragmento XSLT em uma página dinâmica. Quando a 
referência é inserida, o Dreamweaver gera uma pasta inclusões/MM XSLTransform/ na pasta raiz do site que contém um arquivo de biblioteca de 
runtime. O servidor de aplicativo usa as funções definidas nesse arquivo ao transformar os dados XML especificados. O arquivo é responsável por 
procurar os dados XML e os fragmentos XSLT, executar a transformação XSL e exibir os resultados na página da Web. 


O arquivo que contém o fragmento XSLT, o arquivo XML que contém seus dados e o arquivo de biblioteca gerado em runtime devem estar no 
servidor da sua página para serem exibidos corretamente. (Se você selecionar um arquivo XML remoto como fonte de dados, de um feed RSs, 
por exemplo, esse arquivo obviamente deve residir em qualquer outro lugar da Internet.) 


Você também pode usar o Dreamweaver para criar páginas XSLT inteiras para serem usadas com transformações do servidor. Uma página 
XSLT inteira funciona exatamente como um fragmento XSLT; somente ao inserir a referência à página XSLT inteira usando o comportamento 
Transformação XSL do servidor você está inserindo o conteúdo completo de uma página HTML. Desse modo, todo o HTML da página dinâmica 
(a página .cfm, .php ou .asp que age como a página de recipiente) deve ser removido antes de inserir a referência. 


O Dreamweaver suporta transformações XSL para páginas ColdFusion, ASP e PHP. 


Nota: Seu servidor deve ser configurado corretamente para executar transformações do servidor. Para obter mais informações, entre em contato 
com o administrador do servidor. 


Para o início 


Transformações XSL do cliente 


Você pode executar transformações XSL no cliente sem usar um servidor de aplicativo. Você pode usar o Dreamweaver para criar uma página 
XSLT inteira que fará isso; no entanto, as transformações do cliente requerem a manipulação do arquivo XML que contém os dados que deseja 
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exibir. Além disso, as transformações do cliente funcionam somente em navegadores modernos (Internet Explorer 6, Netscape 8, Mozilla 1.8 e 
Firefox 1.0.2). Para obter mais informações sobre os navegadores que suportam ou não as transformações XSL, consulte 
www.w3schools.com/xsl/xsl browsers.asp br. 


Primeiro, crie uma página XSLT inteira e anexe uma fonte de dados XML. (O Dreamweaver solicita que a fonte de dados seja anexada quando a 
nova página é criada.) Você pode criar uma página XSLT totalmente nova ou converter uma página HTML existente em uma página XSLT. Ao 
converter uma página HTML existente em uma página XSLT, você deve anexar uma fonte de dados XML usando o painel Ligações (Janela > 
Ligações). 


Depois de criar a página XSLT, você deve vinculá-la ao arquivo XML que contém os dados XML inserindo uma referência à página XSLT no 
próprio arquivo XML (assim como você insere uma referência a uma folha de estilos CSS externa na seção <head> de uma página HTML). Os 
visitantes do seu site devem visualizar o arquivo XML (não a página XSLT) em um navegador. Quando os visitantes acessam a página, o 
navegador executa a transformação XSL e exibe os dados XML formatados pela página XSLT vinculada. 


A relação entre as páginas XML e XSLT vinculadas é conceitualmente similar, embora seja diferente do modelo CSS externo/página HTML. 
Quando houver uma página HTML que contém o conteúdo (como texto), use uma folha de estilos externa para formatar esse conteúdo. A página 
HTML determina o conteúdo e o código CSS externo, que o usuário nunca vê, determina a apresentação. Com XSLT e XML, a situação é 
inversa. O arquivo XML (que o usuário nunca vê na forma bruta) determina o conteúdo, enquanto a página XSLT determina a apresentação. A 
página XSLT contém as tabelas, o layout, os gráficos e outros itens que o HTML normalmente contém. Quando um usuário visualiza o arquivo 
XML em um navegador, a página XSLT formata o conteúdo. 


Navegador da Web SERVIDOR WEB 


<XML> 
<directive> 
<0— 
—0- 
XSLT 


1. Navegador solicita arquivo XML. 2. Servidor responde enviando arquivo XML ao navegador. 3. Navegador lê a diretiva XML e chama o 
arquivo XSLT. 4. Servidor envia arquivo XSLT ao navegador. 5. Navegador transforma e exibe os dados XML no navegador. 


Quando você usa o Dreamweaver para vincular uma página XSLT a uma página XML, o Dreamweaver insere o código apropriado na parte 
superior da página XML. Se você possuir a página XML que está sendo vinculada (isto é, se o arquivo XML residir exclusivamente no seu 
servidor da Web), basta usar o Dreamweaver para inserir o código apropriado que vincula as duas páginas. Quando você possui o arquivo XML, 
as transformações XSL executadas pelo cliente são totalmente dinâmicas. Desse modo, sempre que você atualiza os dados no arquivo XML, 
qualquer saída HTML que usa a página XSLT vinculada será atualizada automaticamente com as novas informações. 


Nota: Os arquivos XML e XSL usados para as transformações do cliente devem residir no mesmo diretório. Caso contrário, o navegador lerá o 
arquivo XML e encontrará a página XSLT da transformação, mas não encontrará os ativos (folhas de estilos, imagens, etc.) definidos pelos links 
relativos na página XSLT. 

Se você não possuir a página XML que está sendo vinculada (por exemplo, se desejar usar os dados XML de um feed RSS de algum outro lugar 
da Web), o fluxo de trabalho será um pouco mais complicado. Para executar transformações do cliente usando dados XML de uma fonte externa, 
primeiro faça download do arquivo de origem XML no mesmo diretório onde reside a página XSLT. Quando a página XML estiver no seu site 
local, você poderá usar o Dreamweaver para adicionar o código apropriado que vincula a página XML à página XSLT e postar as duas páginas (o 
arquivo XML baixado e a página XSLT vinculada) no seu servidor da Web. Quando o usuário visualiza a página XML em um navegador, a página 
XSLT formata o conteúdo, assim como no exemplo anterior. 


A desvantagem de executar transformações XSL do cliente nos dados XML provenientes de uma fonte externa é o fato de os dados XML serem 
apenas parcialmente “dinâmicos”. O arquivo XML baixado e alterado é simplesmente um “instantâneo” do arquivo que reside em algum outro 
lugar da Web. Se o arquivo XML original for alterado na Web, você deve fazer download do arquivo novamente, vinculá-lo à página XSLT e 
postar o arquivo XML novamente no seu servidor da Web. O navegador processa somente os dados recebidos do arquivo XML no servidor da 
Web, não os dados contidos no arquivo XML de origem. 


Dados XML e elementos repetitivos giiiiálida 


410 


O objeto XSLT de região repetitiva permite exibir elementos repetidos de um arquivo XML em uma página. Qualquer região que contém um 
alocador de espaço de dados XML pode ser transformada em uma região repetitiva. No entanto, as regiões mais comuns são tabelas, linhas de 
tabelas ou uma série de linhas de tabelas. 


O exemplo a seguir mostra como o objeto XSLT de região repetitiva é aplicado em uma linha da tabela que exibe informações sobre o cardápio 
de um restaurante. A linha inicial exibe três elementos diferentes do esquema XML: item, descrição e preço. Quando o objeto XSLT de região 
repetitiva é aplicado na linha da tabela e a página é processada por um servidor de aplicativo ou por um navegador, a tabela é repetida com 
dados exclusivos inseridos em cada nova linha da tabela. 


À Cafe Townsend 


Arquivo Edeys Exta Favortos Ferramentas Ajuda 


x) 3 O PRO cs" Sa 


C:Vocal sitesicafe townsendixmispeciais.xml 


café TOWNSEN 


Nouveau World Cuisine ú " 
y 


A 


sine Specials of the Day 


Chef Ipsum 
Summer Selod - organic butter lettuce with apples, blood 
Articles oranges, gorgonzola, and raspberry vinaigrette. 


Special Events Thei Noodte Solod - lightly sauteed in sesame oil with baby 
bok choi, portobello mushrooms, and scalhons. 
Location 


Reservations Grilted Pacific Selmon - served with new potatoes, diced 
beets, Italian partsey, and lemon zest. 


Contact Us 
New York Cheesecake - creamy traditional cheesecake 
topped with dark chocolate sauce and strawberries. 


* My Computer 


Quando um objeto XSLT de região repetitiva é aplicado em um elemento na janela Documento, um fino contorno cinza com abas é exibido ao 
redor da região repetida. Ao visualizar seu trabalho em um navegador (Arquivo > Visualizar no navegador), o contorno cinza desaparece e a 
seleção é expandida para exibir os elementos repetitivos especificados no arquivo XML, assim como na ilustração anterior. 


Ao adicionar o objeto XSLT de região repetitiva à página, o comprimento do alocador de espaço de dados XML é truncado na janela Documento. 
Isso acontece porque o Dreamweaver atualiza a expressão XPath (Linguagem de caminho XML) do alocador de espaço de dados XML de modo 
que haja relação com o caminho do elemento repetitivo. 


Por exemplo, o código a seguir é referente a uma tabela que contém dois alocadores de espaço dinâmicos, sem um objeto XSLT de região 
repetitiva aplicado: 


<table width="500" border="1"> 


<tr> 
<td><xsl:value-of select="rss/channel/item/title"/></td> 
</tr> 
<> 
<td><xsl:value-of select="rss/channel/item/description"/></td> 
</tr> 
</table> 


O código a seguir é referente à mesma tabela com o objeto XSLT de região repetitiva aplicado: 


<xsl:for -each select="rss/channel/item"> 
<table width="500" border="1"> 


<tr> 
<td><xsl:value-of select="title"/></td> 
</tr> 
<tr> 
<td><xsl:value-of select="description"/></td> 
Ati 
</table> 
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</xsl:for -each> 


No exemplo anterior, o Dreamweaver atualizou o XPath dos itens que estão na Região repetitiva (título e descrição) para relacioná-los com o 
XPath das tags <xsl:for-each> delimitadoras e não ao documento completo. 


O Dreamweaver gera expressões XPath relativas ao contexto em outros casos também. Por exemplo, se você arrastar um alocador de espaço de 
dados XML para uma tabela que já tem um objeto XSLT de região repetitiva aplicado, o Dreamweaver exibirá automaticamente o XPath relativo 
ao XPath existente nas tags <xsl:for-each> delimitadoras. 


a E = Para o início 
Visualização de dados XML 
Ao usar a opção Visualizar no navegador (Arquivo > Visualizar no navegador) para visualizar os dados XML inseridos em um fragmento XSLT ou 
em uma página XSLT inteira, o mecanismo que executa a transformação XSL varia de acordo com a situação. Para páginas dinâmicas que 
contêm fragmentos XSLT, o servidor de aplicativo sempre executa a transformação. Em outras situações, o Dreamweaver ou o navegador pode 
executar a transformação. 


A tabela a seguir resume as situações em que a opção Visualizar no navegador é usada e os mecanismos que executam as respectivas 
transformações: 


Tipo de página visualizada no navegador Transformação dos dados executada por 
Página dinâmica que contém um fragmento XSLT Servidor de aplicativo 

Fragmento XSLT ou página XSLT inteira Dreamweaver 

Arquivo XML vinculado a uma página XSLT inteira Navegador 


Os tópicos a seguir fornecem diretrizes para ajudar você a determinar os métodos de visualização adequados, de acordo com suas necessidades. 


Visualização de páginas para transformações do servidor 

No caso das transformações do servidor, o conteúdo que o visitante do site vê é transformado pelo servidor de aplicativo. Ao criar páginas XSLT 
e páginas dinâmicas para serem usadas com transformações do servidor, é recomendado visualizar sempre a página dinâmica que contém o 
fragmento XSLT em vez do próprio fragmento. No primeiro cenário, use o servidor de aplicativo, que garante a consistência da sua visualização 
com o que os visitantes do site verão ao acessarem sua página. No último cenário, o Dreamweaver executa a transformação e pode fornecer 
resultados ligeiramente inconsistentes. Você pode usar o Dreamweaver para visualizar o fragmento XSLT durante o processo de criação, mas 
verá os resultados mais precisos do processamentos dos dados se usar o servidor de aplicativo para visualizar a página dinâmica depois de 
inserir o fragmento XSLT. 


Visualização de páginas para transformações do cliente 

No caso das transformações do cliente, o conteúdo que o visitante do site vê é transformado por um navegador. Para tal, adicione um link do 
arquivo XML à página XSLT. Se você abrir o arquivo XML no Dreamweaver e visualizá-lo em um navegador, forçará o navegador a carregar o 
arquivo XML e executar a transformação. Desse modo, você tem a mesma experiência do visitante do site. 


No entanto, essa abordagem dificulta a depuração da página porque o navegador transforma o XML e gera o HTML internamente. Se selecionar 
a opção Exibir fonte do navegador para depurar o HTML gerado, você verá somente o XML original recebido pelo navegador, não o HTML 
completo (tags, estilos, etc.) responsável pelo processamento da página. Para ver o HTML completo ao visualizar o código-fonte, você deve 
visualizar a página XSLT em um navegador. 


Visualização de páginas XSLT inteiras e de fragmentos XSLT 

Ao criar páginas XSLT inteiras e fragmentos XSLT, visualize seu trabalho para verificar se os dados estão sendo exibidos corretamente. Se a 
opção Visualizar no navegador for usada para exibir uma página XSLT inteira ou um fragmento XSLT, o Dreamweaver executará a 
transformação usando um mecanismo interno. Esse método gera resultados rápidos e facilita a criação e a depuração incremental da página. Ele 
também permite visualizar o HTML completo (tags, estilos, etc.) por meio da seleção da opção Exibir fonte no navegador. 


Nota: Esse método de visualização normalmente é usado quando você começa a criar páginas XSLT, independentemente do uso do cliente ou 
do servidor para transformar os dados. 

Mais tópicos da Ajuda 

Tutorial de XML 


(63) ex-ne-sa ] 


Avisos legais | Política de privacidade on-line 
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Execução de transformações XSL no servidor 


Fluxo de trabalho de execução de transformações XSL do servidor 
Criar uma página XSLT 

Converter páginas HTML em páginas XSLT 

Anexar fontes de dados XML 

Exibir dados XML em páginas XSLT 

Exibir elementos XML repetitivos 

Inserir fragmentos XSLT em páginas dinâmicas 

Excluir fragmentos XSLT de páginas dinâmicas 

Editar comportamentos Transformação XSL do servidor 

Criar um link dinâmico 

Aplicação de estilos em fragmentos XSLT 

Usar parâmetros com transformações XSL 

Criar e editar regiões XSLT condicionais 

Inserir comentários XSL 

Usar o Construtor de expressões XPath para adicionar expressões para dados XML 


Para o início 


Fluxo de trabalho de execução de transformações XSL do servidor 


Você pode executar transformações XSL do servidor no servidor. Saiba mais sobre as transformações XSL do servidor e do cliente e sobre como 
usar XML e XSL com páginas da Web antes de criar páginas que exibem dados XML. 


Nota: Seu servidor deve ser configurado corretamente para executar transformações do servidor. Para obter mais informações, entre em contato 
com o administrador do servidor. 
O fluxo de trabalho geral para executar transformações XSL do servidor é descrito a seguir (cada etapa é descrita em outros tópicos): 


1. Configure um site do Dreamweaver. 
2. Escolha uma tecnologia de servidor e configure um servidor de aplicativo. 


3. Teste o servidor de aplicativo. 
Por exemplo, crie uma página que requer processamento e verifique se o servidor de aplicativo processa a página. 


4. Crie um fragmento ou uma página XSLT ou converta uma página HTML em uma página XSLT. 
e No site do Dreamweaver, crie um fragmento XSLT ou uma página XSLT inteira. 


e Converta uma página HTML existente em uma página XSLT inteira. 
5. Anexe uma fonte de dados XML à página. 
6. Exiba os dados XML ligando os dados ao fragmento XSLT ou à página XSLT inteira. 


7. Se for apropriado, adicione um objeto XSLT de região repetitiva à tabela ou linha de tabela que contenha os 
alocadores de espaço de dados XML. 


8. Insira referências. 
e Para inserir uma referência ao fragmento XSLT em sua página dinâmica, use o comportamento Transformação XSL do servidor. 
e Para inserir uma referência à página XSLT inteira na página dinâmica, exclua todo o código HTML da página dinâmica e, em seguida, use o 


comportamento Transformação XSL do servidor. 


9. Poste a página e o fragmento. 
Poste a página dinâmica e o fragmento XSLT (ou a página XSLT inteira) no seu servidor de aplicativo. Se estiver usando um arquivo XML local, 
também deverá postá-lo. 


10. Visualize a página dinâmica em um navegador. 
Ao fazer isso, o servidor de aplicativo transforma os dados XML, insere esses dados na página dinâmica e os exibe no navegador. 


Para o início 
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Criar uma página XSLT 


Você pode criar páginas XSLT que permitem exibir dados XML em páginas da Web. Você pode criar uma página XSLT inteira (uma página 
XSLT que contém uma tag <body> e uma tag <head>) ou um fragmento XSLT. Ao criar um fragmento XSLT, crie um arquivo independente sem 
nenhuma tag body ou head - um simples pedaço do código que posteriormente será inserido em uma página dinâmica. 


Nota: Se estiver começando a partir de uma página XSLT existente, você precisa anexar uma fonte de dados XML ao fragmento. 
1. Selecione Arquivo > Novo. 
2. Na categoria Página em branco da caixa de diálogo Novo documento, selecione uma das seguintes opções na coluna Tipo de página: 


e Selecione XSLT (página inteira) para criar uma página XSLT inteira. 
e Selecione XSLT (fragmento) para criar um fragmento XSLT. 
3. Clique em Criar e siga um destes procedimentos na caixa de diálogo Localizar origem XML: 
e Selecione Anexar arquivo local, clique no botão Procurar, navegue até um arquivo XML local no seu computador e clique em OK. 


e Selecione Anexar arquivo remoto, insira o URL de um arquivo XML na Internet (como o endereço de um feed RSS, por exemplo) e 
clique em OK. 


Nota: Clique no botão Cancelar para gerar uma nova página XSLT sem nenhum fonte de dados XML anexada. 
O painel Ligações é preenchido com o esquema da fonte de dados XML. 
LIGAÇÕES 


Tipo de documento: XSLT (página inteira) 


E co Esquema para file:/!/D|/DWw/Sample FilefC54 Samplefilus.srcjwajcafe to 
E-S4» specials 
=1-45 menu item 


id 

item 

link 
description 
price 


Jul 


A tabela a seguir fornece uma explicação dos diversos elementos do esquema que podem aparecer: 


Elemento Representa Detalhes 

<> Elemento XML obrigatório não Um elemento que aparece exatamente 
repetitivo uma vez no nó pai 

<>+ Elemento XML repetitivo Um elemento que aparece uma ou 


mais vezes no nó pai 


<>+ Elemento XML opcional Um elemento que aparece nenhuma 
ou mais vezes no nó pai 


Nó do elemento em negrito Elemento de contexto atual Normalmente, o elemento repetitivo 
quando o ponto de inserção está 
dentro de uma região repetitiva 


(6) Atributo XML 
4. Salve sua nova página (Arquivo > Salvar) com a extensão .xsl ou .xslt (.xsl é o padrão). 


Para o início 


Converter páginas HTML em páginas XSLT 


Você também pode converter páginas HTML existentes em páginas XSLT. Por exemplo, se houver uma página estática pré-projetada à qual 
deseja adicionar dados XML, você pode converter a página em uma página XSLT, em vez de criar uma página XSLT e reprojetá-la a partir do 
zero. 


1. Abra a página HTML que deseja converter. 
2. Selecione Arquivo > Converter > XSLT 1.0. 


Uma cópia da página é aberta na janela Documento. A nova página é uma folha de estilos XSL, salva com a extensão .xsl. 
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Para o início 


Anexar fontes de dados XML 


Se estiver começando a partir de uma página XSLT existente, ou se não anexar uma fonte de dados XML ao criar uma nova página XSLT com o 
Dreamweaver, anexe uma fonte de dados XML usando o painel Ligações. 


1. No painel Ligações (Janela > Ligações), clique no link XML. 


Tipo de documento: XSLT (página inteira) Origem... 


Para usar uma referência XML nesta página XSLT: 
1, Anexe um documento de origem E] 


Nota: Você também pode clicar no link Origem, no canto superior direito do painel Ligações, para adicionar uma fonte de dados XML. 
2. Siga um destes procedimentos: 


e Selecione Anexar arquivo local, clique no botão Procurar, navegue até um arquivo XML local no seu computador e clique em OK. 
* Selecione Anexar arquivo remoto e insira o URL de um arquivo XML na Internet (como o endereço de um RSS feed, por exemplo). 
3. Clique em OK para fechar a caixa de diálogo Localizar origem XML. 


O painel Ligações é preenchido com o esquema da fonte de dados XML. 


EEE Eua Para o início 
Exibir dados XML em páginas XSLT 
Depois de criar uma página XSLT e anexar uma fonte de dados XML, você pode associar dados à página. Para fazer isso, adicione um alocador 
de espaço de dados XML à página e use o Construtor de expressões XPath ou o Inspetor de propriedades para formatar os dados selecionados 
que serão exibidos na página. 


1. Abra uma página XSLT com uma fonte de dados XML anexada. 


2. (Opcional) Selecione Inserir > Tabela para adicionar uma tabela à página. A tabela ajuda a organizar os dados XML. 
Nota: Na maioria dos casos, use o objeto XSLT de região repetitiva para exibir elementos XML repetitivos em uma página. Nesse caso, 
crie uma tabela com uma única linha e uma ou mais colunas ou uma tabela de duas linhas se desejar incluir um cabeçalho. 


3. No painel Ligações, selecione um elemento XML e arraste-o até o local da página onde deseja inserir os dados. 


Um alocador de espaço de dados XML é exibido na página. O alocador de espaço é realçado e fica entre chaves. É usada a sintaxe XPath 
(Linguagem de caminho XML) para descrever a estrutura hierárquica do esquema XML. Por exemplo, se você arrastar o elemento filho title 
até a página e esse elemento tiver os elementos pai rss, channel e item, a sintaxe do alocador de espaço de conteúdo dinâmico será 
(rss/channel/item/title). 


Clique duas vezes no alocador de espaço de dados XML na página para abrir o Construtor de expressões XPath. O Construtor de 
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expressões XPath permite formatar os dados selecionados ou selecione outros itens no esquema XML. 


4. (Opcional) Aplique estilos aos dados XML selecionando um alocador de espaço de dados XML e aplicando estilos a ele como faria em 
qualquer outra parte do conteúdo usando o Inspetor de propriedades ou o painel Estilos CSS. Se preferir, você pode usar as Folhas de 
estilo em tempo de design para aplicar estilos aos fragmentos XSLT. Cada um desses métodos tem vantagens e desvantagens. 

5. Visualize seu trabalho em um navegador (Arquivo > Visualizar no navegador). 

Nota: Quando você visualiza seu trabalho usando a opção Visualizar no navegador, o Dreamweaver executa uma transformação XSL 
interno sem usar um servidor de aplicativo. 


Para o início 


Exibir elementos XML repetitivos 


O objeto XSLT de região repetitiva permite exibir elementos repetitivos de uma fonte de dados XML em uma página da Web. Por exemplo, se 
você estiver exibindo títulos de artigos e descrições de um feed de notícias e esse feed tiver entre 10 e 20 artigos, cada título e descrição do 
arquivo XML provavelmente seria um elemento filho de um elemento repetitivo. 


Qualquer região da Visualização de design que contém um alocador de espaço de dados XML pode ser transformada em uma região repetitiva. 
No entanto, as regiões mais comuns são uma tabela, uma linha de tabela ou uma série de linhas de tabela. 


1. Na Visualização de design, selecione uma região que contém alocadores de espaço de dados XML. 


A seleção pode ser qualquer item, incluindo uma tabela, uma linha de tabela ou mesmo um parágrafo do texto. 


<body> |<table>| <tr> <td> 


Para selecionar uma região na página com precisão, você pode usar o seletor de tags no canto inferior esquerdo da janela Documento. 
Por exemplo, se a região for uma tabela, clique dentro da tabela na página e, em seguida, clique na tag no seletor de tags. 


2. Siga um destes procedimentos 
e Selecione Inserir > Objetos XSLT > Região repetitiva. 
e Na categoria XLST do painel Inserir, clique no botão Região repetitiva. 


3. No Construtor de expressões XPath, selecione o elemento repetitivo, indicado por um pequeno sinal de adição. 


rss/channel/item 
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4. Clique em OK. 


Na janela Documento, um fino contorno cinza com abas é exibido em torno da região repetida. Ao visualizar seu trabalho em um navegador 
(Arquivo > Visualizar no navegador), o contorno cinza desaparece e a seleção é expandida para exibir os elementos repetitivos 
especificados no arquivo XML. 


Ao adicionar o objeto XSLT de região repetitiva à página, o alocador de espaço de dados XML é truncado na janela Documento. Isso 
acontece porque o Dreamweaver trunca o XPath para o alocador de espaço de dados XML de modo que haja relação com o caminho do 
elemento repetitivo. 


Definir propriedades da região repetitiva (XSL) 
No Inspetor de propriedades, você pode selecionar um nó XML diferente para criar a região repetitiva. 


*& Na caixa Selecionar, insira um novo nó, pressione o ícone de raio e selecione o nó na árvore de esquema XML exibida. 


Editar um objeto XSLT de região repetitiva 
Depois de adicionar um objeto XLST de região repetitiva a uma região, você pode editá-lo usando o Inspetor de propriedades. 


1. Selecione o objeto clicando na aba cinza que contorna a região repetitiva. 
2. No Inspetor de propriedades (Janela > Propriedades), clique no ícone dinâmico ao lado do campo de texto Selecionar. 
3. No Construtor de expressões XPath, faça as alterações e clique em OK. 


a ais 2 As Para o início 
Inserir fragmentos XSLT em páginas dinâmicas 
Depois de criar um fragmento XSLT, você pode inseri-lo em uma página da Web dinâmica usando o comportamento Transformação XSL do 
servidor. Ao adicionar o comportamento do servidor à sua página e visualizar a página em um navegador, um servidor de aplicativo executa uma 
transformação que exibe os dados XML do fragmento XSLT selecionado. O Dreamweaver suporta transformações XSL para páginas ColdFusion, 
ASP ou PHP. 


Nota: Se desejar inserir o conteúdo de uma página XSLT inteira em uma página dinâmica, o procedimento será exatamente o mesmo. Antes de 
usar o comportamento Transformação XSL do servidor para inserir a página XSLT inteira, exclua todo o código HTML da página dinâmica. 
1. Abra uma página ColdFusion, ASP ou PHP existente. 


2. Na Visualização de design, coloque o ponto de inserção no local onde você deseja inserir o fragmento XSLT. 
Nota: Ao inserir fragmentos XSLT, você sempre deve clicar no botão Mostrar visualizações de código e de design depois de colocar o 
ponto de inserção na página para garantir que o ponto seja colocado no local correto. Caso o local não seja correto, clique em algum outro 
lugar da Visualização de código para colocar o ponto de inserção onde deseja. 


3. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Transformação 
XSL. 


ro] COMPORTAMENTOS DE SERVIDOR — 


+ — Tipodedocumento:ASP VBScriot 


Conjunto de registros (consulta) 


Comando 


Região repetitiva 
Paginação do conjunto de registros > 
Mostrar região » 


Texto dinâmico 


Ir para página detalhada 


Ir para página relacionada 


ka Inserir registro 

Atualizar registro 

Excluir registro 

Elementos de formulário dinâmicos >» 
Usar autenticação » 


Transformação XSL 


Editar comportamentos de servidor... 


Novo comportamento de servidor... 


Obter mais comportamentos de servido... 


4. Na caixa de diálogo Transformação XSL, clique no botão Procurar e navegue até um fragmento XSLT ou uma página XSLT inteira. 


O Dreamweaver preenche o próximo campo de texto com o caminho do arquivo ou o URL do arquivo XML que está anexado ao fragmento 
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especificado. Para alterá-lo, clique no botão Procurar e navegue até outro arquivo. 


5. (Opcional) Clique no botão de adição (+) para adicionar um parâmetro XSLT. 
6. Clique em OK para inserir uma referência ao fragmento XSLT na página. O fragmento não pode ser editado. Você pode clicar duas vezes 
no fragmento para abrir o arquivo de origem do fragmento e editá-lo. 


Uma pasta inclusões/MM XSLTransform/, que contém um arquivo de biblioteca de runtime, também é criada na pasta raiz do site. O 
servidor de aplicativo usa as funções definidas nesse arquivo para executar a transformação. 


7. Carregue a página dinâmica no seu servidor (Site > Colocar) e clique em Sim para incluir os arquivos dependentes. O arquivo que contém o 
fragmento XSLT, o arquivo XML que contém seus dados e o arquivo de biblioteca gerado em runtime devem estar no servidor da sua 
página para serem exibidos corretamente. (Se você selecionar um arquivo XML remoto como fonte de dados, esse arquivo deve residir em 
qualquer outro lugar da Internet.) 


H ge = = A = P catar 
Excluir fragmentos XSLT de páginas dinâmicas id 
Você pode remover um fragmento XSLT de uma página excluindo o comportamento Transformação XSL do servidor usado para inserir o 
fragmento. A exclusão do comportamento do servidor exclui somente o fragmento XSLT (os arquivos XML, XSLT ou de biblioteca de runtime 
associados não são excluídos). 


1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), selecione o comportamento Transformação XSL do 
servidor que deseja excluir. 

2. Clique no botão de subtração (-). 
Nota: Nesta versão, você sempre deve remover os comportamentos de servidor. A exclusão manual do código gerado remove apenas 
parcialmente o comportamento de servidor, mesmo que o comportamento desapareça do painel Comportamentos de servidor. 


: = ; É Es 
Editar comportamentos Transformação XSL do servidor AR 
Depois de adicionar um fragmento XSLT a uma página da Web dinâmica, você pode editar o comportamento Transformação XSL do servidor a 
qualquer momento. 


1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique duas vezes no comportamento Transformação XSL 
do servidor que deseja editar. 


2. Faça as alterações e clique em OK. 


á 5 AU Para o início 
Criar um link dinâmico 
Você pode criar um link dinâmico na sua página XSLT vinculado a um URL específico quando o usuário clica em uma palavra ou grupo de 
palavras especificado nos dados XML. Para obter instruções completas, consulte a errata do Dreamweaver em 
www.adobe.com/go/dw documentation br. 


Aplicação de estilos em fragmentos XSLT dinda 
Ao criar uma página XSLT inteira (isto é, uma página XSLT que contém as tags <body> e <head>), você pode exibir os dados XML na página e 
formatar os dados como qualquer outra parte do conteúdo usando o Inspetor de propriedades ou o painel Estilos CSS. No entanto, ao criar um 
fragmento XSLT a ser inserido em uma página dinâmica (por exemplo, um fragmento a ser inserido em uma página ASP, PHP ou Cold Fusion), o 
processamento de estilos no fragmento e na página dinâmica fica mais complicado. Embora você trabalhe em um fragmento XSLT 
separadamente da página dinâmica, é importante lembrar que o fragmento deve ser usado na página dinâmica e que a saída do fragmento XSLT 
reside em algum lugar entre as tags <body> da página dinâmica. Neste fluxo de trabalho, é importante não incluir elementos <head> (como 
definições de estilo ou links para folhas de estilo externas) nos fragmentos XSLT. Desse modo, o servidor de aplicativo coloca esses elementos 
na tag <body> da página dinâmica, gerando um markup inválido. 


Por exemplo, você pode criar um fragmento XSLT para inserção em uma página dinâmica e formatar o fragmento usando a mesma folha de 
estilo externa da página dinâmica. Se você anexar a mesma folha de estilo ao fragmento, a página HTML resultante conterá um link duplicado 
para a folha de estilo (um na seção <head> da página dinâmica e outro na seção <body> da página, onde o conteúdo do fragmento XSLT é 
exibido). Em vez dessa abordagem, você deve usar as Folhas de estilo em tempo de design para fazer referência à folha de estilo externa. 


Ao formatar o conteúdo dos fragmentos XSLT, use o seguinte fluxo de trabalho: 


e Primeiro, anexe uma folha de estilo externa à página dinâmica. Esta é a melhor maneira de aplicar estilos no conteúdo de qualquer página 
da Web. 


* Em seguida, anexe a mesma folha de estilo externa ao fragmento XSLT como uma folha de estilo em tempo de design. Como o nome 
indica, as folhas de estilo em tempo de design funcionam somente na Visualização de design do Dreamweaver. 


Depois de realizar as duas etapas anteriores, você pode criar novos estilos no seu fragmento XSLT usando a mesma folha de estilo 
anexada à sua página dinâmica. A saída HTML será mais limpa (porque a referência à folha de estilo é válida somente no Dreamweaver) e 
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Usar parâmetros com transformações XSL 


o fragmento ainda exibirá os estilos apropriados na Visualização de design. Além disso, todos os estilos serão aplicados tanto no fragmento 
quanto na página dinâmica quando a página dinâmica for visualizada no modo Design ou em um navegador. 


Nota: Se você visualizar o fragmento XSLT em um navegador, os estilos não serão exibidos pelo navegador. Em vez disso, você deve 
visualizar a página dinâmica no navegador para ver o fragmento XSLT no contexto da página dinâmica. 


Para o início 


Você pode definir parâmetros para a transformação XSL ao adicionar o comportamento Transformação XSL do servidor a uma página da Web. 
Um parâmetro controla como os dados XML são processados e exibidos. Por exemplo, você pode usar um parâmetro para identificar e listar um 
artigo específico de um feed de notícias. Quando a página é carregada em um navegador, somente o artigo especificado com o parâmetro é 
exibido. 


Adicionar um parâmetro XSLT a uma transformação XSL 


1. 


CA 


4. 


5. 


Abra a caixa de diálogo Transformação XSL. Para fazer isso, clique duas vezes no comportamento Transformação XSL do servidor no 
painel Comportamentos de servidor (Janela > Comportamentos de servidor) ou adicione um novo comportamento Transformação XSL do 
servidor. 


Na caixa de diálogo Transformação XSL, clique no botão de adição (+) ao lado de Parâmetros XSLT. 


Transformação XSL 


Arquivo X5LT: | fragment.xsl 


URI XML: | http: /fuwnyjmarkme.comfjdfindex.xml 


Parâmetros XSLT: 


Na caixa de diálogo Adicionar parâmetro, insira um nome para o parâmetro na caixa Nome. O nome pode conter somente caracteres 
alfanuméricos. Os espaços não são permitidos. 


Siga um destes procedimentos: 
* Se desejar usar um valor estático, insira-o na caixa Valor. 


* Se desejar usar um valor dinâmico, clique no ícone de dinâmico ao lado da caixa Valor, preencha a caixa de diálogo Dados dinâmicos e 
clique em OK. Para obter mais informações, clique no botão Ajuda na caixa de diálogo Dados dinâmicos. 


Na caixa Valor padrão, insira o valor a ser usado pelo parâmetro se a página não receber nenhum valor de runtime e clique em OK. 


Editar um parâmetro XSLT 


i. 


Abra a caixa de diálogo Transformação XSL. Para fazer isso, clique duas vezes no comportamento Transformação XSL do servidor no 
painel Comportamentos de servidor (Janela > Comportamentos de servidor) ou adicione um novo comportamento Transformação XSL do 
servidor. 


2. Selecione um parâmetro na lista de parâmetro XSLT. 


3. Clique no botão Editar. 


4. Faça as alterações e clique em OK. 


Excluir um parâmetro XSLT 


1. 


Abra a caixa de diálogo Transformação XSL. Para fazer isso, clique duas vezes no comportamento Transformação XSL do servidor no 
painel Comportamentos de servidor (Janela > Comportamentos de servidor) ou adicione um novo comportamento Transformação XSL do 
servidor. 


2. Selecione um parâmetro na lista de parâmetro XSLT. 


3. Clique no botão de subtração (-). 


Criar e editar regiões XSLT condicionais 


Para o início 


Você pode criar uma ou várias regiões condicionais em uma página XSLT. Selecione um elemento na Visualização de design e aplique uma 
região condicional na seleção ou insira uma região condicional no ponto de inserção do documento. 


Por exemplo, se desejar exibir a expressão “Não disponível” ao lado do preço de um item que não está disponível, digite o texto “Não disponível” 
na página, selecione-o e aplique uma região condicional no texto selecionado. O Dreamweaver coloca a tag <xsl:if> antes e depois da seleção e 
exibe a expressão “Não disponível” na página somente quando os dados corresponderem às condições da expressão condicional. 
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Aplicar uma região XSLT condicional 

Você pode gravar uma expressão condicional simples a ser inserida na sua página XSLT. Se o conteúdo estiver selecionado quando você abrir a 
caixa de diálogo Região condicional, haverá a tag <xsl:if> antes e depois do conteúdo. Se o conteúdo não estiver selecionado, o bloco <xsl:if> 
será incluído no ponto de inserção na página. É recomendado usar a caixa de diálogo para começar e personalizar a expressão na Visualização 
de código. 


O elemento <xsl:if> é semelhante ao elemento if de outras linguagens. Esse elemento permite testar uma condição e tomar uma ação com base 
no resultado. O elemento <xsl:if> permite testar uma expressão para um único valor verdadeiro ou falso. 


1. Selecione Inserir > Objetos XSLT > Região condicional ou clique no ícone Região condicional, na categoria XSLT do painel Inserir. 


2. Na caixa de diálogo Região condicional, insira a expressão condicional a ser usada na região. 


No exemplo a seguir, teste a expressão para observar se o valor do atributo available do nó do contexto é true. 


Região condicional 


Teste: Qavalable='true| 


Esta expressão será usada para determnar se o conteúdo 
dentro dela deve ser mostrado. 


: . - iconais? 


3. Clique em OK. 
O seguinte código é inserido na página XSLT: 
<xsl:if test="GOavailable=&apos;true&apos;"> 


Content goes here 
sypas et 


Nota: Os valores de sequência de caracteres devem ser definidos como true entre aspas. O Dreamweaver codifica as aspas (&apos;) para 
que sejam inseridas como XHTML válido. 

Além de testar os nós com relação aos valores, você pode usar qualquer função XSLT suportada em qualquer instrução condicional. A 
condição é testada no nó atual do arquivo XML. No exemplo a seguir, teste a expressão no último nó do conjunto de resultados: 


Região condicional 


Teste: | positien(P=last()| 


Esta expressão será usada para determinar se o conteúdo 
dentro dela deve ser mostrado, 


Como criar expressões condicionais? 


Para obter mais informações e exemplos sobre expressões condicionais de gravação, consulte a seção <xsl:if> no painel Referência (Ajuda 
> Referência). 


Aplicar várias regiões XSLT condicionais 

Você pode gravar uma expressão condicional simples a ser inserida na sua página XSLT. Se o conteúdo estiver selecionado quando você abrir a 
caixa de diálogo Região condicional, haverá a tag <xsl:choose> antes e depois do conteúdo. Se o conteúdo não for selecionado, o bloco 
<xsl:choose> será incluído no ponto de inserção na página. É recomendado usar a caixa de diálogo para começar e personalizar a expressão na 
Visualização de código. 


O elemento <xsl:choose> é semelhante ao elemento case de outras linguagens. Esse elemento permite testar uma condição e tomar uma ação 
com base no resultado. O elemento <xsl:choose> permite testar várias condições. 


1. Selecione Inserir > Objetos XSLT > Região condicional múltipla ou clique no ícone Região condicional múltipla na categoria XSLT do painel 
Inserir. 


2. Na caixa de diálogo Região condicional múltipla, insira a primeira condição. 


No exemplo a seguir, teste a expressão para observar se o subelemento price do nó do contexto é inferior a 5. 
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Região condicional múltipla 


Teste; price <5| 


Esta expressão será usada para determinar se o conteúdo 


dentro dela deve ser mostrado. 


Como criar expressões condicionais? 


3. Clique em OK. 


No exemplo, o seguinte código é inserido na página XSLT: 


<xsl:choose> 
<xsl:when test="price&lt;5"> 
Content goes here 
</xsl:when> 
<xsl:otherwise> 
Content goes here 
</xsl:otherwise> 
</xsl:choose> 


4. Para inserir outra condição, coloque o ponto de inserção na Visualização de código entre os pares de tag <xsl:when> ou antes da tag 
<xsl:otherwise> e insira uma região condicional (Inserir > Objetos XSLT > Região condicional). 
Depois de especificar a condição e clicar em OK, outra tag <xsl:iwhen> será inserida no bloco <xsl:choose>. 


Para obter mais informações e exemplos sobre expressões condicionais de gravação, consulte as seções <xsl:choose> no painel 
Referência (Ajuda > Referência). 


Definir propriedades da região condicional (If) 


O propósito do recurso Definir inspetor de propriedade de região condicional é alterar a condição usada em uma região condicional na página 
XSL. A região condicional testa a condição e toma uma ação com base no resultado. 


*& Na caixa Testar, insira uma nova condição e pressione Enter. 


Definir propriedades condicionais (When) 
O propósito do recurso Definir inspetor de propriedade de região condicional é alterar a condição usada em uma região condicional múltipla na 
página XSL. A região condicional múltipla testa a condição e toma uma ação com base no resultado. 


* Na caixa Testar, insira uma nova condição e pressione Enter. 


E sa Para o início 
Inserir comentários XSL Ee 


Você pode adicionar tags de comentário XSL a um documento ou envolver uma seleção em tags de comentário XSL. 


Adicionar tags de comentário XSL a um documento 
*& Siga um destes procedimentos: 


e Na Visualização de design, selecione Inserir > Objetos XSLT > Comentário XSL, digite o conteúdo do comentário (ou deixe a caixa em 
branco) e clique em OK. 


e Na Visualização de código, selecione Inserir > Objetos XSLT > Comentário XSL. 


Você também pode clicar no ícone Comentário XSL, na categoria XSLT do painel Inserir. 


Envolver uma seleção em tags de comentário XSL 
1. Passe para a Visualização de código (Exibir > Código). 
2. Selecione o código que deseja comentar. 


3. Na Barra de ferramentas de codificação, clique no botão Aplicar comentário e selecione Aplicar comentário <xsl:comment></xsl:comment>. 


” as SUE po Para o início 
Usar o Construtor de expressões XPath para adicionar expressões para dados XML e 
O XPath (Linguagem de caminho XML) é uma sintaxe não XML que controla partes de um documento XML. Na maioria das vezes, essa sintaxe é 
usada como uma linguagem de consulta para dados XML, assim como a linguagem SQL é usada para bancos de dados de consulta. Para obter 
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mais informações sobre o XPath, consulte a especificação da linguagem XPath no site da W3C em www .w3.org/TR/xpath. 


O Construtor de expressões XPath é um recurso do Dreamweaver que permite criar expressões XPath simples para identificar nós de dados 
específicos e para regiões repetitivas. Em vez de arrastar valores da árvore de esquema XML, esse método permite formatar o valor exibido. O 
contexto atual é identificado com base na posição do ponto de inserção no arquivo XSL quando a caixa de diálogo Construtor de expressões 
XPath está aberta. O contexto atual está em negrito na árvore de esquema XML. À medida que você faz seleções nessa caixa de diálogo, as 
instruções XPath corretas são geradas, em relação ao contexto atual. Isso simplifica o processo de gravação de expressões XPath corretas para 
iniciantes e usuários avançados. 

Nota: Esse recurso foi projetado para ajudar a criar expressões XPath simples para identificar um nó específico ou para regiões repetitivas. O 
recurso não permite editar as expressões manualmente. Se for necessário criar expressões complexas, use o Construtor de expressões XPath 
para começar e personalizar expressões na Visualização de código ou com o Inspetor de propriedades. 


Criar uma expressão XPath para identificar um nó específico 
1. Clique duas vezes no alocador de espaço de dados XML na página para abrir o Construtor de expressões XPath. 
2. Na caixa de diálogo Construtor de expressões XPath (texto dinâmico), selecione qualquer nó na árvore de esquema XML. 


A expressão XPath correta é gravada na caixa Expressão para identificar o nó. 
Nota: Se você selecionar um nó diferente na árvore de esquema XML, a expressão será alterada para refletir sua escolha. 


No exemplo a seguir, exiba o subelemento price do nó item: 


Construtor de expressões XPath (texto dinamico) 


Selecionar nó para exibir: 
E3-C> specials 
= 4$ menu, item 
id 
item 
€> link 
€> description 


Essa seleção inseriria o seguinte código na página XSLT: 


<xsl:value-of select="price"/> 


3. (Opcional) Selecione uma opção de formatação no menu pop-up Formato. 


A formatação de uma seleção é útil quando o valor do nó retorna um número. O Dreamweaver fornece uma lista predefinida de funções de 
formatação. Para obter uma lista completa das funções de formatação disponíveis e exemplos, consulte o painel Referência. 


No exemplo a seguir, formate o subelemento price como uma moeda com duas casas decimais: 
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Construtor de expressões XPath (texto dinâmico) 


link 
description 


Expressão: 
format-number(specials/menu tem/price, '$H. 00] 


Essas opções inseririam o seguinte código na página XSLT: 


<xsl:value-of select="format -number (provider/store/items/item/price, '$4.00')"/> 


4. Clique em OK. 
5. Para exibir o valor de cada nó no arquivo XML, aplique uma região repetitiva no elemento que contém o texto dinâmico (por exemplo, uma 
linha de tabela HTML ou um parágrafo). 


Para obter mais informações e exemplos sobre como selecionar nós para retornar um valor, consulte a seção <xsl:value-of/> no painel 
Referência. 


Selecionar um nó para repetir 

Você pode selecionar um nó a ser repetido e, se desejar, filtrar os resultados. Na caixa de diálogo Construtor de expressões XPath, o conteúdo 
selecionado será envolto em um bloco <xsl:for-each>. Se o conteúdo não for selecionado, o bloco <xsl:for-each> será inserido no ponto de 
inserção do cursor. 


1. Clique duas vezes no alocador de espaço de dados XML na página para abrir o Construtor de expressões XPath. 
2. Na caixa de diálogo Construtor de expressões XPath (região repetitiva), selecione o item a ser repetido na árvore de esquema XML. 


A expressão XPath correta é gravada na caixa Expressão para identificar o nó. 
Nota: Os itens repetitivos são identificados com um sinal de adição (+) na árvore de esquema XML. 


No exemplo a seguir, repita cada nó item do arquivo XML. 
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Construtor de expressões XPath (região repetitiva) E3 


Selecionar nó para repetir: 


item 

link 
description 
price 


Ao clicar em OK, o seguinte código será inserido na página XSLT: 


<xsl:for -each select="provider/store/items/item"> 
Content goes here 
</xsl:for -each> 


Em alguns casos, você talvez queira trabalhar com um subconjunto dos nós repetitivos (por exemplo, somente com itens onde um atributo 
tem um valor específico). Nesse caso, é necessário criar um filtro. 


Filtrar os dados a serem repetidos 
Use um filtro para identificar os nós repetitivos que têm valores de atributo específicos. 


1. 


Na árvore de esquema XML, selecione um nó a ser repetido. 


2. Clique no botão de expansão Criar filtro. 
3. 
4. Insira os critérios de filtragem nos seguintes campos: 


Clique no botão de adição (+) para criar um filtro vazio. 


Filtrar por Especifique o nó repetitivo que contém os dados que servirão de filtro. O menu pop-up fornece uma lista de nós ancestrais 
relativos ao nó selecionado na árvore de esquema XML. 


Onde Especifica o atributo ou subelemento do nó Filtrar por que será usado para limitar os resultados. Você pode selecionar um atributo ou 
subelemento no menu pop-up ou inserir sua própria expressão XPath nesse campo para identificar filhos que existem em níveis mais 
profundos da árvore de esquema. 


Operador Especifique o operador de comparação a ser usado na expressão de filtro. 


Valor Especifique o valor que deve ser verificado no nó Filtrar por. Insira o valor. Se parâmetros dinâmicos forem definidos na página 
XSLT, você pode selecionar um deles no menu pop-up. 


. Para especificar outro filtro, clique no botão de adição (+) novamente. 


Conforme você insere valores ou seleciona opções nos menus pop-up, a expressão XPath na caixa Expressão é alterada. 


No exemplo a seguir, limite o conjunto de resultados aos nós item onde o valor do atributo available é true. 
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id 

item 

link 
description 
price 


Fikrar por 
menu, item Did 


Expressão: | 
specials/menu item[Gid = kapos;true&apos;] 


Ao clicar em OK, o seguinte código será inserido na página XSLT: 


<xsl:for -each select="provider/store/items/item[QOavailable = &apos;true&apos;]"> 
Content goes here 
</xsl:for -each> 


Nota: Os valores de sequência de caracteres devem ser definidos como true entre aspas. O Dreamweaver codifica as aspas (&apos;) para 
que sejam inseridas como XHTML válido. 


Você pode criar filtros mais complexos que permitem especificar nós pai como parte dos critérios de filtragem. No exemplo a seguir, limite o 
conjunto de resultados aos nós item onde o atributo Qid de store é iguala 1 e o nó price de item é superior a 5. 


Construtor de expressões XPath (região repetitiva) 


Selecionar nó para repetir: 
E-4> specials 
menu iterr 
id 
item 
link 
description 
price 


= Criar filtro 
— Como criar um filtro? 
Filtrar por WHERE 


menu, item (Did 
menu, item price 


Expressão: 
specials/menu. item[Gid = 1 and price gt; 5] 
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Ao clicar em OK, o seguinte código será inserido na página XSLT: 


<xsl:for -each select="provider/store[Qid = 1]/items/item[price &gt; 5]"> 
Content goes here 
</xsl:for -each> 


Para obter mais informações e exemplos sobre regiões repetitivas, consulte a seção <xsl:for-each> no painel Referência. 


Mais tópicos da Ajuda 


Avisos legais | Política de privacidade on-line 
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Execução de transformações XSL no cliente 


Fluxo de trabalho de execução de transformações XSL do cliente 
Criação de páginas XSLT inteiras e exibição de dados 
Vincular uma página XSLT a uma página XML 


Fluxo de trabalho de execução de transformações XSL do cliente io Road 


Você pode executar transformações XSL do cliente. Saiba mais sobre as transformações XSL do servidor e do cliente e sobre como usar XML e 
XSL com páginas da Web antes de criar páginas que exibem dados XML. 


O fluxo de trabalho geral para executar transformações XSL do cliente é descrito a seguir (cada etapa é descrita em outros tópicos): 
1. Configure um site do Dreamweaver. 


2. Crie uma página XSLT ou converta uma página HTML em XSLT. 
e No site do Dreamweaver, crie uma página XSLT inteira. 
e Converta uma página HTML existente em uma página XSLT inteira. 


3. Anexe uma fonte de dados XML à página (se ainda não tiver feito isso). 
O arquivo XML anexado deve residir no mesmo diretório da página XSLT. 


4. Associe os dados XML à página XSLT. 
5. Exiba os dados XML ligando os dados à página XSLT inteira. 


6. Se for apropriado, adicione um objeto XSLT de região repetitiva à tabela ou linha de tabela que contenha os 
alocadores de espaço de dados XML. 


7. Anexe a página XSLT à página XML. 
8. Poste a página XML e a página XSLT vinculada no seu servidor da Web. 


9. Visualize a página XML em um navegador. 
Ao fazer isso, o navegador transforma os dados XML, formata esses dados com a página XSLT e exibe a página com estilo no navegador. 


Para o início 


Criação de páginas XSLT inteiras e exibição de dados 

Você deve usar uma página XSLT inteira para transformações do cliente. (Os fragmentos XSLT não funcionam nesse tipo de transformação.) 
Siga essas etapas gerais para criar, ligar dados XML e formatar páginas XSLT para transformações do cliente: 

1. Crie a página XSLT. 


2. Exiba dados na página XSLT. 


3. Exiba elementos repetitivos na página XSLT. 


Para o início 


Vincular uma página XSLT a uma página XML 
Depois de criar uma página XSLT inteira com alocadores de espaço de conteúdo dinâmico para os dados XML, você deve inserir uma referência 
à página XSLT na página XML. 


Nota: Os arquivos XML e XSL usados para as transformações do cliente devem residir no mesmo diretório. Caso contrário, o navegador lerá o 
arquivo XML e encontrará a página XSLT da transformação, mas não encontrará os ativos (folhas de estilos, imagens, etc.) definidos pelos links 
relativos na página XSLT. 

1. Abra o arquivo XML que deseja vincular com a página XSLT. 


2. Selecione Comandos > Anexar uma folha de estilos XSLT. 
3. Na caixa de diálogo, clique no botão Procurar, navegue até a página XSLT que deseja vincular, selecione-a e clique em OK. 
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4. Clique em OK para fechar a caixa de diálogo e inserir a referência à página XSLT na parte superior do documento XML. 


Mais tópicos da Ajuda 


(65) =v-nc-sa ] 
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Entidades de caracteres ausentes para XSLT 


Especificar uma entidade de caractere ausente 


Ses E Para o início 
Especificar uma entidade de caractere ausente 
Em XSLT, alguns caracteres não são permitidos em determinados contextos. Por exemplo, você não pode usar o sinal de menor que (<) e o E 
comercial (&) no texto entre tags ou em um valor de atributo. O mecanismo de transformação XSLT gerará um erro se esses caracteres forem 
usados de modo incorreto. Para solucionar o problema, você pode especificar entidades de caractere para substituir os caracteres especiais. 


Uma entidade de caractere é uma sequência de caracteres que representa outros caracteres. As entidades de caractere são nomeadas ou 
numeradas. Uma entidade nomeada começa com um E comercial (&) seguido pelo nome ou por caracteres, e termina com ponto-e-vírgula (;). 
Por exemplo, &lt; representa o sinal menor que (<). As entidades numeradas também começam e terminam da mesma maneira, exceto pela 
presença de uma cerquilha (%) e de um número que especifica o caractere. 


O XSLT tem as cinco entidades predefinidas a seguir: 


Caractere Código da entidade 
< (menor que) &t; 

& (E comercial) &amp; 

> (maior que) &gt; 

" (aspas) &quot; 

* (apóstrofe) &apos; 


Se você usar outras entidades de caractere em um arquivo XSL, precisará defini-las na seção DTD do arquivo XSL. O Dreamweaver fornece 
várias definições de entidade padrão que podem ser observadas na parte superior de um arquivo XSL criado no Dreamweaver. Essas entidades 
padrão abrangem uma ampla seleção dos caracteres usados com mais frequência. 


Ao visualizar o arquivo XSL em um navegador, o Dreamweaver verifica o arquivo XSL para observar se há entidades não definidas e notifica 
caso alguma for encontrada. 


Se você visualizar um arquivo XML anexado a um arquivo XSLT ou visualizar uma página do servidor com uma transformação XSLT, o servidor 
ou o navegador (em vez do Dreamweaver) enviará uma notificação sobre uma entidade não definida. O exemplo a seguir mostra uma mensagem 
que pode ser exibida no Internet Explorer quando você solicita um arquivo XML transformado por um arquivo XSL com uma definição de entidade 
ausente: 


Reference to undefined entity 'auml'. Error processing resource 'http://localhost/testthis/list.xsl'. Line 
28, Position 20 
<p class="'test''>&auml;</p> 


Para corrigir o erro da página, adicione a definição de entidade manualmente à página. 


Especificar uma definição de entidade ausente 
1. Procure o caractere ausente na página de referência de entidades de caractere no site da W3C em www .wS3.org/TR/REC- 
html40/sgml/entities.html. 


Essa página da Web contém as 252 entidades permitidas no HTML 4 e no XHTML 1.0. 


Por exemplo, se a entidade de caractere Egrave estiver ausente, procure “Egrave” no site da W3C. A seguinte entrada estará disponível: 


<!ENTITY Egrave CDATA "&4200;" -- latin capital letter E with grave, U+00C8 ISOlat1i --> 


2. Anote o nome e o código da entidade na entrada. 
No exemplo, Egrave é o nome da entidade e &4200 é o código da entidade. 


3. Com essas informações, passe para a Visualização de código e insira a seguinte tag de entidade na parte superior do arquivo XSL (depois 
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da declaração TipoDoc e com as outras tags de entidade): 
<!ENTITY entityname "entitycode;"> 

No exemplo, você inseriria a seguinte tag de entidade: 
<!ENTITY Egrave "&4200;"> 


4. Salve o arquivo. 


Se você usar várias vezes as mesmas entidades de caractere, poderá adicionar permanentemente suas definições aos arquivos XSL 
criados pelo Dreamweaver por padrão quando o comando Arquivo > Novo é usado. 


Adicionar definições de entidade aos arquivos XSL criados pelo Dreamweaver por padrão 
1. Localize o seguinte arquivo de configuração na pasta do aplicativo Dreamweaver e abra-o em qualquer editor de texto: 


Configuration/DocumentTypes/MMDocumentTypeDeclarations.xml 
2. Localize a declaração mm xslt 1: 


<documenttypedeclaration id="mm xslt 1"> 


3. Insira as novas tags de entidade na lista de tags de entidade da seguinte maneira: 


<!ENTITY entityname "entitycode;"> 


4. Salve o arquivo e reinicie o Dreamweaver. 


(69) ex-ne-sa ] 
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jQuery 


Uso de widgets de interface do jQuery no Dreamweaver 


Os widgets do Spry foram substituídos pelos widgets do jQuery na Dreamweaver CC e posterior. Embora ainda possa modificar os widgets do 
Spry existentes na página, você não pode adicionar novos. 


Os widgets são aplicativos da Web pequenos gravados em linguagens como DHTML e JavaScript que podem ser inseridos e executados em uma 
página da Web. Entre outros coisas, os widgets da Web ajudam a fornecer uma maneira de reproduzir as experiências do desktop em uma 
página da Web. 


Os widgets de interface do jQuery como acordeão, tabulações, seletor de datas, controle deslizante e preenchimento automático levam a 
experiência do desktop para a Web. 


Por exemplo, o widget Tabulações pode ser usado para copiar o recurso de tabulação das caixas de diálogo em aplicativos de desktop. 


Para o início 


Inserção de um widget do jQuery 


Quando você insere um widget do jQuery, os seguintes itens são adicionados automaticamente ao código: 


e Referências a todos os arquivos dependentes 
e Tag de script que contém a API do jQuery do widget. Os widgets adicionais são adicionados à mesma tag de script. 


Para obter mais informações sobre os widgets do jQuery, consulte hitp://jqueryui.com/demos/ 


Nota: para os efeitos do jQuery, a referência externa a jquery-1.8.24.min.js não será adicionada porque este arquivo será incluído 
automaticamente quando você adicionar um efeito. 


1. Verifique se o cursor está em um local da página onde você deseja inserir o widget. 
2. Selecione Inserir > Interface do jQuery e escolha o widget que deseja inserir. 


Se você usar o painel Inserir, os widgets estarão presentes na seção Interface do jQuery do painel Inserir. 


Quando você seleciona um widget do jQuery, as propriedades são exibidas no painel Propriedades. 


Você pode visualizar widgets do jQuery na Visualização dinâmica ou no navegador compatível com widgets do jQuery. 


Para o início 


Modificação de widgets do jQuery 
1. Selecione o widget que deseja modificar. 
2. No painel Propriedades, modifique as propriedades. 
Por exemplo, para adicionar uma tabulação adicional ao widget Tabulações, selecione o widget e clique em “+” no painel Propriedades. 


Tutorial de vídeo 
e Uso de widgets jQuery Mobile em páginas da Web no Dreamweaver 


As publicações do Twitter'” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Uso de efeitos do jQuery no Dreamweaver 


Os efeitos do Spry foram substituídos pelos efeitos do jQuery na Dreamweaver CC. Embora ainda possa modificar os efeitos do Spry existentes 
na página, você não pode adicionar novos. 


Adição de efeitos do jQuery 
Efeitos do jQuery com base no evento 
Remoção de efeitos do jQuery 


Para o início 


Adição de efeitos do jQuery 
1. Na visualização Design ou Código do documento do Dreamweaver, selecione o elemento ao qual você deseja aplicar um efeito do jQuery. 
2. Selecione Janelas > Comportamentos para abrir o painel Comportamentos. 
3. Clique em E, clique em Efeitos e clique no efeito desejado. 
O painel de personalização com as configurações do efeito selecionado é exibido. 


4. Especifique as configurações, como o elemento de destino ao qual o efeito deve ser aplicado, e a duração do efeito. 


O elemento de destino pode ser igual ao elemento selecionado inicialmente ou a um elemento diferente na página. Por exemplo, se desejar 
que os usuários cliquem em um elemento A para ocultar ou mostrar um elemento B, o elemento de destino é B. 


5. Para adicionar vários efeitos do jQuery, repita as etapas acima. 


Ao selecionar vários efeitos, o Dreamweaver aplica os efeitos na ordem em que são exibidos no painel Comportamentos. Para alterar a 
ordem dos efeitos, use as teclas de seta na parte superior do painel. 


O Dreamweaver insere automaticamente o código relevante no documento. Por exemplo, se você selecionar o efeito “Fade”, o seguinte código 
será inserido: 


e Referências de arquivos externos para os arquivos dependentes necessários para que os efeitos do jQuery funcionem: 


<script src="jQueryAssets/jquery-1.7.2.min.js" type="text/javascript"></script><script 
src="jQueryAssets/jquery-ui-effects.custom.min.js" type="text/javascript"></script> 


e O seguinte código é aplicado ao elemento na tag de corpo: 

<li id="earthFrm" onclick="MM DW effectAppearFade($('gearthForms'),'show','fade',1000)"> Earth Forms</li> 
* Uma tag de script com o seguinte código é adicionada: 

<script type="text/javascript"> function MM DW effectAppearFade(obj, method, effect, speed) ( 


obj [method] (effect, (), speed); J</script> 


Para o início 


Efeitos do jQuery com base no evento 


Quando você aplica um efeito do jQuery, ele é atribuído ao evento onClick por padrão. Você pode alterar o evento de disparo do efeito usando 
o painel Comportamentos. 


1. Selecione o elemento de página obrigatório. 
2. No painel Janelas > Comportamentos, clique no ícone Mostrar eventos de grupo. 


3. Clique na linha que corresponde ao efeito que está atualmente aplicado. Observe que a primeira coluna se transforma em uma lista 
suspensa que fornece uma lista de eventos a serem escolhidos. 


4. Clique no evento obrigatório. 
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Remoção de efeitos do jQuery Para o início 


1. Selecione o elemento de página obrigatório. 
O painel Comportamentos lista todos os efeitos aplicados atualmente ao elemento de página selecionado. 


2. Clique no efeito que deseja excluir e clique em =. 


As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 
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Vinculação e navegação 


Solução de problemas de links 


Encontrar links rompidos, externos e órfãos 
Corrigir links rompidos 


Ê ã PR, Para o início 
Encontrar links rompidos, externos e órfãos 


Use o recurso Verificar links para procurar links rompidos e arquivos órfãos (arquivos que ainda existem no site, mas não estão vinculados a 
nenhum outro arquivo do site). Você pode procurar um arquivo aberto, uma parte de um site local ou um site local inteiro. 


O Dreamweaver verifica links somente de documentos do site; o Dreamweaver compila uma lista de links externos nos documentos selecionados, 
mas não os verifica. 


Você também pode identificar e excluir arquivos que não são mais usados por outros arquivos do seu site. 


Verificar links no documento atual 
1. Salve o arquivo em um local do site local do Dreamweaver. 
2. Selecione Arquivo > Verificar página > Links. 


O relatório Links rompidos aparece no painel Verificador de links (no grupo do painel Resultados). 
3. No painel Verificador de links, selecione Links externos no menu pop-up Mostrar para exibir outro relatório. 
O relatório Links externos aparece no painel Verificador de links (no grupo do painel Resultados). 


Você pode procurar arquivos órfãos ao verificar links no site inteiro. 


4. Para salvar o relatório, clique no botão Salvar relatório no painel Verificador de links. O relatório é um arquivo temporário e será perdido se 
não for salvo. 


Verificar links em parte de um site local 
1. No painel Arquivos, selecione um site no menu pop-up Sites atuais. 
2. Na Visualização local, selecione os arquivos ou pastas a serem verificados. 
3. Inicie a verificação seguindo um destes procedimentos: 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em um dos arquivos selecionados e, 
em seguida, selecione Verificar links > Arquivos/pastas selecionadas no menu de contexto. 


e Selecione Arquivo > Verificar página > Links. 
O relatório Links rompidos aparece no painel Verificador de links (no grupo do painel Resultados). 
4. No painel Verificador de links, selecione Links externos no menu pop-up Mostrar para exibir outro relatório. 
O relatório Links externos aparece no painel Verificador de links (no grupo do painel Resultados). 


Você pode procurar arquivos órfãos ao verificar links no site inteiro. 


5. Para salvar um relatório, clique no botão Salvar relatório no painel Verificador de links. 


Verificar links no site inteiro 
1. No painel Arquivos, selecione um site no menu pop-up Sites atuais. 
2. Selecione Site > Verificar os links no site inteiro. 


O relatório Links rompidos aparece no painel Verificador de links (no grupo do painel Resultados). 
3. No painel Verificador de links, selecione Links externos ou Arquivos órfãos no menu pop-up Mostrar para exibir outro relatório. 
Uma lista dos arquivos que correspondem ao tipo de relatório selecionado aparece no painel Verificador de links. 


Nota: Se você selecionar Arquivos órfãos como tipo de relatório, poderá excluir arquivos órfãos diretamente do painel Verificador de links 
selecionando um arquivo na lista e pressionando a tecla Delete. 


4. Para salvar um relatório, clique no botão Salvar relatório no painel Verificador de links. 


Ria : Ea 
Corrigir links rompidos ara o início 
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Depois de executar um relatório de links, você pode corrigir links rompidos e referências de imagem diretamente no painel Verificador de links ou 
abrir arquivos da lista e corrigir os links no Inspetor de propriedades. 


Corrigir links no painel Verificador de links 
1. Execute um relatório de verificação de links. 
2. Na coluna Links rompidos (não na coluna Arquivos) do painel Verificador de links (no grupo do painel Resultados), selecione o link rompido. 


Um ícone de pasta aparece próximo ao link rompido. 


3. Clique no ícone de pasta próximo 3 ao link rompido e navegue até o arquivo correto, ou digite o caminho e o nome de arquivo corretos. 


4. Pressione Tab ou Enter (Windows) ou Return (Macintosh). 


Se houver outras referências rompidas a este mesmo arquivo, corrija as referências nos outros arquivos também. Clique em Sim para que o 
Dreamweaver atualize todos os documentos da lista que fazem referência a este arquivo. Clique em Não para que o Dreamweaver atualize 
somente a referência atual. 


Nota: Se Ativar devolução e retirada de arquivos estiver ativado no site, o Dreamweaver tentará retirar os arquivos que requerem 
alterações. Se não for possível retirar um arquivo, o Dreamweaver exibirá uma caixa de diálogo de aviso e não alterará as referências 
rompidas. 


Corrigir links no Inspetor de propriedades 
1. Execute um relatório de verificação de links. 
2. No painel Verificador de links (no grupo do painel Resultados), clique duas vezes em uma entrada na coluna Arquivo. 


O Dreamweaver abre o documento, seleciona a imagem ou o link rompido e realça o caminho e o nome de arquivo no Inspetor de 
propriedades. (Se o Inspetor de propriedades não estiver visível, selecione Janela > Propriedades para abri-lo.) 


3. Para definir um novo caminho e nome de arquivo no Inspetor de propriedades, clique no ícone de pasta 3 para navegar até o arquivo 
correto ou digite sobre o texto realçado. 


Se estiver atualizando uma referência de imagem e a nova imagem for exibida no tamanho incorreto, clique nos rótulos W e H no Inspetor 
de propriedades ou clique no botão Atualizar para redefinir os valores de altura e largura. 


4. Salve o arquivo. 


Conforme os links são corrigidos, suas entradas desaparecem da lista Verificador de links. Se uma entrada ainda aparecer na lista depois 
de você inserir um novo caminho ou nome de arquivo no Verificador de links (ou depois de salvar as alterações no Inspetor de 
propriedades), o Dreamweaver não poderá encontrar o novo arquivo e ainda considerará o link rompido. 


Mais tópicos da Ajuda 
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Barras de navegação 


Sobre barras de navegação 


m P use 
Sobre barras de navegação ERREMENE 
O recurso Barra de navegação está obsoleto no Dreamweaver CS5. 

A Adobe recomenda o uso do widget Barra de menus do Spry se você desejar criar uma barra de navegação. 


Mais tópicos da Ajuda 
Trabalho com o widget Barra de menus do Spry 


(65) ex-nc-sa ] 
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Vinculação 


Vinculação de arquivos e documentos 

Anexar comportamentos JavaScript a links 

Vincular documentos usando o Inspetor de propriedades 
Vincular documentos usando o ícone Apontar para arquivo 
Adicionar um link usando o comando Hiperlink 

Definir o caminho relativo de novos links 

Criar link para um local específico em um documento 
Criar um link de email 

Criar links nulos e de script 

Atualizar links automaticamente 

Alterar um link no site inteiro 

Testar links no Dreamweaver 


E q « P. iníci 
Vinculação de arquivos e documentos fics 


Antes de criar um link, você deve entender como funcionam caminhos absolutos, relativos a documentos e relativos à raiz do site. Você pode criar 
vários tipos de links em um documento: 


* Um link para outro documento ou para um arquivo, como um arquivo gráfico, de filme, PDF ou de som. 

* Um link de âncora nomeado, que salta para um local específico em um documento. 

e Um link de email, que cria uma nova mensagem de email em branco com o endereço do destinatário já preenchido. 

e Links nulos e de script, usados para anexar comportamentos a um objeto ou para criar um link que executa o código JavaScript. 


Você pode usar o Inspetor de propriedades e o ícone Apontar para arquivo para criar links de uma imagem, objeto ou texto para outro documento 
ou arquivo. 


O Dreamweaver cria os links para outras páginas no seu site usando caminhos relativos a documentos. Você também pode configurar o 
Dreamweaver para criar novos links usando caminhos relativos à raiz do site. 


Importante: Sempre salve um novo arquivo antes de criar um caminho relativo a documentos; esse tipo de caminho não é válido sem um ponto 
inicial definido. Se você criar um caminho relativo a documentos antes de salvar o arquivo, o Dreamweaver usará temporariamente um caminho 
absoluto começando com arquivo:// até o arquivo ser salvo; quando você salvar o arquivo, o Dreamweaver converterá o caminho arquivo:// em um 
caminho relativo. 


Para assistir a um tutorial sobre a criação de links, consulte www.adobe.com/go/vid0149 br. 


E É P. iníci 
Anexar comportamentos JavaScript a links inca 


Você pode anexar um comportamento a qualquer link de um documento. Avalie a possibilidade de usar os seguintes comportamentos ao inserir 
elementos vinculados em documentos: 


Definir texto da barra de status Determina o texto de uma mensagem e o exibe na barra de status, no canto inferior esquerdo da janela do 
navegador. Por exemplo, você pode usar esse comportamento para descrever o destino de um link na barra de status em vez de mostrar o URL 
associado. 


Abrir janela do navegador Abre um URL em uma nova janela. Você pode especificar as propriedades da nova janela, incluindo o nome, o 
tamanho e seus atributos (se pode ser redimensionada, se tem uma barra de menus, etc.). 

Menu de salto Edita um menu de salto. Você pode alterar a lista de menus, especificar um arquivo vinculado diferente ou alterar o local do 
navegador no qual o documento vinculado é aberto. 


Para o início 


Vincular documentos usando o Inspetor de propriedades 


Você pode usar o ícone de pasta do Inspetor de propriedades ou a caixa Link para criar links de uma imagem, objeto ou texto para outro 
documento ou arquivo. 


1. Selecione texto ou uma imagem na Visualização de design da janela Documento. 
2. Abra o Inspetor de propriedades (Janela > Propriedades) e execute um dos procedimentos a seguir: 


* Clique no ícone de pasta (D à direita da caixa Link para navegar até um arquivo e selecioná-lo. 
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O caminho até o documento vinculado aparece na caixa URL. Use o menu pop-up Em relação a na caixa de diálogo Selecionar arquivo 
HTML para escolher o tipo de caminho (em relação ao documento ou à raiz) e, em seguida, clique em Selecionar. O tipo de caminho 
selecionado é aplicado somente no link atual. (Você pode alterar a configuração padrão da caixa Em relação a para o site.) 


e Digite o caminho e o nome de arquivo do documento na caixa Link. 


Para vincular-se a um documento do seu site, insira um caminho relativo a um documento ou à raiz do site. Para vincular-se a um 
documento externo ao seu site, insira um caminho absoluto incluindo o protocolo (como http://). Você pode usar essa abordagem para 
inserir um link para um arquivo que ainda não foi criado. 


3. No menu pop-up Destino, selecione um local no qual o documento será aberto: 
e blank carrega o documento vinculado em uma nova janela do navegador não nomeada. 


e - parent carrega o documento vinculado no quadro pai ou na janela pai do quadro que contém o link. Se o quadro que contém o link não 
estiver aninhado, o documento vinculado será carregado na janela completa do navegador. 


e self carrega o documento vinculado no mesmo quadro ou janela do link. Esse destino é o padrão, normalmente não é necessário 
especificá-lo. 


e “top carrega o documento vinculado na janela completa do navegador, removendo todos os quadros. 


Se todos os links da sua página forem definidos para o mesmo destino, você pode especificar esse destino uma vez selecionando 
Inserir > HTML > Tags de cabeçalho > Base e selecionando as informações de destino. Para obter informações sobre quadros de 
destino, consulte Controle do conteúdo do quadro com links. 


Para o início 


Vincular documentos usando o ícone Apontar para arquivo 


1. Selecione texto ou uma imagem na Visualização de design da janela Documento. 
2. Siga um dos dois procedimentos abaixo para criar um link: 


* Arraste o ícone Apontar para arquivo & (ícone de destino) à direita da caixa Link no Inspetor de propriedades e aponte para uma 
âncora visível no documento atual, uma âncora visível em outro documento aberto, um elemento que tenha uma ID exclusiva atribuída a 
ele ou um documento no painel Arquivos. 


e Arraste a partir da seleção feita com shift e ponte para uma âncora visível no documento atual, uma âncora visível em outro documento 
aberto, um elemento que tenha uma ID exclusiva atribuída a ele ou um documento no painel Arquivos. 


Nota: Você pode se vincular a outro documento aberto somente se os documentos não estiverem maximizados na janela Documento. 
Para dispor os documentos lado a lado, selecione Janela > Em cascata ou Janela > Lado a lado. Ao apontar para um documento 
aberto, esse documento vai para o primeiro plano da tela enquanto você seleciona suas opções. 


Para o início 


Adicionar um link usando o comando Hiperlink 
O comando Hiperlink permite criar um link de texto para uma imagem, objeto ou outro documento ou arquivo. 


Coloque o ponto de inserção no documento onde você deseja que o link seja exibido. 
Siga um destes procedimentos para exibir a caixa de diálogo Inserir hiperlink: 


e Selecione Inserir > Hiperlink. 
e Na categoria Comum do painel Inserir, clique no botão Hiperlink. 


3. Insira o texto do link e, na caixa Link, insira o nome do arquivo para o qual o link será criado (ou clique no ícone de pasta (3 para procurar 
o arquivo). 


4. No menu pop-up Destino, selecione a janela na qual o arquivo deve ser aberto ou digite seu nome. 


Os nomes de todos os quadros nomeados no documento atual aparecem na lista pop-up. Se você especificar um quadro que não existe, a 
página vinculada será aberta em uma nova janela que tem o nome especificado. Você também pode selecionar um dos seguintes nomes 
de destino reservados: 


e blank carrega o arquivo vinculado em uma nova janela do navegador não nomeada. 


e | parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contém o link. Se o quadro que contém o 
link não estiver aninhado, o arquivo vinculado será carregado na janela de navegador em tamanho integral. 


e Self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino é o padrão, normalmente não é necessário 
especificá-lo. 


e “top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros. 


5. Na caixa de Índice de abas, insira um número para a ordem de abas. 
6. Na caixa Título, insira um título para o link. 


7. Na caixa Chave de acesso, insira um equivalente do teclado (uma letra) para selecionar o link no navegador. 
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8. Clique em OK. 


Eos E . E Para o início 
Definir o caminho relativo de novos links 


Por padrão, o Dreamweaver cria os links para outras páginas no seu site usando caminhos relativos a documentos. Para usar o caminho relativo 
à raiz do site, você deve primeiro definir uma pasta local no Dreamweaver escolhendo uma pasta raiz local para servir como o equivalente da raiz 
do documento em um servidor. O Dreamweaver usa essa pasta para determinar os caminhos relativos à raiz do site para arquivos. 


1. Selecione Site > Gerenciar sites. 


[º) 


. Na caixa de diálogo Gerenciar sites, clique duas vezes no seu site na lista. 


(9%) 


. Na caixa de diálogo Configuração de site, expanda as Configurações avançadas e selecione a categoria Informações locais. 


ES 


. Defina o caminho relativo de novos links selecionando a opção Documento ou Raiz do site. 


A alteração dessa configuração não converterá o caminho de links existentes depois de você clicar em OK. A configuração é aplicada 
somente nos novos links criados com o Dreamweaver. 


Nota: O conteúdo vinculado a um caminho relativo à raiz do site não aparece quando você visualiza documentos em um navegador local, 
a menos que você especifique um servidor de teste ou selecione a opção Visualizar utilizando o arquivo temporário em Editar > 
Preferências > Visualizar no navegador. Isso ocorre porque os navegadores não reconhecem raízes de site, diferente dos servidores. Para 
visualizar rapidamente o conteúdo vinculado aos caminhos relativos à raiz do site, coloque o arquivo em um servidor remoto e selecione 
Arquivo > Visualizar no navegador. 


5. Clique em Salvar. 


A configuração do novo caminho é aplicada somente no site atual. 


E a es Para o início 
Criar link para um local específico em um documento 


Você pode usar o Inspetor de propriedades para criar links para uma seção específica de um documento criando primeiro âncoras nomeadas. As 
âncoras nomeadas permitem definir marcadores em um documento, que normalmente são colocados em um tópico específico ou na parte 
superior de um documento. Em seguida, você cria links para essas âncoras nomeadas, que direcionam o visitante rapidamente para a posição 
especificada. 


A criação de um link para uma âncora nomeada é um processo de duas etapas. Primeiro, crie uma âncora nomeada e, em seguida, crie um link 
para a âncora nomeada. 


Nota: Você não pode colocar uma âncora nomeada em um elemento com posição absoluta (elemento AP). 


Criar uma âncora nomeada 
1. Na Visualização de design da janela Documento, coloque o ponto de inserção onde você deseja inserir a âncora nomeada. 


2. Siga um destes procedimentos: 
* Selecione Inserir > Âncora com nome. 
e Pressione Control + Alt + A (Windows) ou Command + Option + A (Macintosh). 
e Na categoria Comum do painel Inserir, clique no botão Âncora com nome. 
3. Na caixa Nome da âncora, insira um nome para a âncora e clique em OK. O nome da âncora não pode conter espaços. 
O marcador da âncora aparece no ponto de inserção. 


Nota: Se o marcador da âncora não for exibido, selecione Exibir > Auxílios visuais > Elementos invisíveis. 


Vincular para uma âncora nomeada 
1. Na Visualização de design da janela Documento, selecione um texto ou uma imagem a partir do qual um link será criado. 


2. Na caixa Link do Inspetor de propriedades, digite um sinal de número (&) e o nome da âncora. Por exemplo, para vincular-se a uma âncora 
chamada "top" no documento atual, digite top. Para vincular-se a uma âncora chamada "top" em um documento diferente da mesma 
pasta, digite nome do arquivo.htmlZtop. 

Nota: Os nomes de âncora diferenciam minúsculas de maiúsculas. 


Vincular-se a uma âncora nomeada usando o método de Apontar para arquivo 
1. Abra o documento que contém a âncora nomeada. 
Nota: Se a âncora não for exibida, selecione Exibir > Auxílios visuais > Elementos invisíveis para deixá-la visível. 


2. Na Visualização de design da janela Documento, selecione um texto ou uma imagem a partir do qual um link será criado. (Se o link for 
criado a partir de outro documento aberto, é necessário alternar para ele.) 


3. Siga um destes procedimentos: 


* Clique no ícone Apontar para arquivo & (ícone de destino) à direita da caixa Link no Inspetor de propriedades e arraste-o até a âncora 
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à qual você deseja se vincular: seja uma âncora no mesmo documento ou em outro documento aberto. 


e Arraste com a tecla Shift pressionada na janela Documento desde o texto ou a imagem selecionado até a âncora desejada: seja uma 
âncora no mesmo documento ou em outro documento aberto. 


E : é Para o início 
Criar um link de email 


Um link de email abre uma nova janela de mensagem em branco (usando o programa de email associado ao navegador do usuário) quando é 
clicado. Na janela da mensagem de email, a caixa Para é atualizada automaticamente com o endereço especificado no link de email. 


Criar um link de email usando o comando Inserir link de email 
1. Na Visualização de design da janela Documento, posicione o ponto de inserção onde você deseja que o link de email seja exibido ou 
selecione o texto ou a imagem que será exibido como link de email. 


2. Escolha uma destas opções para inserir o link: 
e Selecione Inserir > Link de email. 
e Na categoria Comum do painel Inserir, clique no botão Link de email. 


3. Na caixa Texto, digite ou edite o corpo do email. 
4. Na caixa Email, digite o endereço de email e clique em OK. 


Criar um link de email usando o Inspetor de propriedades 
1. Selecione texto ou uma imagem na Visualização de design da janela Documento. 
2. Na caixa Link do Inspetor de propriedades, digite mailto: seguido por um endereço de email. 


Não digite nenhum espaço entre o sinal de dois pontos e o endereço de email. 


Preenchimento automático da linha de assunto de um email 
1. Crie um link de email usando o Inspetor de propriedades como descrito acima. 
2. Na caixa Link do Inspetor de propriedades, adicione ?subject= após o email e digite um assunto após o sinal de igual. Não digite nenhum 
espaço entre o ponto de interrogação e o final do endereço de email. 
A entrada completa deve ser similar ao seguinte: 


mailto:someone(dyoursite.com? subject=Email do seu site 


p ' E Para o início 
Criar links nulos e de script 


Um link nulo é um link não designado. Use links nulos para anexar comportamentos em objetos ou texto em uma página. Por exemplo, você 
pode anexar um comportamento em um link nulo para que esse link troque uma imagem ou exiba um elemento absolutamente posicionado 
(elemento AP) quando o ponteiro for movido sobre o link. 


Os links de script executam o código JavaScript ou chamam uma função JavaScript e são úteis para fornecer aos visitantes informações 
adicionais sobre um item sem que eles precisem sair da página da Web atual. Os links de script também podem ser usados para realizar 
cálculos, validar formulários ou executar outras tarefas de processamento quando um visitante clica em um item específico. 


Criar um link nulo 
1. Selecione texto, uma imagem ou um objeto na Visualização de design da janela Documento. 


2. No Inspetor de propriedades, digite javascript:; (a palavra javascript seguida por um sinal de dois pontos e por um sinal de ponto-e-vírgula) 
na caixa Link. 


Criar links de script 
1. Selecione texto, uma imagem ou um objeto na Visualização de design da janela Documento. 


2. Na caixa Link do Inspetor de propriedades, digite javascript: seguido por algum código ou chamada de função JavaScript. Não digite 
nenhum espaço entre o sinal de dois pontos e o código ou chamada. 


é a ú Para o início 
Atualizar links automaticamente 


O Dreamweaver pode atualizar links para e de um documento sempre que você mover ou renomear o documento em um site local. Esse recurso 
funciona melhor quando você armazena o site inteiro (ou uma seção inteira) no disco local. O Dreamweaver não altera arquivos na pasta remota 
até você colocar os arquivos locais nessa pasta ou verificá-los no servidor remoto. 


Para agilizar o processo de atualização, o Dreamweaver pode criar um arquivo de cache para armazenar informações sobre todos os links da 
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pasta local. O arquivo de cache é atualizado de forma invisível à medida que você adiciona, altera ou exclui links do site local. 


Ativar atualizações automáticas de link 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
2. Na caixa de diálogo Preferências, selecione Geral na lista de categorias à esquerda. 


3. Na seção Opções do documento das preferências de Geral, selecione uma opção no menu pop-up Atualizar links ao mover arquivos. 
Sempre Atualiza automaticamente todos os links para e de um documento selecionado sempre que esse documento é movido ou 
renomeado. 


Nunca Não atualiza automaticamente todos os links para e de um documento selecionado quando esse documento é movido ou 
renomeado. 


Solicitar Exibe uma caixa de diálogo que lista todos os arquivos afetados pela alteração. Clique em Atualizar para atualizar os links nesses 
arquivos ou clique em Não atualizar para não alterar os arquivos. 


4. Clique em OK. 


Criar um arquivo de cache para o site 
1. Selecione Site > Gerenciar sites. 
2. Selecione um site e clique em Editar. 
3. Na caixa de diálogo Configuração de site, expanda as Configurações avançadas e selecione a categoria Informações locais. 
4. Na categoria Informações locais, selecione Ativar o cache. 
Na primeira vez em que você alterar ou excluir links para arquivos na pasta local depois de iniciar o Dreamweaver, o Dreamweaver 
solicitará o carregamento do cache. Se você clicar em Sim, o Dreamweaver carregará o cache e atualizará todos os links para o arquivo 


que acaba de ser alterado. Se você clicar em Não, a alteração será registrada no cache, mas o Dreamweaver não carregará o cache nem 
atualizará os links. 


O cache talvez demore alguns minutos para ser carregado em sites maiores porque o Dreamweaver deve determinar se o cache está 
atualizado comparando os carimbos de data/hora dos arquivos do site local com os carimbos de data/hora registrados no cache. Se você 
não tiver alterado nenhum arquivo fora do Dreamweaver, pode clicar com segurança no botão Parar quando for exibido. 


Recriar o cache 
*& No painel Arquivos, selecione Site > Avançado > Recriar o cache do site. 


E E . = Para o início 
Alterar um link no site inteiro 


Além de configurar o Dreamweaver para atualizar os links automaticamente sempre que um arquivo for movido ou renomeado, você pode alterar 
todos os links manualmente (incluindo os links de email, de FTP, nulos e de script) para que eles apontem para outro lugar. 


Essa opção é mais útil quando você deseja excluir um arquivo que está vinculado a outros arquivos, mas pode ser usada para outras finalidades. 
Por exemplo, imagine que você vincule as palavras "filmes deste mês” a /filmes/julho.html no site inteiro. Em 1º de agosto, você teria que alterar 
esses links para que apontassem para /filmes/agosto.html. 


1. Selecione um arquivo na Visualização local do painel Arquivos. 
Nota: Se estiver alterando um link de email, de FTP, nulo ou de script, você não precisa selecionar um arquivo. 
Selecione Site > Alterar link no site inteiro. 


Preencha as seguintes opções na caixa de diálogo Alterar link no site inteiro: 
Alterar todos os links para Clique no ícone de pasta |Ld para navegar até o arquivo de destino do qual você deseja se desvincular e 
selecioná-lo. Se estiver alterando um link de email, de FTP, nulo ou de script, digite o texto completo do link que está alterando. 


Em links para Clique no ícone de pasta (5 para navegar até o novo arquivo ao qual você deseja se vincular e selecioná-lo. Se estiver 
alterando um link de email, de FTP, nulo ou de script, digite o texto completo do link de substituição. 


4. Clique em OK. 


O Dreamweaver atualiza todos os documentos vinculados ao arquivo selecionado, fazendo com que eles apontem para o novo arquivo, 
usando o formato de caminho já usado no documento (por exemplo, se o caminho antigo era relativo ao documento, o novo caminho 
também deve ser relativo ao documento). 


Depois de alterar um link no site inteiro, o arquivo selecionado fica órfão (isto é, nenhum arquivo do disco local aponta para ele). Você pode 
excluí-lo com segurança sem quebrar nenhum link no site local do Dreamweaver. 


Importante: Como essas alterações ocorrem localmente, você deve excluir de modo manual o arquivo órfão correspondente na pasta 
remota e colocar ou verificar todos os arquivos nos quais os links foram alterados; caso contrário, os visitantes do site não observaram as 
mudanças. 


Para o início 
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Testar links no Dreamweaver 
Os links não estão ativos no Dreamweaver, isto é, você não pode abrir um documento vinculado clicando no link na janela Documento. 
*& Siga um destes procedimentos: 
* Selecione o link e selecione Modificar > Abrir página vinculada. 
e Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no link. 
Nota: O documento vinculado deve residir no disco local. 


Mais tópicos da Ajuda 
Tutorial sobre a criação de links 


(5) ex-nc-sa ) 


Avisos legais | Política de privacidade on-line 
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Menus de salto 


Sobre menus de salto 

Inserir um menu de salto 

Editar itens de menu de salto 

Solução de problemas de menus de salto 


RR 
Sobre menus de salto id 


Um menu de salto é um menu pop-up em um documento, visível aos visitantes do site, que lista os links para documentos ou arquivos. Você 
pode criar links para documentos no seu site, links para documentos em outros sites, links de email, links para gráficos ou links para qualquer 
tipo de arquivo que possa ser aberto em um navegador. 


Cada opção de um menu de salto é associada a um URL. Quando escolhem uma opção, os usuários são redirecionados (“saltam”) para o URL 
associado. Os menus de salto são inseridos no objeto de formulário Menu de salto. 


Um menu de salto pode conter três componentes: 


e (Opcional) Uma solicitação de seleção de menu, como uma descrição de categoria para os itens de menu ou instruções como "Escolha 
uma”. 


e (Obrigatório) Uma lista de itens de menu vinculados: um usuário seleciona uma opção e um documento ou arquivo vinculado é aberto. 


e (Opcional) Um botão Ir. 


« Para o início 
Inserir um menu de salto 


1. Abra um documento e coloque o ponto de inserção na janela Documento. 
2. Siga um destes procedimentos: 


* Selecione Inserir > Formulário > Menu de salto. 
e Na categoria Formulários do painel Inserir, clique no botão Menu de salto. 


3. Preencha a caixa de diálogo Inserir menu de salto e clique em OK. Veja uma lista parcial de opções: 
Botões de adição e subtração Clique no botão de adição para inserir um item; clique no botão de adição novamente para adicionar outro 
item. Para excluir um item, selecione-o e clique no botão de subtração. 


Botões de seta Selecione um item e clique nas setas para movê-lo para cima ou para baixo na lista. 


Texto Digite o nome de um item não nomeado. Se o menu incluir uma solicitação de seleção (como "Escolha uma”), digite-a aqui como o 
primeiro item de menu (nesse caso, você também deve escolher a opção Selecionar o primeiro item após a alteração do URL na parte 
inferior). 


Quando selecionado ir para URL Navegue até o arquivo de destino ou digite seu caminho. 


Abrir URLs em Especifique se deseja abrir o arquivo na mesma janela ou em um quadro. Se o quadro desejado não aparecer no menu, 
feche a caixa de diálogo Inserir menu de salto e nomeie o quadro. 


Inserir botão Ir após menu Selecione para inserir um botão Ir em vez de uma solicitação de seleção de menu. 


Selecionar o primeiro item após a alteração do URL Selecione se tiver inserido uma solicitação de seleção de menu ("Escolher uma”) 
como o primeiro item de menu. 


a ERR 
Editar itens de menu de salto PP RAN 


Você pode alterar a ordem dos itens no menu ou no arquivo vinculado a um item e adicionar, excluir ou renomear um item. 


Para alterar o local em que um arquivo vinculado deve ser aberto ou para adicionar ou alterar uma solicitação de seleção de menu, você deve 
aplicar o comportamento Menu de salto do painel Comportamentos. 

1. Abra o Inspetor de propriedades (Janela > Propriedades) se ainda não estiver aberto. 

2. Na Visualização de design da janela Documento, clique no objeto de menu de salto para selecioná-lo. 
3. No Inspetor de propriedades, clique no botão Listar valores. 
4 


. Use a caixa de diálogo Listar valores para fazer alterações nos itens de menu e clique em OK. 
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m Para o início 
Solução de problemas de menus de salto 


Depois que um usuário seleciona um item do menu de salto, não é possível selecionar esse item novamente se o usuário voltar à página ou se a 
caixa Abrir URLs em especificar um quadro. Existem duas maneiras de solucionar esse problema: 


e Use uma solicitação de seleção de menu, como uma categoria, ou uma instrução para o usuário, como “Escolha uma”. A solicitação de 
seleção de menu é remarcada automaticamente depois de cada seleção de menu. 


e Use um botão Ir, que permite ao usuário revisitar o link escolhido atualmente. Ao ser usado com um menu de salto, o botão Ir se transforma 
no único mecanismo que “salta” para levar o usuário ao URL associado à seleção do menu. A seleção de um item de menu no menu de 
salto não redireciona mais o usuário automaticamente para outra página ou quadro. 


Nota: Selecione somente uma dessas opções por menu de salto, na caixa de diálogo Inserir menu de salto, porque elas se aplicam a um 
menu de salto inteiro. 


Mais tópicos da Ajuda 


Avisos legais | Política de privacidade on-line 
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Mapas de imagem 


Sobre mapas de imagem 
Inserir mapas de imagem do cliente 
Modificar pontos ativos do mapa de imagem 


RES 
Sobre mapas de imagem EPL RMES 


Um mapa de imagem é uma imagem que foi dividida em regiões chamadas pontos ativos; quando o usuário clica em um ponto ativo, ocorre uma 
ação (por exemplo, um novo arquivo é aberto). 


Os mapas de imagem do cliente armazenam as informações do link de hipertexto no documento HTML, não é um arquivo de mapa separado 
assim como fazem os mapas de imagem do servidor. Quando um visitante do site clica em um ponto ativo da imagem, o URL associado é 
enviado diretamente para o servidor. Desse modo, os mapas de imagem do cliente são mais rápidos do que os mapas de imagem do servidor 
porque o servidor não precisa interpretar a origem do clique. Os mapas de imagem do cliente são suportados pelo Netscape Navigator 2.0 e 
posterior, pelo NCSA Mosaic 2.1 e 3.0 e por todas as versões do Internet Explorer. 


O Dreamweaver não altera referências aos mapas de imagem do servidor nos documentos existentes; você pode usar mapas de imagem do 
cliente e do servidor no mesmo documento. No entanto, os navegadores compatíveis com os dois tipos de mapas de imagem dão prioridade aos 
mapas de imagem do cliente. Para incluir um mapa de imagem do servidor em um documento, você deve gravar o código HTML adequado. 


é z , Para o início 
Inserir mapas de imagem do cliente 


Ao inserir um mapa de imagem do cliente, crie uma área de ponto ativo e defina um link que abra quando o usuário clicar na área do ponto ativo. 
Nota: Você pode criar várias áreas de ponto ativo, mas elas devem fazer parte do mesmo mapa de imagem. 

1. Najanela Documento, selecione a imagem. 

2. No Inspetor de propriedades, clique na seta de expansão, no canto inferior direito, para exibir todas as propriedades. 


3. Na caixa Nome do mapa, insira um nome exclusivo para o mapa de imagem. Se estiver usando vários mapas de imagem no mesmo 
documento, verifique se cada mapa tem um nome exclusivo. 


4. Para definir as áreas do mapa de imagem, siga um destes procedimentos: 
e Selecione a ferramenta de círculo De arraste o ponteiro sobre a imagem para criar um ponto ativo circular. 
* Selecione a ferramenta de retângulo [7] e arraste o ponteiro sobre a imagem para criar um ponto ativo retangular. 


* Selecione a ferramenta de polígono Te defina um ponto ativo de forma irregular clicando uma vez para cada ponto de canto. Clique 
na ferramenta seta para fechar a forma. 


Depois de criar o ponto ativo, o Inspetor de propriedades do ponto ativo é exibido. 


5. Na caixa Link do Inspetor de propriedades de ponto ativo, clique no ícone de pasta [), navegue até o arquivo que deve ser aberto quando 
o usuário clica no ponto ativo e selecione-o, ou digite o caminho. 


6. No menu pop-up Destino, selecione a janela na qual o arquivo deve ser aberto ou digite seu nome. 
Os nomes de todos os quadros nomeados no documento atual aparecem na lista pop-up. Se você especificar um quadro que não existe, a 


página vinculada será carregada em uma nova janela que tem o nome especificado. Você também pode selecionar um dos seguintes 
nomes de destino reservados: 


- blank carrega o arquivo vinculado em uma nova janela do navegador não nomeada. 


* parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contém o link. Se o quadro que contém o 
link não estiver aninhado, o arquivo vinculado será carregado na janela de navegador em tamanho integral. 


* self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino é o padrão, normalmente não é necessário 
especificá-lo. 


e “top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros. 
Nota: A opção de destino só é disponibilizada quando o ponto ativo selecionado contém um link. 


7. Na caixa Alt, digite o texto alternativo a ser exibido nos navegadores somente de texto ou nos navegadores que fazem download de 
imagens manualmente. Alguns navegadores exibem esse texto como uma dica de ferramenta quando o usuário passa o ponteiro pelo ponto 
ativo. 


8. Repita as etapas de 4 a 7 para definir pontos ativos adicionais no mapa de imagem. 
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9. Quando terminar de mapear a imagem, clique em uma área em branco do documento para alterar o Inspetor de propriedades. 


Modificar pontos ativos do mapa de imagem dia 


Você pode editar com facilidade os pontos ativos criados em um mapa de imagem. Você pode mover uma área de ponto ativo, redimensionar 
pontos ativos ou mover um ponto ativo para frente ou para trás em um elemento absolutamente posicionado (elemento AP). 


Você também pode copiar uma imagem com pontos ativos de um documento para outro ou copiar um ou mais pontos ativos de uma imagem e 
colá-los em outra imagem; os pontos ativos associados à imagem também são copiados no novo documento. 


Selecionar vários pontos ativos em um mapa de imagem 
1. Use a ferramenta Ponto ativo de ponteiro para selecionar um ponto ativo. 


2. Siga um destes procedimentos: 
e Clique com a tecla Shift nos outros pontos ativos que deseja selecionar. 


e Pressione Control + A (Windows) ou Command + A (Macintosh) para selecionar todos os pontos ativos. 


Mover um ponto ativo 
1. Use a ferramenta Ponto ativo de ponteiro para selecionar o ponto ativo. 


2. Siga um destes procedimentos: 
e Arraste o ponto ativo até uma nova área. 
e Use a tecla Control e as teclas de seta para mover um ponto ativo 10 pixels na direção selecionada. 


e Use as teclas de seta para mover um ponto ativo 1 pixel na direção selecionada. 


Redimensionar um ponto ativo 
1. Use a ferramenta Ponto ativo de ponteiro k para selecionar o ponto ativo. 


2. Arraste uma alça do seletor de ponto ativo para alterar o tamanho ou a forma do ponto ativo. 


(69) ex-ne-sa ] 


Avisos legais | Política de privacidade on-line 


448 


Sobre vinculação e navegação 


Sobre links 
Caminhos absolutos, relativos a documentos e relativos à raiz do site 


Para o início 


Sobre links 


Depois de configurar um site do Dreamweaver para armazenar os documentos do seu site e de criar páginas HTML, você pode criar links dos 
seus documentos para outros documentos. 


O Dreamweaver fornece diversas maneiras para criar links com documentos, imagens, arquivos multimídia ou softwares para download. Você 
pode estabelecer links para qualquer texto ou imagem em qualquer lugar de um documento, incluindo texto ou imagens de um cabeçalho, lista, 
tabela, elemento com posição absoluta (elemento PA) ou quadro. 


Existem diversas maneiras de criar e gerenciar links. Alguns designers da Web preferem criar links com páginas ou arquivos não existentes ao 
trabalharem, enquanto outros preferem criar todos os arquivos e páginas primeiro e depois adicionar os links. Outro modo de gerenciar links é 
criar páginas de alocador de espaço, nas quais você pode adicionar e testar links antes de concluir todas as páginas do seu site. 


= É " q E a P iníci 
Caminhos absolutos, relativos a documentos e relativos à raiz do site ed 


Para criar links, é essencial conhecer o caminho do arquivo entre os documentos ou ativos de origem e de destino que estão sendo vinculados. 


Cada página da Web tem um endereço exclusivo, chamado de Localizador uniforme de recursos (URL). No entanto, ao criar um link local (um 
link de um documento com outro no mesmo site), normalmente não é necessário especificar o URL inteiro do documento que está sendo 
vinculado; em vez disso, especifique um caminho relativo do documento atual ou da pasta raiz do site. 


Existem três tipos de caminhos de link: 
e Caminhos absolutos (como http:/Avww.adobe.com/support/dreamweaver/contents.html). 
* Caminhos relativos a documentos (como dreamweaver/contents.html). 
e Caminhos relativos à raiz do site (como /support/dreamweaver/contents.html). 
Usando o Dreamweaver, você pode selecionar com facilidade o tipo de caminho de documento a ser criado para seus links. 


Nota: É melhor usar o tipo de link que você prefere e com o qual está mais familiarizado, seja em relação à raiz do site ou ao documento. 
Navegar pelos links, ao contrário de digitar os caminhos, assegura que você sempre acesse o caminho correto. 


Caminhos absolutos 

Os caminhos absolutos fornecem o URL completo do documento vinculado, incluindo o protocolo a ser usado (normalmente http:// para páginas 
da Web), por exemplo, http:/Avww.adobe.com/support/dreamweaver/contents.html. Para um ativo de imagem, o URL completo deve ter a seguinte 
aparência: http:/Avww.adobe.com/support/dreamweaver/images/image1.jpg. 


Você deve usar um caminho absoluto para vincular-se a um documento ou ativo em outro servidor. Você também pode usar caminhos absolutos 
para links locais (com documentos no mesmo site), mas essa abordagem não é recomendada: se o site for movido para outro domínio, todos os 
links locais de caminho absoluto serão corrompidos. Usar caminhos relativos para links locais também aumenta a flexibilidade, caso você tenha 
que mover arquivos no seu site. 


Nota: Ao inserir imagens (não links), você pode usar um caminho absoluto para uma imagem em um servidor remoto (isto é, uma imagem que 
não está disponível na unidade de disco rígido local). 


Caminhos relativos a documentos 

Na maioria dos sites, os caminhos relativos a documentos normalmente são mais adequados para links locais. Eles são úteis especialmente 
quando o documento atual e o documento ou ativo vinculado estão na mesma pasta e provavelmente permanecerão juntos. Você também pode 
usar um caminho relativo a documentos para vincular-se a um documento ou ativo em outra pasta, especificando o caminho através da hierarquia 
de pastas do documento atual até o documento vinculado. 


A ideia básica dos caminhos relativos a documentos é omitir a parte do caminho absoluto que é igual para o documento atual e o documento ou 
ativo vinculado, fornecendo somente a parte diferente do caminho. 


Por exemplo, imagine que você tenha um site com a seguinte estrutura: 
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meu site(pasta raiz) 


suporte 


conteúdo.html 
horas.html 


recursos 


dicas.html 
produtos 


catálogo.html 


índice.html (home page) 


Para vincular conteúdo.html com horas.html (ambos na mesma pasta), use o caminho relativo horas.html. 


Para vincular de contents.html a tips.html (na subpasta recursos), use o caminho relativo resources/tips.html. Em cada barra (/), você desce 
um nível na hierarquia de pastas. 


Para vincular de contents.html a index.html (na pasta pai, um nível acima de contents.html), use o caminho relativo ../index.html. Dois pontos 
e uma barra (../), move um nível acima na hierarquia de pastas. 


Para vincular de contents.html a catalog.html (em uma subpasta diferente da pasta pai), use o caminho relativo ../products/catalog.html. 
Aqui, ../ move acima para a pasta pai, e produtos/ move abaixo para a subpasta produtos. 


Ao mover arquivos como um grupo (por exemplo, ao mover uma pasta inteira, de modo que todos os arquivos dessa pasta mantenham os 
mesmos caminhos relativos entre si), você não precisa atualizar os links relativos a documentos entre esses arquivos. No entanto, ao mover 
um arquivo individual que contém links relativos a documentos ou um arquivo individual de destino de um link relativo a documentos, você 
precisa atualizar esses links. (Se você mover ou renomear arquivos usando o painel Arquivos, o Dreamweaver atualizará todos os links 
relevantes automaticamente.) 


Caminhos relativos à raiz do site 

Os caminhos relativos à raiz do site descrevem o caminho da pasta raiz do site até um documento. Você pode usar esses caminhos se estiver 
trabalhando em um grande site que usa vários servidores ou um servidor que hospeda vários sites. No entanto, se você não estiver familiarizado 
com esse tipo de caminho, use os caminhos relativos a documentos. 


Um caminho relativo à raiz do site começa com uma barra, que indica a pasta raiz do site. Por exemplo, /suporte/dicas.html é um caminho relativo 
à raiz do site até um arquivo (dicas.html) da subpasta suporte da pasta raiz do site. 


Um caminho relativo à raiz do site geralmente é a melhor maneira de especificar links se você mover com frequência arquivos HTML de uma 
pasta para outra no site. Ao mover um documento que contém links relativos à raiz do site, você não precisar alterar os links, pois eles são 
relativos à raiz do site, não ao documento; por exemplo, se os arquivos HTML usam links relativos à raiz do site para arquivos dependentes 
(como imagens) e um desses arquivos for movido, os links do arquivo dependente em questão ainda serão válidos. 


No entanto, ao mover ou renomear os documentos de destino de links relativos à raiz do site, você deve atualizar esses links, mesmo que os 
caminhos dos documentos entre si não tenham sido alterados. Por exemplo, se você mover uma pasta, deverá atualizar todos os links relativos à 
raiz do site para os arquivos dessa pasta. (Se você mover ou renomear arquivos usando o painel Arquivos, o Dreamweaver atualizará todos os 
links relevantes automaticamente.) 


Mais tópicos da Ajuda 
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Codificação 


Gravação e edição do código 


Dicas de código 

Dicas de código específicas do site 

Inserir código com a Barra de ferramentas de codificação 
Inserção de código com o painel Inserir 

Inserção de tags com o Seletor de tags 

Inserção de comentários HTML 

Cópia e colagem do código 

Editar tags com os editores de tags 

Editar código com o menu de contexto Codificação 
Edição de uma tag de linguagem de servidor com o Inspetor de propriedades 
Recuo dos blocos de código 

Navegação no código relacionado 

Acessar a uma função JavaScript ou VBScript 

Extrair JavaScript 

Trabalho com snippets de código 

Procurar tags, atributos ou texto no código 

Salvamento e memorização de padrões de pesquisa 

Uso do material de referência a linguagem 

Impressão do código 


Para o início 


Dicas de código 


O recurso de dicas de código ajuda a inserir e editar o código rapidamente e sem erros. Conforme você digita os caracteres na Visualização de 
código, você vê uma lista de candidatos que completam automaticamente a sua entrada. Por exemplo, ao digitar o primeiro caractere de uma tag, 
atributo ou nome de propriedade CSS, você vê uma lista de opções que começam com esses caracteres. Esse recurso simplifica a inserção e 
edição de códigos. Você também pode usar esse recurso para ver os atributos disponíveis para uma tag, os parâmetros disponíveis para uma 
função ou os métodos disponíveis para um objeto. 


As dicas de código ficam disponíveis para vários tipos de código. Quando você digita o caractere inicial de um tipo de código em particular, você 
vê uma lista de candidatos apropriados. Por exemplo, para exibir uma lista de dicas de códigos para nomes de tags HTML, digite um colchete 
angular direito (<). De forma similar, para exibir dicas de código JavaScript, digite um ponto (operador ponto) após um objeto. 


Para obter os melhores resultados, especialmente ao usar as dicas de códigos para funções e objetos, defina a opção Atraso na caixa de 
diálogo de preferências Dicas de código para O segundos. 


O recurso de dica de código também reconhece classes personalizadas de JavaScript que não foram compiladas na linguagem. Você mesmo 
pode gravar essas classes personalizadas e adicioná-las através das bibliotecas de terceiros, como Prototype. 


A lista de dicas de código desaparece quando você pressiona Backspace (Windows) ou Delete (Macintosh). 
Para assistir a um tutorial em vídeo sobre dicas de códigos, consulte www.adobe.com/go/lrvid4048 dw br. 


Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre o suporte de JavaScript no Dreamweaver, consulte 
www.adobe.com/go/dw10Ojavascript br. 


Suporte a idiomas e tecnologias 
O Dreamweaver suporta dicas de códigos para os seguintes idiomas e tecnologias: 


e Adobe ColdFusion 

e Ajax 

e ASP JavaScript 

e ASP.NET C& 

e ASP.NET VB 

e ASP VBScript 

e CSS2 e CSS3 

* DOM (Modelo de objeto do documento) 
« HTML4 e HTML5 
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e jQuery (CS5.5 e posterior) 

e JavaScript (inclui dicas de classe personalizada) 
e JSP 

- PHP MySQL 


* Spry 


Exibição de um menu de dicas de código 
O menu de dicas de códigos aparece automaticamente conforme você digita na Visualização de código. Mas você também pode exibir 
manualmente o menu de dicas de códigos, sem digitar. 


1. Na Visualização de código (Janela > Código), coloque o ponto de inserção dentro de uma tag. 


2. Pressione Control+Barra de espaços. 


Inserção de código na Visualização de código usando dicas de códigos 
1. Digite o início de uma parte do código. Por exemplo, para inserir uma tag, digite um colchete angular direito (<). Para inserir um atributo, 
coloque o ponto de inserção imediatamente após um nome de tag e pressione a Barra de espaços. 


Uma lista de itens (como nomes de tag ou de atributo) é exibida. 


Para fechar a lista a qualquer momento, pressione Esc. 
2. Role pela lista usando a barra de rolagem ou as teclas de seta para cima e para baixo. 


3. Para inserir um item da lista, clique duas vezes nele ou selecione-o e pressione Enter (Windows) ou Return (Macintosh). 
Se um estilo CSS recém-criado não aparecer em uma lista de dicas de código de estilos CSS, selecione Atualizar lista de estilos na lista 
de dicas de código. Se a Visualização de design estiver visível, algumas vezes um código inválido aparece temporariamente na 
Visualização de design depois que você seleciona Atualizar lista de estilos. Para remover aquele código inválido da Visualização de 
design, pressione F5 para atualizar após concluir a inserção do estilo. 


4. Para inserir uma tag de finalização, digite </ (barra). 
Nota: Por padrão, o Dreamweaver determina quando é necessário fechar uma tag e a insere automaticamente. Você pode alterar esse 
comportamento padrão de forma que o Dreamweaver insira uma tag de finalização depois que você digitar o colchete angular final (>) da 
tag de abertura. Como alternativa, o comportamento padrão pode ser não inserir tag nenhuma. Selecione Editar > Preferências > Dicas de 
código e, em seguida, selecione uma das opções Tags de finalização. 


Edição de uma tag usando dicas de código 


e Para substituir um atributo por um atributo diferente, exclua o atributo e seu valor. Em seguida, acrescente um atributo e seu valor, como 
descrito no procedimento anterior. 


e Para alterar um valor, exclua o valor e adicione outro valor conforme descrito no procedimento anterior. 


Atualização de dicas de códigos JavaScript 

O Dreamweaver atualiza automaticamente a lista de dicas de códigos disponíveis conforme você trabalha em arquivos JavaScript. Por exemplo, 
suponha que você está trabalhando em um arquivo HTML principal e alterne para um arquivo JavaScript para fazer uma alteração. Essa 
alteração vai refletir na lista de dicas de códigos quando você retornar ao arquivo HTML principal. Entretanto, a atualização automática só 
funciona se você editar os arquivos JavaScript no Dreamweaver. 


Se você editar os arquivos JavaScript fora do Dreamweaver, pressione Control+ponto para atualizar as dicas de códigos JavaScript. 


Dicas de códigos e erros de sintaxe 

Algumas vezes, as dicas de códigos não funcionam adequadamente se o Dreamweaver detectar erros de sintaxe no seu código. O Dreamweaver 
alerta sobre os erros de sintaxe exibindo as informações a respeito em uma barra na parte superior da página. A Barra de informações de erro de 
sintaxe exibe a primeira linha do código onde o Dreamweaver encontrou o erro. Conforme você corrige o erro, o Dreamweaver continua a exibir 
qualquer outro erro que ocorra posteriormente. 


O Dreamweaver fornece ajuda adicional através do realce (em vermelho) dos números das linhas onde os erros de sintaxe ocorreram. O realce 
aparece na Visualização de código do arquivo que contém o erro. 


O Dreamweaver exibe os erros de sintaxe não só para a página atual, mas também para as páginas relacionadas. Por exemplo, suponha que 
você está trabalhando em uma página HTML que usa um arquivo JavaScript incluído. Se o arquivo incluído contiver um erro, o Dreamweaver 
também exibe um alerta para aquele arquivo JavaScript. Você pode abrir facilmente o arquivo relacionado que contém o erro clicando em seu 
nome na parte superior do documento. 


Você pode desativar a Barra de informações de erro de sintaxe clicando no botão Alertas de erro de sintaxe na Barra de ferramentas de 
codificação. 
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Definir preferências de dicas de código 

Você pode alterar as preferências padrão das dicas de códigos. Por exemplo, se não quiser mostrar os nomes de propriedades CSS ou as dicas 
de códigos Spry, você pode desmarcá-los nas preferências de dicas de códigos. Você também pode definir preferências para o tempo de atraso 
e o fechamento de tags nas dicas de código. 


Mesmo se as dicas de código estiverem desativadas, você ainda poderá exibir uma dica pop-up na Visualização de código pressionando 
Control+Barra de espaços. 


1. Selecione Editar > Preferências. 
2. Selecione Dicas de código na lista Categoria à esquerda. 


3. Defina uma das seguintes opções: 
Tags de finalização Especifica como o Dreamweaver deve inserir tags de fechamento. Por padrão, o Dreamweaver insere a tag de 
finalização automaticamente após digitar os caracteres </. Você pode alterar esse comportamento padrão para que a tag de finalização 
seja inserida depois que você digitar o colchete angular final (>) da tag de abertura ou para que nenhuma tag de finalização seja inserida. 


Ativar dicas de código Exibe as dicas de código enquanto você digita o código na Visualização de código. Arraste o controle deslizante 
Atraso para definir o tempo em segundos antes que as dicas apropriadas sejam exibidas. 


Ativar dicas de ferramentas de descrição Exibe uma descrição extensa (se disponível) da dica de código selecionada. 


Menus Define exatamente o tipo de dicas de código que deve ser exibido enquanto você digita. Você pode usar todos ou alguns menus. 


a de ade Sê: ã P. iníci 
Dicas de código específicas do site REDE 


O Dreamweaver CS5 permite aos desenvolvedores trabalhar com Joomla, Drupal, Wordpress ou outras estruturas e exibir dicas de código PHP 
quando eles gravam na Visualização de código. Para exibir essas dicas de código, primeiro é necessário criar um arquivo de configuração usando 
a caixa de diálogo Dicas de código específicas do site. A configuração informa ao Dreamweaver o local para procurar as dicas de código 
específicas ao seu site. 


Para assistir a um tutorial em vídeo sobre como trabalhar com dicas de código específicas do site, consulte 
www.adobe.com/go/learn dw commi3 br. 


Criar o arquivo de configuração 
Use a caixa de diálogo Dicas de código específicas do site para criar um arquivo de configuração necessário para exibir as dicas de código no 
Dreamweaver. 


Por padrão, o Dreamweaver armazena o arquivo de configuração no diretório do Adobe Dreamweaver 
CS5iconfiguraçãoiCompartilhadolDinâmicolPredefinições. 


Nota: As dicas de código que você criar são específicas para o site selecionado no painel Arquivos do Dreamweaver. Para exibir as dicas de 
código, a página em que você está trabalhando deve residir no site selecionado atual. 


1. Selecionar site > Dicas de código específicas do site. 


Por padrão, o recurso Dicas de código específicas do site rastreia o site para determinar qual estrutura do Sistema de gerenciamento de 
conteúdo (CMS) você está usando. O Dreamweaver, por padrão, oferece suporte a três estruturas: Drupal, Joomla e Wordpress. 


Os quatro botões à direita do menu pop-up Estrutura permitem que você importe, salve, renomeie ou exclua estruturas. 
Nota: Não é possível excluir ou renomear as estruturas padrão existentes. 


2. Na caixa de texto sub-raiz, especifique a pasta de sub-raiz em que você armazena os arquivos de estruturas. É possível clicar no ícone de 
pasta próximo à caixa de texto para ir ao local dos arquivos de estrutura. 


O Dreamweaver exibe uma estrutura em árvore de arquivo das pastas que contém seus arquivos de estrutura. Se as pastas e/ou arquivos 
que deseja rastrear estiverem abertas, você deverá clicar em OK para executar o rastreamento. Se deseja personalizar o rastreamento, 
você deve avançar as próximas etapas. 


3. Clique no botão de adição (+) acima da janela Arquivos para selecionar um arquivo ou pasta que você deseja adicionar ao rastreamento. 
Na caixa de diálogo Adicionar arquivos/pastas, é possível especificar extensões de arquivo particulares que você deseja incluir. 


Nota: A especificação de extensões de arquivo particulares acelera o processo de rastreamento. 


4. Para remover arquivos do rastreamento, selecione os arquivos que você não deseja rastrear e clique no botão de subtração (-) acima da 
janela Arquivos. 


Nota: Se a estrutura selecionada for Drupal ou Joomla, a caixa de diálogo Dicas de código específicas do site exibirá um caminho 
adicional para um arquivo na pasta de configuração do Dreamweaver. Não exclua isto—ele é necessário para o uso destas estruturas. 


5. Para personalizar como o recurso Dicas de código específicas do site trata um arquivo ou pasta particular, selecione-a da lista e siga um 
destes procedimentos: 


* Selecione Rastrear esta pasta para incluir a pasta selecionada no rastreamento. 


* Selecione Repetido para incluir todos os arquivos e pastas no diretório selecionado. 
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e Clique no botão Extensões para abrir a caixa de diálogo Localizar extensões em que é possível especificar as extensões de arquivo que 
você deseja incluir no rastreamento de um arquivo ou pasta particular. 


Salvar estrutura do site 
É possível salvar a estrutura personalizada do site que você criou na caixa de diálogo Dicas de código específicas do site. 


1. Crie a estrutura de arquivos e pastas como você desejar, adicionando ou removendo arquivos e pastas quando necessário. 
2. Clique no botão Salvar estrutura no canto superior direito da caixa de diálogo. 
3. Especifique um nome para a estrutura do site e clique em Salvar. 
Nota: Se o nome que você especificou já estiver em uso, o Dreamweaver solicitará um nome diferente ou a confirmação de que você deseja 


substituir a estrutura com o mesmo nome. Não é possível substituir qualquer uma das estruturas padrão. 


Renomear estruturas do site 


Ao renomear a estrutura do site, lembre-se de que você não pode usar os nomes de qualquer uma das três estruturas do site padrão ou a 
palavra personalizada”. 


1. Exiba a estrutura que você deseja renomear. 
2. Clique no botão do ícone Renomear estrutura no canto superior direito da caixa de diálogo. 
3. Especifique um novo nome para a estrutura do site e clique em Renomear. 
Nota: Se o nome que você especificou já estiver em uso, o Dreamweaver solicitará um nome diferente ou a confirmação de que você deseja 


substituir a estrutura com o mesmo nome. Não é possível substituir qualquer uma das estruturas padrão. 


Adicionar arquivos ou pastas a uma estrutura do site 


É possível adicionar quaisquer arquivos ou pastas que estão associadas à estrutura. Após isso, você pode especificar as extensões de arquivos 
desejadas para o rastreamento. (Consulte a próxima seção). 


1. Clique no botão de adição (+) acima da janela Arquivos para abrir a caixa de diálogo Adicionar arquivo/pasta. 


2. Na caixa de texto Adicionar arquivo/pasta, digite o caminho para o arquivo ou pasta que você deseja adicionar. Também é possível clicar no 
ícone de pasta próximo à caixa de texto para ir a um arquivo ou pasta. 


3. Clique no botão de adição (+) acima da janela Extensões para especificar as extensões de arquivo dos arquivos que você deseja rastrear. 
Nota: A especificação de extensões de arquivo particulares acelera o processo de rastreamento. 


4. Clique em Adicionar. 


Rastrear um site em busca de extensões de arquivo 
Use a caixa de diálogo Localizar extensões para exibir e editar extensões de arquivo que estão incluídas na estrutura do site. 


1. Na caixa de diálogo Dicas de código específicas do site, clique no botão Extensões. 
A caixa de diálogo Localizar extensões lista as extensões atuais possíveis de se rastrear. 
2. Para adicionar outra extensão à lista, clique no botão de adição (+) acima da janela Extensões. 


3. Para excluir uma extensão da lista, clique no botão de subtração (-). 


ê es sis sê Para o início 
Inserir código com a Barra de ferramentas de codificação 


1. Verifique se você está na Visualização de código (Exibir > Código). 
2. Posicione o ponto de inserção no código ou selecione um bloco de código. 
3. Clique em um botão na Barra de ferramentas de codificação ou selecione um item em um menu pop-up da barra de ferramentas. 


Para descobrir a função de cada botão, posicione o ponteiro sobre ele até que seja exibida uma dica de ferramenta. Por padrão, Barra de 
ferramentas de codificação exibe os seguintes botões: 


Documentos abertos Lista os documentos abertos. Quando você seleciona um documento aberto, ele é exibido na janela Documento. 
Exibir Navegador de código Exiba o Navegador de código. Para obter mais informações, consulte Navegação no código relacionado. 


Recolher tag completa Recolhe o conteúdo entre um conjunto de tags de abertura e finalização (por exemplo, o conteúdo entre <table> e 
</table>). Você deve colocar o ponto de inserção na tag de abertura ou finalização e clicar no botão Recolher tag completa para recolher a 
tag. 
Também é possível recolher o código fora de uma tag completa colocando o ponto de inserção em uma tag de abertura ou finalização, e 
mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a tecla Option (Macintosh) enquanto clica no botão Recolher tag 
completa. Além disso, mantendo pressionada a tecla Control enquanto clica neste botão, você desativará o recurso de “recolhimento 
inteligente” a fim de que o Dreamweaver não ajuste o conteúdo recolhido fora das tags completas. Para obter mais informações, 
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consulte Sobre o recolhimento de código. 


Recolher seleção Recolhe o código selecionado. 
Você também pode recolher o código fora de uma seleção mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a 
tecla Option (Macintosh) enquanto clica no botão Recolher seleção. Além disso, pressione a tecla Control enquanto clica neste botão 
para desativar o recurso de “recolhimento inteligente”, a fim de que você possa recolher exatamente o que selecionou sem nenhuma 
intervenção do Dreamweaver. Para obter mais informações, consulte Sobre o recolhimento de código. 


Expandir tudo Restaura todo o código recolhido. 


Selecionar tag-mãe Seleciona o conteúdo e as tags de abertura e finalização delimitadoras da linha em que você colocou o ponto de 
inserção. Se você clicar repetidamente neste botão e as tags estiverem balanceadas, o Dreamweaver acabará selecionando as tags html e 
Ihtml mais externas. 


Ajustar chaves Seleciona o conteúdo e parênteses delimitadores, as chaves ou os colchetes da linha em que você colocou o ponto de 
inserção. Se você clicar repetidamente neste botão e os símbolos delimitadores estiverem balanceados, o Dreamweaver acabará 
selecionando as chaves, os parênteses ou os colchetes mais externos no documento. 


Números de linha Permite ocultar ou mostrar números no início de cada linha de código. 
Realçar código inválido Realça o código inválido em amarelo. 


Alertas de erro de sintaxe na barra de informações Ativa ou desativa uma barra de informações na parte superior da página que alerta 
sobre erros de sintaxe. Quando o Dreamweaver detecta um erro de sintaxe, a barra de informações de erro de sintaxe especifica a linha do 
código onde o erro ocorre. Além disso, o Dreamweaver realça o número da linha do erro na lateral esquerda do documento na Visualização 
de código. A barra de informações é ativada por padrão, mas aparece somente quando o Dreamweaver detecta erros de sintaxe na 
página. 

Aplicar comentário Permite delimitar o código selecionado entre tags de comentário ou abrir novas tags de comentário. 


e Aplicar comentário HTML delimita o código selecionado com <!-- e --> ou abre uma nova tag caso nenhum código tenha sido 
selecionado. 


e Aplicar comentário // insere // no início de cada linha do código CSS ou JavaScript selecionado, ou insere uma tag // única caso nenhum 
código tenha sido selecionado. 


e Aplicar /* */ delimita o código CSS ou JavaScript selecionado com /* e */. 


e Aplicar comentário ' destina-se a código do Visual Basic. Insere uma aspa simples no início de cada linha de um script do Visual Basic 
ou insere uma aspa simples no ponto de inserção caso nenhum código tenha sido selecionado. 


e Quando você está trabalhando em um arquivo ASP, ASP.NET, JSP, PHP ou ColdFusion e seleciona a opção Aplicar comentário de 
servidor, o Dreamweaver detecta automaticamente a tag de comentário correta e a aplica à seleção. 


Remover comentário Remove as tags de comentário do código selecionado. Se uma seleção incluir comentários aninhados, somente as 
tags de comentário externas serão removidas. 


Colocar tag ao redor Coloca a tag selecionada ao redor do código selecionado no Quick Tag Editor. 


Snippets recentes Permite inserir um snippet de código recentemente utilizado do painel Snippets. Para obter mais informações, consulte 
Trabalho com snippets de código. 


Mover ou converter CSS Permite mover a CSS para outro local ou converter a CSS inline em regras CSS. Para obter mais informações, 
consulte Movimentação/exportação de regras CSS e Conversão da CSS inline em uma regra CSS. 


Recuar código Desloca a seleção para a direita. 
Diminuir recuo do código Desloca a seleção para a esquerda. 


Formatar código de origem Aplica os formatos de código anteriormente especificados ao código selecionado ou à página inteira, caso 
nenhum código tenha sido selecionado. Você também pode definir rapidamente as preferências de formatação de código selecionando 
Configurações de formatação de código no botão Formatar código de origem ou editar as bibliotecas de tags selecionando Editar 
bibliotecas de tag. 


O número de botões disponíveis na Barra de ferramentas de codificação varia de acordo com o tamanho da Visualização de código na 
janela Documento. Para ver todos os botões disponíveis, redimensione a janela Visualização de código ou clique na seta de expansão na 
parte inferior da Barra de ferramentas de codificação. 


Você também pode editar a Barra de ferramentas de codificação para exibir mais botões (como Quebra automática de palavra, Caracteres 
ocultos e Recuar automaticamente) ou botões ocultos que não precisarão ser usados. Para fazer isso, no entanto, você deve editar o 
arquivo XML que gera a barra de ferramentas. Para obter mais informações, consulte Extensão do Dreamweaver. 


Nota: A opção que permite visualizar caracteres ocultos, que não é um botão padrão da Barra de ferramentas de codificação, está 
disponível no menu Exibir (Exibir > Opções de visualização de código > Caracteres ocultos). 


» pj - - Para o início 
Inserção de código com o painel Inserir 
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1. Posicione o ponto de inserção no código. 
2. Selecione uma categoria apropriada no painel Inserir. 
3. Clique em um botão no painel Inserir ou selecione um item em um menu pop-up do painel Inserir. 


Quando você clicar em um ícone, o código poderá aparecer na página imediatamente ou uma caixa de diálogo poderá aparecer solicitando 
mais informações para concluir o código. 


Para descobrir a função de cada botão, posicione o ponteiro sobre ele até que seja exibida uma dica de ferramenta. O número e o tipo dos 
botões disponíveis no painel Inserir variam de acordo com o tipo do documento atual. Isso também depende da visualização que você está 
usando: Visualização de código ou Visualização de design. 


Embora o painel Inserir forneça um conjunto de tags frequentemente usadas, ele não é abrangente. Para fazer a sua escolha em um 
conjunto mais abrangente de tags, use o Seletor de tags. 


E ETR 
Inserção de tags com o Seletor de tags 7 


Use o Seletor de tags para inserir na página qualquer tag das bibliotecas de tags do Dreamweaver (que incluem bibliotecas de tags do 
ColdFusion e ASP.NET). 


1. Posicione o ponto de inserção no código, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control 
enquanto clica (Macintosh) e selecione Inserir tag. 


O Seletor de tags é exibido. O painel esquerdo contém uma lista de bibliotecas de tags com suporte, enquanto o painel direito mostra as 
tags armazenadas na pasta da biblioteca de tags selecionada. 

2. Selecione uma categoria de tags na biblioteca de tags ou expanda a categoria e selecione uma subcategoria. 

3. Selecione uma tag no painel direito. 


4. Para visualizar as informações de sintaxe e uso da tag no Seletor de tags, clique no botão Informações sobre tag. As informações sobre a 
tag aparecerão se estiverem disponíveis. 


5. Para visualizar as mesmas informações sobre a tag no painel Referência, clique no ícone <?>. As informações sobre a tag aparecerão se 
estiverem disponíveis. 


6. Para inserir a tag selecionada no código, clique em Inserir. 


Se a tag aparecer no painel direito com colchetes angulares (por exemplo, <title></title>), ela não precisará de informações adicionais e 
será imediatamente inserida no documento no ponto de inserção. 


Se a tag precisar de informações adicionais, um editor de tags será exibido. 


7. Se um editor de tags for aberto, digite as informações adicionais e clique em OK. 


8. Clique no botão Fechar. 


so pm P. iníci 
Inserção de comentários HTML SR 


Um comentário é um texto descritivo que você insere no código HTML para explicar o código ou fornecer outras informações. O texto do 
comentário aparece somente na Visualização de código e não é exibido em um navegador. 


Inserção de um comentário no ponto de inserção 
*& Selecione Inserir > Comentário. 
Na Visualização de código, uma tag de comentário é inserida e o ponto de inserção é colocado no meio da tag. Digite seu comentário. 


Na Visualização de design, a caixa de diálogo Comentário é exibida. Digite o comentário e clique em OK. 


Exibição dos marcadores de comentário na Visualização de design 

“& Selecione Exibir > Auxílios visuais > Elementos invisíveis. 

Verifique se a opção Comentários está selecionada nas preferências de elementos invisíveis. Se não estiver, o marcador de comentário não 
aparecerá. 


Edição de um comentário existente 
e Na Visualização de código, localize o comentário e edite seu texto. 


e Na Visualização de design, selecione o marcador Comment, edite o texto do comentário no Inspetor de propriedades e clique na janela 
Documento. 


a, A ogis P, iníci 
Cópia e colagem do código AP A 


1. Copie o código da Visualização de código ou de outro aplicativo. 
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2. Coloque o ponto de inserção na Visualização de código e selecione Editar > Colar. 


Editar tags com os editores de tags PERA 


Use os Editores de tags para visualizar, especificar e editar os atributos de tags. 


1. Clique com o botão direito do mouse em uma tag (Windows) ou mantenha pressionada a tecla Control enquanto clica em uma tag 
(Macintosh) na Visualização de código ou em um objeto na Visualização de design, e selecione Editar tag no menu pop-up. (O conteúdo 
desta caixa de diálogo muda de acordo com a tag selecionada.) 


2. Especifique ou edite atributos para a tag e clique em OK. 
Para obter mais informações sobre a tag no Editor de tags, clique em Informações sobre tag. 


Editar código com o menu de contexto Codificação PR 


1. Na Visualização de código, selecione algum código e clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla 
Control enquanto clica (Macintosh). 


2. Selecione o submenu Seleção e, em seguida, selecione uma destas opções: 
Recolher seleção Recolhe o código selecionado. 


Recolher seleção expandida Recolhe todos os códigos que estão fora do código selecionado. 
Expandir seleção Expande o fragmento de código selecionado. 


Recolher tag completa Recolhe o conteúdo entre um conjunto de tags de abertura e finalização (por exemplo, o conteúdo entre <table> e 
</table>). 


Recolher tag completa expandida Recolhe o conteúdo fora de um conjunto de tags de abertura e finalização (por exemplo, o conteúdo 
fora de <table> e </table>). 


Expandir tudo Restaura todo o código recolhido. 


Aplicar comentário HTML Delimita o código selecionado com <!-- e --> ou abre uma nova tag caso nenhum código tenha sido 
selecionado. 


Aplicar comentário /* */ Delimita o código CSS ou JavaScript selecionado com /* e */. 


Aplicar comentário || Insere // no início de cada linha do código CSS ou JavaScript selecionado, ou insere uma tag // única caso nenhum 
código tenha sido selecionado. 


Aplicar comentário ' Insere uma aspa simples no início de cada linha de um script do Visual Basic ou insere uma aspa simples no ponto 
de inserção caso nenhum código tenha sido selecionado. 


Aplicar comentário de servidor Envolve o código selecionado. Quando você está trabalhando em um arquivo ASP, ASP.NET, JSP, PHP 
ou ColdFusion e seleciona a opção Aplicar comentário de servidor, o Dreamweaver detecta automaticamente a tag de comentário correta e 
a aplica à seleção. 


Aplicar hack de comentário de barra invertida Delimita o código CSS selecionado com tags de comentário que farão com que o Internet 
Explorer 5 para Macintosh ignore o código. 


Aplicar Caio Hack Delimita o código CSS selecionado com tags de comentário que farão com que o Netscape Navigator 4 ignore o 
código. 


Remover comentário Remove as tags de comentário do código selecionado. Se uma seleção incluir comentários aninhados, somente as 
tags de comentário externas serão removidas. 


Remover hack de comentário de barra invertida Remove as tags de comentário do código CSS selecionado. Se uma seleção incluir 
comentários aninhados, somente as tags de comentário externas serão removidas. 


Remover Caio Hack Remove as tags de comentário do código CSS selecionado. Se uma seleção incluir comentários aninhados, somente 
as tags de comentário externas serão removidas. 


Converter abas em espaços Converte cada tabulação da seleção em um número de espaços igual ao valor de Tamanho da tabulação 
definido nas preferências de formato do código. Para obter mais informações, consulte Alteração do formato de código. 


Converter espaços em abas Converte uma série de espaços da seleção em tabulações. Cada série de espaços com um número de 
espaços igual ao tamanho da tabulação é convertida em uma tabulação. 


Recuo Recua a seleção, deslocando-a para a direita. Para obter mais informações, consulte Recuo dos blocos de código. 
Diminuir recuo Desloca a seleção para a esquerda. 

Remover todas as tags Remove todas as tags da seleção. 

Converter linhas em tabela Delimita a seleção em uma tag table sem atributos. 


Adicionar quebras de linha Adiciona uma tag br no final de cada linha da seleção. 
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Converter em maiúscula Converte todas as letras da seleção (incluindo nomes e valores de tag e atributo) em maiúsculas. 
Converter em minúscula Converte todas as letras da seleção (incluindo nomes e valores de tag e atributo) em minúsculas. 
Converter tags em maiúsculas Converte todos os nomes de tag e atributo e valores de atributo da seleção em maiúsculas. 


Converter tags em minúsculas Converte todos os nomes de tag e atributo e valores de atributo da seleção em minúsculas. 


Edição de uma tag de linguagem de servidor com o Inspetor de propriedades ij 


Edite o código em uma tag de linguagem de servidor (uma tag ASP, por exemplo) sem entrar na Visualização de código, usando o Inspetor de 
propriedades. 


1. Na Visualização de design, selecione o ícone visual da tag de linguagem de servidor. 
2. No Inspetor de propriedades, clique no botão Editar. 
3. Faça as alterações no código da tag e clique em OK. 


2 P. iníci 
Recuo dos blocos de código RT 


Ao gravar e editar código na Visualização de código ou no Inspetor de código, você pode alterar o nível de recuo de um bloco ou linha de código 
selecionado, deslocando-o para a direita ou esquerda em uma tabulação. 


Recuo do bloco de código selecionado 
e Pressione Tab. 


e Selecione Editar > Recuar código. 


Cancelamento do recuo do bloco de código selecionado 
e Pressione Shift+Tab. 


* Selecione Editar > Diminuir recuo do código. 


" a ds Para o início 
Navegação no código relacionado 


O Navegador de código exibe uma lista de códigos fonte relacionados a uma determinada seleção de sua página. Use-o para navegar por 
códigos fonte relacionados, como regras de CSS internas e externas, inclusões de servidor, arquivos JavaScript externos, arquivos de modelo pai, 
arquivos de bibliotecas e arquivos de origem iframe. Quando você clica em um link do Navegador de código, o Dreamweaver abre o arquivo que 
contém a parte relevante do código. O arquivo aparece na área relacionada a arquivos, se estiver ativada. Se você não tiver arquivos 
relacionados ativados, o Dreamweaver abre o arquivo selecionado como um documento separado na janela Documento. 


Se você clicar em uma regra CSS no Navegador de código, o Dreamweaver lhe leva diretamente para aquela regra. Se a regra for interna de um 
arquivo, o Dreamweaver exibe a regra na visualização Dividida. se a regra estiver em um arquivo CSS externo, o Dreamweaver abre o arquivo e 
exibe a regra na área relacionada a arquivos acima do documento principal. 


Você pode acessar o Navegador de código a partir das visualizações de design, de código e dividida, assim como pelo Inspetor de códigos. 


Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre como trabalhar com o Navegador de códigos, consulte 
www.adobe.com/go/dw1Ocodenav br. 


Para assistir a um tutorial em vídeo sobre como trabalhar com Visualização dinâmica, arquivos relacionados e o Navegador de código, consulte 
www.adobe.com/go/lrvid4044 dw br. 


Abrir o Navegador de código 


*& Altrclique (Windows) ou Command+Option+Click (Macintosh) em qualquer local da página. O Navegador de código exibe links para o código 
que afeta a área onde você clicou. 


Clique fora do Navegador de código para fechá-lo. 
Nota: Você também pode abrir o Navegador de código clicando no indicador Navegador de código *. Este indicador aparece próximo ao ponto 
de inserção em sua página quando o mouse fica sem atividade por 2 segundos. 
Navegar até o código com o Navegador de código 
1. Abra o Navegador de código na área da página na qual você está interessado. 
2. Clique na parte do código para o qual você deseja ir. 


O Navegador de código agrupa os códigos fonte relacionados por arquivo e relaciona os arquivos em ordem alfabética. Por exemplo, suponha 
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que as regras CSS em três arquivos externos afetam a seleção em seu documento. Neste caso, o Navegador de código relaciona esses três 
arquivos, assim como as regras CSS relevantes à seleção. Para CSS relacionados a uma determinada seleção, o Navegador de código funciona 
como um painel de Estilos CSS no modo Atual. 


Quando você focaliza links para regras CSS, o Navegador de código exibe dicas de ferramentas das propriedades na regra. Essas dicas de 
ferramentas são úteis quando você quer distinguir entre muitas regras que compartilham o mesmo nome. 


Desativar o indicador do Navegador de código 
1. Abra o Navegador de código. 
2. Selecione Desativar indicador no canto inferior direito. 
3. Clique fora do Navegador de código para fechá-lo. 


Para reativar o indicador do Navegador de código, Alt+clique (Windows) ou Command+Option+Click (Macintosh) para abrir o Navegador de 
código e desmarcar a opção Desativar indicador. 


Acessar a uma função JavaScript ou VBScript Rr pa 


Na Visualização de código e no Inspetor de código, é possível visualizar uma lista de todas as funções JavaScript ou VBScript do código e ir até 
qualquer uma delas. 


1. Visualize o documento na Visualização de código (Exibir > Código) ou no Inspetor de código (Janela > Inspetor de código). 
2. Siga um destes procedimentos: 


e Na Visualização de código, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica 
(Macintosh) em qualquer lugar da Visualização de código e selecione o submenu Funções no menu de contexto. 


O submenu Funções não aparece na Visualização de design. 
Qualquer função JavaScript ou VBScript do código aparece no submenu. 


Para ver as funções em ordem alfabética, mantenha pressionada a tecla Control enquanto clica com o botão direito do mouse 
(Windows) ou mantenha pressionadas as teclas Option e Control enquanto clica (Macintosh) na Visualização de código. Em seguida, 
selecione o submenu Funções. 


* No Inspetor de código, clique no botão Navegação de código (f |) na barra de ferramentas. 


3. Selecione um nome de função para ir até a função no código. 


Extrair JavaScript Para o início 


O Extrator de JavaScript (JSE) remove todo ou a maior parte do JavaScript de seu documento do Dreamweaver, exporta-o para um arquivo 
externo e vincula o arquivo externo ao seu documento. O JSE também pode remover manipuladores de eventos, como onclick e onmouseover do 
seu código e, então, anexar ao seu documento, de modo não intrusivo, o JavaScript associado a esses manipuladores. 


Você deve estar ciente das seguintes limitações do Extrator de JavaScript antes de usá-lo: 


* O JSE não extrai tags de script no corpo do documento (exceto no caso de widgets do Spry). Há chance de que a externalização desses 
scripts possa causar resultados imprevistos. Por padrão, o Dreamweaver lista esses scripts na caixa de diálogo Externalizar JavaScript, mas 
não os seleciona para extração. (Você pode selecioná-los manualmente se desejar). 


e O JSE não extrai JavaScript de regiões editáveis de arquivos .dwt (modelo do Dreamweaver), regiões não editáveis de ocorrências do 
modelo ou itens de biblioteca do Dreamweaver. 


e Após extrair JavaScript usando a opção Externalizar JavaScript e Anexar de modo não intrusivo, você não poderá mais editar 
comportamentos do Dreamweaver no painel Comportamentos. O Dreamweaver não pode inspecionar e preencher o painel Comportamentos 
com comportamentos anexados de modo não intrusivo. 


e Você não pode desfazer suas alterações após ter fechado a página. No entanto, você pode desfazer alterações, desde que permaneça na 
mesma seção de edição. Selecione Editar > Desfazer externalizar JavaScript, para desfazer. 


e Algumas páginas muito complexas podem não funcionar conforme o esperado. Esteja atento ao extrair JavaScript de páginas com 
document.write() no corpo e em variáveis globais. 


Para obter uma visão geral em vídeo da equipe de engenharia do Dreamweaver sobre o suporte de JavaScript no Dreamweaver, consulte 
www.adobe.com/go/dw1Ojavascript br. 


Para usar o Extrator de JavaScript: 
1. Abra uma página que contenha JavaScript (por exemplo, uma página do Spry). 
2. Selecione Comandos > Externalizar JavaScript. 


3. Na caixa de diálogo Externalizar JavaScript, edite as seleções padrão, se necessário. 
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e Selecione Externalizar somente JavaScript se você deseja que o Dreamweaver mova todo JavaScript para um arquivo externo e para 
fazer referência àquele arquivo no documento atual. Esta opção deixa os manipuladores de evento como onclick e onload no 
documento e deixa os comportamentos visíveis no painel Comportamentos. 


e Selecione Externalizar JavaScript e Anexar de modo não intrusivo se desejar que o Dreamweaver 1) mova JavaScript para um arquivo 
externo e faça referência a esse arquivo no documento atual e 2) remova manipuladores de evento do HTML e insira-os no tempo de 
execução usando JavaScript. Ao selecionar esta opção, você não poderá mais editar comportamentos no painel Comportamentos. 


e Na coluna Editar, desmarque todas as edições que não deseja realizar ou selecione as edições que o Dreamweaver, por padrão, não 
selecionou. 


Por padrão, o Dreamweaver lista mas não seleciona as seguintes edições: 
e Blocos de script no cabeçalho do documento que contêm chamadas document.write() ou document.writeln(). 


e Blocos de script no cabeçalho do documento que contêm assinaturas de funções relacionadas ao código de manuseio FOLAS, 
conhecido por usar document.write(). 


* Blocos de script no corpo do documento, a menos que os blocos contenham apenas widget do Spry ou construtores de conjunto de 
dados do Spry. 


e O Dreamweaver atribui IDs automaticamente a elementos que ainda não têm IDs. Se não gostar dessas IDs, você poderá alterá-las, 
editando as caixas de texto de ID. 


4. Clique em OK. 


A caixa de diálogo de resumo oferece um resumo de extrações. Revise as extrações e clique em OK. 


5. Salve a página. 


O Dreamweaver cria um arquivo SpryDOMUtils.js, bem como outro arquivo contendo o JavaScript extraído. O Dreamweaver salva o arquivo 
SpryDOMUtils.js na pasta SpryAssets em seu site e salva o outro arquivo no mesmo nível da página da qual você extraiu o JavaScript. Não se 
esqueça de enviar esses arquivos dependentes para seu servidor Web quando enviar a página original. 


Para o início 


Trabalho com snippets de código 


Os snippets de código permitem armazenar o conteúdo para reutilização rápida. Você pode criar, inserir, editar ou excluir snippets de HTML, 
JavaScript, CFML, ASP, PHP e muito mais. Também é possível gerenciar e compartilhar snippets de código com membros da equipe. Alguns 
snippets predefinidos que você pode usar como ponto de partida estão disponíveis. 


Os snippets que contêm tags <font> e outros atributos elementos obsoletos estão na pasta Legacy no painel Snippeis. 


Inserção de um snippet de código 
1. Coloque o ponto de inserção no local onde você deseja inserir o snippet de código ou selecione o código ao redor do qual será colocado 


um snippet. 


2. No painel Snippets (Janela > Snippets), clique duas vezes no snippet. 


Você também pode clicar com o botão direito do mouse no snippet (Windows) ou manter pressionada a tecla Control enquanto clica no 
snippet (Macintosh) e selecionar Inserir no menu pop-up. 


Criação de um snippet de código 


i. 
2: 


No painel Snippets, clique no ícone Novo snippet na parte inferior do painel. 


Digite um nome para o snippet. 

Nota: Os nomes de snippet não podem conter caracteres inválidos nos nomes de arquivo, como barras (/ ou |, caracteres especiais ou 
aspas duplas ('). 

(Opcional) Digite uma descrição de texto para o snippet. Isso facilita o uso do snippet para os outros membros da equipe. 

Em Tipo de snippet, selecione Quebra de linha da seleção ou Inserir bloco. 


a. Se você escolher Quebra de linha da seleção, adicione código para as seguintes opções: 
Inserir antes de Digite ou cole o código a ser inserido antes da seleção atual. 


Inserir depois de Digite ou cole o código a ser inserido após a seleção atual. 


Para definir o espaçamento padrão dos blocos, use quebras de linha; pressione Enter (Windows) ou Return (Macintosh) dentro das 
caixas de texto. 


Nota: Como os snippets podem ser criados como blocos de início e fim, use-os para envolver outras tags e conteúdo. Isso será útil 
para inserir formatação especial, links, elementos de navegação e blocos de script. Realce o conteúdo que você deseja envolver e 
insira O snippet. 


b. Se você escolher Inserir bloco, digite ou cole o código a ser inserido. 


5. (Opcional) Selecione Tipo de visualização: Código ou design. 
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Design Processa o código e o exibe no painel Visualização do painel Snippets. 
Code Exibe o código no painel Visualização. 


6. Clique em OK. 


Edição ou exclusão de um snippet de código 
*& No painel Snippets, selecione um snippet e clique no botão Editar snippet ou Remover na parte inferior do painel. 


Criação de pastas de snippet de código e gerenciamento de snippets de código 
1. No painel Snippets, clique no botão Nova pasta de snippets na parte inferior do painel. 
2. Arraste snippets para a nova pasta ou para outras pastas, conforme desejar. 


Adição ou edição de um atalho de teclado para um snippet 
1. No painel Snippets, clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) e 
selecione Editar atalhos de teclado. 


O Editor de atalho de teclado é exibido. 
2. No menu pop-up Comandos, selecione Snippets. 
Uma lista de snippets é exibida. 
3. Selecione um snippet e atribua um atalho de teclado a ele. 


Para obter mais informações, consulte Personalizar atalhos de teclado. 


Compartilhamento de um snippet com outros membros da equipe 
1. Localize o arquivo correspondente ao snippet que você deseja compartilhar na pasta Configuração/snippets, na pasta de aplicativo do 
Dreamweaver. 


2. Copie o arquivo de snippet para uma pasta compartilhada no computador ou em um computador da rede. 
3. Faça com que os outros membros da equipe copiem o arquivo de snippet para a pasta Configuração/snippeis. 


E Dna P, iníci 
Procurar tags, atributos ou texto no código ida 


Você pode procurar tags, atributos e valores de atributo específicos. Por exemplo, é possível procurar todas as tags img que não têm o atributo 
alt. 


Você também pode procurar sequências de texto específicas que estão ou não dentro de um conjunto de tags de contêiner. Por exemplo, é 
possível procurar a palavra Sem título contida em uma tag title para localizar todas as páginas sem título do seu site. 

1. Abra o documento em que será realizada a pesquisa ou selecione documentos ou uma pasta no painel Arquivos. 

2. Selecione Editar > Localizar e substituir. 


3. Especifique em quais arquivos será realizada a pesquisa e, em seguida, especifique o tipo de pesquisa a ser executado e o texto ou as tags 
que serão procurados. Se desejar, especifique o texto de substituição também. Depois, clique em um dos botões Localizar ou em um dos 
botões Substituir. 


4. Clique no botão Fechar. 


5. Para realizar a pesquisa novamente sem exibir a caixa de diálogo Localizar e substituir, pressione F3 (Windows) ou Command+G 
(Macintosh). 


á oã ” E Para o início 
Salvamento e memorização de padrões de pesquisa 


Você pode salvar padrões de pesquisa e reutilizá-los posteriormente. 


Salvamento de um padrão de pesquisa 
1. Na caixa de diálogo Localizar e substituir (Editar > Localizar e substituir), defina os parâmetros da pesquisa. 
2. Clique no botão Salvar consulta (o ícone de disco). 
3. Na caixa de diálogo exibida, navegue até a pasta em que deseja salvar as consultas. Em seguida, digite um nome de arquivo que 
identifique a consulta e clique em Salvar. 


Por exemplo, se o padrão de pesquisa envolver a procura de tags img sem o atributo alt, você poderia nomear a consulta como 
img no alt.dwr. 


Nota: As consultas salvas terão a extensão de arquivo .dwr. Algumas consultas salvas nas versões antigas do Dreamweaver 
possivelmente terão a extensão .dwqg. 
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Memorização de um padrão de pesquisa 

Selecione Editar > Localizar e substituir. 

Clique no botão Carregar consulta (o ícone de pasta). 

Navegue até a pasta em que as consultas são salvas. Selecione um arquivo de consulta e clique em Abrir. 


Po o Me 


Clique em Localizar próximo, Localizar tudo, Substituir ou Substituir tudo para iniciar a pesquisa. 


FR a 
Uso do material de referência a linguagem Eai 


O painel Referência fornece uma ferramenta de referência rápida para linguagens de markup, linguagens de programação e estilos CSS. Ele 
comunica informações sobre tags, objetos e estilos específicos com os quais você está trabalhando na Visualização de código (ou no Inspetor de 
código). O painel Referência também fornece um código de exemplo que você pode colar nos documentos. 


Abertura do painel Referência 
1. Siga um destes procedimentos na Visualização de código: 


e Clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh) em uma tag, 
atributo ou palavra-chave e selecione Referência no menu de contexto. 


* Coloque o ponto de inserção em uma tag, atributo ou palavra-chave e pressione Shift+F1. 


O painel Referência é aberto e exibe informações sobre a tag, o atributo ou a palavra-chave clicada. 


REFERÊNCIA 


Livro: | O'REILLY HTML Referência =| Tag: | TD ” |Descrição ” 


4 
STD> 5 NN all IE all HTML 3.2 [E ] 


<TD>.. </TD> End Tag: Optional — 
The ta element is a container for content that is rendered inside one cell of a table element, One cell is the 
intersection of a column and row, Other elements related to the cd element are caption, col, colgroup, table, 
tbody, tfoot, th, thead, and er. In addition to providing a wrapper for a cell's content, the ca element defines 

a number of visible attributes that apply to a single cell, often overriding similar attributes set in lesser-nested 
elements in the table, 


2. Para ajustar o tamanho do texto no painel Referência, selecione Fonte grande, Fonte média ou Fonte pequena no menu de opções (a seta 
pequena no lado superior direito do painel). 


Colagem do código de exemplo no documento 
1. Clique em qualquer lugar do código de exemplo no conteúdo de referência. 


Todo o exemplo de código é realçado. 


2. Selecione Editar > Copiar e cole o código de exemplo no documento, na Visualização de código. 


Procura do conteúdo de referência no painel Referência 
1. Para exibir tags, objetos ou estilos de outro livro, selecione um livro diferente no menu pop-up Livro. 
2. Para visualizar informações sobre um item específico, selecione-o no menu pop-up Tag, Objeto, Estilo ou CFML (dependendo do livro 
selecionado). 
3. Para visualizar informações sobre um atributo do item selecionado, selecione o atributo no menu pop-up ao lado do menu pop-up Tag, 
Objeto, Estilo ou CFML. 


Esse menu contém a lista de atributos do item selecionado. A seleção padrão é Descrição, que exibe uma descrição do item escolhido. 


a ve dá Para o início 
Impressão do código 


Você pode imprimir o código para editá-lo offline, arquivá-lo ou distribuí-lo. 
1. Abra uma página na Visualização de código. 


2. Selecione Arquivo > Imprimir código. 
3. Especifique as opções de impressão e clique em OK (Windows) ou Imprimir (Macintosh). 


Mais tópicos da Ajuda 
Modelo de objeto do documento W3C 


Tutorial de dicas de códigos 
Visão geral da barra de ferramentas de codificação 
Abrir Arquivos relacionados 


Tutorial do Navegador de código 
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Trabalho com as inclusões de servidor 


Sobre as inclusões de servidor 
Inserção das inclusões de servidor 
Edição do conteúdo das inclusões de servidor 


. ás . Para o início 
Sobre as inclusões de servidor 
Você pode usar o Dreamweaver para inserir inclusões de servidor nas páginas, editar as inclusões ou visualizar as páginas que contêm 
inclusões. 


Uma inclusão de servidor é um arquivo que o servidor incorpora no documento quando um navegador solicita o documento no servidor. 


Quando o navegador de um visitante solicita o documento que contém a instrução de inclusão, o servidor processa a instrução e cria um novo 
documento no qual a instrução será substituída pelo conteúdo do arquivo incluído. Em seguida, o servido envia esse novo documento ao 
navegador do visitante. No entanto, quando você abre um documento local diretamente em um navegador, não há servidor para processar as 
instruções de inclusão. Sendo assim, o navegador abre o documento sem processar as instruções e o arquivo que deveria ser incluído não 
aparece no navegador. Portanto, sem o Dreamweaver, pode ser difícil examinar os arquivos locais e visualizá-los da forma como aparecerão aos 
visitantes depois que você colocá-los no servidor. 


Com o Dreamweaver, você pode visualizar os documentos exatamente como eles aparecerão depois que estiverem no servidor, tanto na 
Visualização de design como no recurso Visualização em navegador. Para isso, entretanto, você deve certificar-se de visualizar o arquivo que 
contém a inclusão como um arquivo temporário. (Selecione Editar > Preferências, selecione a categoria Visualizar em navegador e certifique-se 
de que a opção Visualizar usando arquivo temporário esteja selecionada.) 


Nota: Se você estiver usando um servidor de teste, como o Apache ou Microsoft IIS, para visualizar os arquivos em sua unidade local, você não 
precisa visualizar o arquivo como arquivo temporário porque o servidor faz esse processamento para você. 

Ao colocar uma inclusão de servidor em um documento, você inserirá uma referência a um arquivo externo. O conteúdo do arquivo especificado 
no documento atual não é inserido. O conteúdo do arquivo especificado deve conter somente o conteúdo que você deseja incluir. Ou seja, O 
arquivo de inclusão não deve conter nenhuma tag head, body ou html (isso significa que as tags <html> de formatação, como as tags Pp, div etc., 
podem ser usadas). Caso isso aconteça, essas tags entrarão em conflito com as tags do documento original e o Dreamweaver não exibirá 
adequadamente a página. 


Você não pode editar o arquivo incluído diretamente em um documento. Para editar o conteúdo de uma inclusão de servidor, você deve editar 
diretamente o arquivo que está incluindo. Qualquer alteração feita no arquivo externo é automaticamente refletida em cada documento que a 
inclui. 


Há dois tipos de inclusões de servidor: Virtual e Arquivo. O Dreamweaver insere o tipo de arquivo por padrão, mas você pode usar o Inspetor de 
propriedades para selecionar um que seja apropriado para o tipo de servidor Web que você usa: 


* Se ele for um servidor Web Apache, selecione Virtual. No Apache, o tipo Virtual funciona em todos os casos, enquanto o tipo Arquivo 
funciona somente em alguns casos. 


e Se ele for um Microsoft Internet Information Server (IIS), selecione Arquivo. (O tipo Virtual funciona apenas com o IIS em determinadas 
circunstâncias.) 


Nota: Infelizmente, o IIS não permitirá a inclusão de um arquivo em uma pasta acima da pasta atual na hierarquia de pastas, a menos que 
um software especial tenha sido instalado no servidor. Se você precisa incluir um arquivo de uma pasta localizada no topo da hierarquia de 
pastas em um servidor IIS, pergunte ao administrador do sistema se o software necessário está instalado. 


e Em outros tipos de servidores, ou se você não souber qual é o tipo do seu servidor, pergunte ao administrador do sistema qual opção deve 
ser usada. 


Alguns servidores são configurados para examinar todos os arquivos e verificar se eles contêm inclusões de servidor. Outros são 
configurados para examinar somente arquivos com uma extensão específica, como .shtml, .shtm ou .inc. Se uma inclusão de servidor não 
estiver funcionando, pergunte ao administrador do sistema se você precisa usar uma extensão especial no nome do arquivo que usa a 
inclusão. (Por exemplo, se o nome do arquivo for canoe.html, pode ser que você precise renomeá-lo para canoe.shtml.) Se você deseja que 
seus arquivos retenham as extensões .html ou .htm, peça ao administrador do sistema para configurar o servidor de modo que ele procure 
inclusões de servidor em todos os arquivos (e não apenas nos arquivos com uma extensão específica). A procura de inclusões de servidor 
em um arquivo leva algum tempo. Portanto, as páginas que o servidor analisa demoram um pouco mais para serem atendidas do que as 
outras páginas e alguns administradores não permitem a análise de todos os arquivos. 


= E = - Para o início 
Inserção das inclusões de servidor 
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Você pode usar o Dreamweaver para inserir inclusões de servidor na página. 


Inserção de uma inclusão de servidor 
1. Selecione Inserir > Inclusão do servidor. 
2. Na caixa de diálogo exibida, navegue até o arquivo desejado e selecione-o. 


Por padrão, o tipo de inclusão Arquivo é inserido. 


3. Para alterar o tipo de inclusão, selecione a inclusão de servidor na janela Documento e altere o tipo no Inspetor de propriedades (Janela > 
Propriedades): 


e Se ele for um servidor Web Apache, selecione Virtual. No Apache, o tipo Virtual funciona em todos os casos, enquanto o tipo Arquivo 
funciona somente em alguns casos. 


* Se ele for um Microsoft Internet Information Server (IIS), selecione Arquivo. (O tipo Virtual funciona apenas com o IIS em determinadas 
circunstâncias.) 


Nota: Infelizmente, o IIS não permitirá a inclusão de um arquivo em uma pasta acima da pasta atual na hierarquia de pastas, a menos 
que um software especial tenha sido instalado no servidor. Se você precisa incluir um arquivo de uma pasta localizada no topo da 
hierarquia de pastas em um servidor IIS, pergunte ao administrador do sistema se o software necessário está instalado. 


e Em outros tipos de servidores, ou se você não souber qual é o tipo do seu servidor, pergunte ao administrador do sistema qual opção 
deve ser usada. 


Alteração de qual arquivo será incluído 
1. Selecione a inclusão de servidor na janela Documento. 
2. Abra o Inspetor de propriedades (Janela > Propriedades). 
3. Siga um destes procedimentos: 


e Clique no ícone de pasta, navegue até o novo arquivo a ser incluído e selecione-o. 


e Na caixa, digite o caminho e o nome do novo arquivo a ser incluído. 


e ca Ê E mM, é P, iníci 
Edição do conteúdo das inclusões de servidor ja 


Você pode usar o Dreamweaver para editar as inclusões de servidor. Para editar o conteúdo associado ao arquivo incluído, abra o arquivo. 
1. Selecione a inclusão de servidor na Visualização de design ou Visualização de código e clique em Editar no Inspetor de propriedades. 
O arquivo incluído é aberto em uma nova janela Documento. 
2. Edite o arquivo e salve-o. 
As alterações se refletem imediatamente no documento atual e em qualquer documento subsequente que você abrir que inclua o arquivo. 


3. Carregue o arquivo de inclusão para o site remoto se necessário. 


ERES 
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Trabalho com o conteúdo de cabeçalho das páginas 


Visualizar e editar o conteúdo do cabeçalho 

Definição das propriedades meta da página 

Definição do título da página 

Especificação das palavras-chave da página 

Especificação das descrições da página 

Definição das propriedades de atualização da página 

Definição das propriedades de URL base da página 

Definição das propriedades de vinculação da página 

As páginas contêm elementos que descrevem as informações na página, que é usado pelos navegadores de pesquisa. Você pode definir as 
propriedades dos elementos head a fim de determinar como as páginas são identificadas. 


iai ; PIER 
Visualizar e editar o conteúdo do cabeçalho id 


Você pode visualizar os elementos na seção head de um documento usando o menu Exibir, a Visualização de código da janela Documento ou o 
Inspetor de código. 


Visualização dos elementos na seção de cabeçalho de um documento 

*& Selecione Exibir > Conteúdo do cabeçalho. Para cada elemento do conteúdo head, é exibido um marcador na parte inferior da janela 
Documento, na Visualização de design. 

Nota: Se a janela Documento estiver definida para mostrar somente a Visualização de código, Exibir > Conteúdo do cabeçalho estará 
esmaecido. 


Inserção de um elemento na seção de cabeçalho de um documento 
1. Selecione um item no submenu Inserir > HTML > Tags de cabeçalho. 
2. Digite opções para o elemento na caixa de diálogo exibida ou no Inspetor de propriedades. 


Edição de um elemento na seção de cabeçalho de um documento 
1. Selecione Exibir > Conteúdo do cabeçalho. 
2. Clique em um dos ícones na seção head para selecioná-lo. 
3. Defina ou modifique as propriedades do elemento no Inspetor de propriedades. 


Para o início 


Definição das propriedades meta da página 


Uma tag meta é um elemento head que registra informações sobre a página atual, como codificação de caractere, autor, direitos autorais ou 
palavras-chave. Essas tags também podem ser usadas para fornecer informações ao servidor, como data de expiração, intervalo de atualização e 
classificação POWDER da página. (O POWDER, Protocol for Web Description Resources, fornece um método para atribuir classificações, como 
classificações de filmes, a páginas da Web.) 


Adição de uma meta tag 
1. Selecione Inserir > HTML > Tags de cabeçalho > Meta. 


2. Especifique as propriedades na caixa de diálogo exibida. 


Edição de uma meta tag existente 
1. Selecione Exibir > Conteúdo do cabeçalho. 
2. Selecione o marcador Meta exibido na parte superior da janela Documento. 
3. Especifique as propriedades no Inspetor de propriedades. 


Propriedades da meta tag 

“& Defina as propriedades da meta tag da seguinte maneira: 

Atributo Especifica se a tag meta contém informações descritivas sobre a página (name) ou informações de cabeçalho HTTP (http-equiv). 
Valor Especifica o tipo de informações que você está fornecendo nesta tag. Alguns valores, como description, keywords e refresh, já estão bem 
definidos (e têm seus próprios Inspetores de propriedades no Dreamweaver), mas você pode especificar praticamente qualquer valor (por 
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exemplo, creationdate, documentID ou level). 
Conteúdo Especifica as informações reais. Por exemplo, se você especificou level em Valor, poderá especificar beginner, intermediate ou 
advanced em Conteúdo. 


Definição do título da página Para o início 


Há apenas uma propriedade de título: o título da página. O título aparece na barra de título da janela Documento do Dreamweaver, bem com na 
barra de título do navegador, quando você visualiza a página na maioria dos navegadores. O título também aparece na barra de ferramentas da 
janela Documento. 


Especificação do título na janela Documento 
“& Digite o título na caixa de texto Título da barra de ferramentas da janela Documento. 


Especificação do título no conteúdo de cabeçalho 
1. Selecione Exibir > Conteúdo do cabeçalho. 
2. Selecione o marcador Title exibido na parte superior da janela Documento. 


3. Especifique o título da página no Inspetor de propriedades. 


FEs Ai Go sê P, iníci 
Especificação das palavras-chave da página id 


Muitos robôs de mecanismo de pesquisa (programas que navegam automaticamente na Web coletando informações para que os mecanismos de 
pesquisa indexem) leem o conteúdo da tag meta das palavras-chave e usam as informações para indexar as páginas em seus bancos de dados. 
Como alguns mecanismos de pesquisa limitam o número de palavras-chave ou caracteres indexados, ou ignoram todas as palavras-chave se 
você ultrapassar o limite, é recomendável usar apenas algumas palavras-chave cuidadosamente escolhidas. 


Adição de uma meta tag Keywords 
1. Selecione Inserir > HTML > Tags de cabeçalho > Palavras-chave. 


2. Especifique as palavras-chave, separadas por vírgulas, na caixa de diálogo exibida. 


Edição de uma meta tag Keywords 
1. Selecione Exibir > Conteúdo do cabeçalho. 
2. Selecione o marcador Keywords exibido na parte superior da janela Documento. 


3. No Inspetor de propriedades, visualize, modifique ou exclua palavras-chave. Você também pode adicionar palavras-chave separadas por 
vírgula. 


diga E, Pe, gi P, iníci 
Especificação das descrições da página PR RENA 


Vários robôs de mecanismo de pesquisa (os programas que navegam automaticamente na Web coletando informações para que os mecanismos 
de pesquisa indexem) leem o conteúdo da tag meta Description. Alguns usam as informações para indexar as páginas em seus bancos de 
dados; outros também exibem as informações na página de resultados da pesquisa (em vez de exibir as primeiras linhas do documento). Alguns 
mecanismos de pesquisa limitam o número de caracteres indexados, por isso é uma boa sugestão limitar sua descrição a poucas palavras (por 
exemplo, Bufê de churrasco em Albany, Geórgia ou Bons preços de design na Web para clientes no mundo todo). 


Adição de uma meta tag Description 
1. Selecione Inserir > HTML > Tags de cabeçalho > Descrição. 
2. Digite o texto descritivo na caixa de diálogo exibida. 


Edição de uma meta tag Description 
1. Selecione Exibir > Conteúdo do cabeçalho. 
2. Selecione o marcador Description exibido na parte superior da janela Documento. 
3. No Inspetor de propriedades, visualize, modifique ou exclua o texto descritivo. 


Definição das propriedades de atualização da página a 


Use o elemento de atualização para especificar se o navegador deve atualizar automaticamente a página — recarregando a página atual ou 
acessando outra — após um determinado período. Esse elemento é geralmente usado para redirecionar os usuários de um URL para outro, 
geralmente após exibir uma mensagem de texto informando que o URL foi alterado. 


468 


Adição de uma meta tag Refresh 
1. Selecione Inserir > HTML > Tags de cabeçalho > Atualizar. 


2. Defina as propriedades da meta tag Refresh na caixa de diálogo exibida. 


Edição de uma meta tag Refresh 
1. Selecione Exibir > Conteúdo do cabeçalho. 


2. Selecione o marcador Refresh exibido na parte superior da janela Documento. 
3. No Inspetor de propriedades, defina as propriedades da meta tag Refresh. 


Definição das propriedades da meta tag Refresh 

“& Defina as propriedades da meta tag Refresh da seguinte maneira: 

Atraso O tempo em segundos que deve ser aguardado até que o navegador atualize a página. Para que o navegador atualize a página 
imediatamente após o término do carregamento, digite O nesta caixa. 

URL ou Ação Especifica se o navegador deve ir para um URL diferente ou atualizar a página atual, após o atraso especificado. Para abrir outro 
URL (em vez de atualizar a página atual), clique no botão Procurar, vá até o item desejado e selecione a página a ser carregada. 


Para o início 


Definição das propriedades de URL base da página 


Use o elemento Base para definir um URL base à qual todos os caminhos relativos de documento da página são considerados relativos. 


Adição de uma meta tag Base 
1. Selecione Inserir > HTML > Tags de cabeçalho > Base. 


2. Especifique as propriedades da meta tag Base na caixa de diálogo exibida. 


Edição de uma meta tag Base 
1. Selecione Exibir > Conteúdo do cabeçalho. 


2. Selecione o marcador Base exibido na parte superior da janela Documento. 
3. No Inspetor de propriedades, especifique as propriedades da meta tag Base. 


Especificação das propriedades da meta tag Base 

*& Especifique as propriedades da meta tag Base da seguinte maneira: 

Href O URL base. Clique no botão Procurar para navegar até o item desejado e selecione um arquivo, ou digite um caminho na caixa. 

Alvo Especifica o quadro ou a janela em que todos os documentos vinculados serão abertos. Selecione um dos quadros do conjunto de quadros 
atual ou um dos seguintes nomes reservados: 


e blank carrega o documento vinculado em uma nova janela do navegador não nomeada. 


e | parent carrega o documento vinculado no conjunto de quadros pai ou na janela do quadro que contém o link. Se o quadro contendo o link 
não estiver aninhado, esse será o equivalente a top; o documento vinculado será carregado na janela de navegador em tamanho integral. 


e self carrega o documento vinculado no mesmo quadro ou janela do link. Esse destino é o padrão, normalmente não é necessário 
especificá-lo. 


e “top carrega o documento vinculado na janela completa do navegador, removendo todos os quadros. 


Definição das propriedades de vinculação da página RR 


Use a tag link para definir um relacionamento entre o documento atual e outro arquivo. 


Nota: A tag link da seção head não é o mesmo que um link HTML entre documentos na seção body. 


Adição de uma meta tag Link 
1. Selecione Inserir > HTML > Tags de cabeçalho > Link. 


2. Especifique as propriedades da meta tag Link na caixa de diálogo exibida. 
Edição de uma meta tag Link 

1. Selecione Exibir > Conteúdo do cabeçalho. 

2. Selecione o marcador Link exibido na parte superior da janela Documento. 


3. No Inspetor de propriedades, especifique as propriedades da meta tag Link. 


Especificação das propriedades da meta tag Link 
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*& Defina as propriedades da meta tag Link da seguinte maneira: 

Href O URL do arquivo para o qual você está definindo um relacionamento. Clique no botão Procurar para navegar até o item desejado e 
selecione um arquivo, ou digite um caminho na caixa. Observe que, no sentido comum do HTML, esse atributo não indica um arquivo ao qual 
você está se vinculando. Os relacionamentos especificados em um elemento Link são mais complexos. 

ID Especifica um identificador exclusivo para o link. 

Título Descreve o relacionamento. Este atributo tem relevância especial para as folhas de estilos vinculadas. Para obter mais informações, 
consulte a seção External Style Sheets na especificação HTML 4.0 no site da World Wide Web Consortium em www w3.org/TR/REC- 
html40/present/styles.htmlástyle-external. 

Rel Especifica o relacionamento entre o documento atual e o documento na caixa Href. Os valores possíveis incluem Alternate, Stylesheet, Start, 
Next, Prev, Contents, Index, Glossary, Copyright, Chapter, Section, Subsection, Appendix, Help e Bookmark. Para especificar mais de um 
relacionamento, separe os valores com um espaço. 

Rev Especifica um relacionamento reverso (o oposto de Rel) entre o documento atual e o documento na caixa Href. Os valores possíveis são os 
mesmos de Rel. 
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Configuração do ambiente de codificação 


Uso de áreas de trabalho orientadas a codificador 
Visualização de código 

Personalização de atalhos de teclado 

Abertura de arquivos na Visualização de código por padrão 


Z E gi Para o início 
Uso de áreas de trabalho orientadas a codificador 
Você pode adaptar o ambiente de codificação no Dreamweaver para que atenda às suas necessidades de trabalho. Por exemplo, você pode 
alterar o modo de exibição do código, configurar atalhos de teclado diferentes ou importar e usar sua biblioteca de tags favorita. 


O Dreamweaver vem com vários layouts de áreas de trabalho desenvolvidos para obter a experiência de codificação ideal. No alternador de área 
de trabalho da Barra de aplicativos, você pode selecionar as áreas de trabalho Desenvolvedor de aplicativo, Desenvolvedor de aplicativo Plus, 
Codificador e áreas de trabalho do Codificador Plus. Todas essas áreas de trabalho mostram, por padrão, a Visualização de código (na janela 
Documento inteira ou nas visualizações de código e de design) e têm painéis encaixados no lado esquerdo da tela. Todos, menos o 
Desenvolvedor de aplicativo Plus, eliminam o Inspetor de propriedades da visualização padrão. 


Se nenhuma das áreas de trabalho predefinidas oferecer exatamente o que você precisa, é possível personalizar seu próprio layout de área de 
trabalho, abrindo e encaixando painéis no local desejado e, em seguida, salvando a área de trabalho como área personalizada. 


a a ai = ds 
Visualização de código ara o início 


Você pode visualizar o código-fonte do documento atual de várias maneiras: exibindo-o na janela Documento através da ativação da Visualização 
de código, dividindo a janela Documento para exibir a página e seu código associado ou trabalhando no Inspetor de código em uma janela de 
codificação separada. O Inspetor de código funciona exatamente como a Visualização de código. Considere-o uma Visualização de código do 
documento atual que pode ser desanexada. 


Visualização de código na janela Documento 
“& Selecione Exibir > Código. 


Codificação e edição de uma página simultaneamente na janela Documento 
1. Selecione Exibir > Código e design. 


O código aparece no painel superior e a página aparece no painel inferior. 


2. Para exibir a página na parte superior, selecione Visualização de design visível, no menu Opções de visualização da barra de ferramentas 
Documento. 

3. Para ajustar o tamanho dos painéis na janela Documento, arraste a barra divisora para a posição desejada. A barra divisora está localizada 
entre os dois painéis. 


A Visualização de código é atualizada automaticamente quando você fizer alterações na Visualização de design. No entanto, após fazer 
alterações na Visualização de código, atualize manualmente o documento na Visualização de design clicando em Visualização de design ou 
pressionando F5. 


Visualização de código em uma janela separada com o Inspetor de código 
O Inspetor de código permite que você trabalhe em uma janela de codificação separada, exatamente como na Visualização de código. 


*& Selecione Janela > Inspetor de código. A barra de ferramentas inclui as seguintes opções: 

Gerenciamento de arquivos Insere ou obtém o arquivo. 

Visualizar/depurar no navegador Visualiza ou depura o documento em um navegador. 

Atualizar Visualização de design Atualiza o documento na Visualização de design para que ele reflita quaisquer alterações feitas no código. As 
alterações feitas no código só aparecerão automaticamente na Visualização de design depois que você executar determinadas ações, como 
salvar o arquivo ou clicar neste botão. 

Referência Abre o painel Referência. Consulte Uso do material de referência a linguagem. 

Navegação de código Permite mover-se rapidamente pelo código. Consulte Acessar a uma função JavaScript ou VBScript. 

Opções de visualização Permite que você determine como o código será exibido. Consulte Definição da aparência do código. 

Para usar a Barra de ferramentas de codificação na lateral esquerda da janela, consulte Inserir código com a Barra de ferramentas de 
codificação. 
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E Aa P, iníci 
Personalização de atalhos de teclado isca 


Você pode usar seus atalhos de teclado favoritos no Dreamweaver. Se estiver acostumado a usar atalhos de teclado específicos, por exemplo, 
Shift+Enter para adicionar uma quebra de linha ou Control+G para ir a uma posição específica no código, você poderá adicioná-los em 
Dreamweaver usando o Editor de atalhos de teclado. 


Para obter instruções, consulte Personalizar atalhos de teclado. 


E E E as do E ss P, iníci 
Abertura de arquivos na Visualização de código por padrão pias, 


Quando você abre um tipo de arquivo que normalmente não contém nenhum HTML (por exemplo, um arquivo JavaScript), o arquivo é aberto na 
Visualização de código (ou no Inspetor de código), e não na Visualização de código. É possível especificar quais tipos de arquivo serão abertos 
na Visualização de código. 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 
2. Selecione Tipos de arquivos/editores na lista Categoria à esquerda. 


3. Na caixa Abrir na Visualização de código, adicione a extensão do tipo de arquivo que você deseja abrir automaticamente na Visualização 
de código. 


Digite um espaço entre as extensões de nome de arquivo. É possível adicionar quantas extensões desejar. 


Mais tópicos da Ajuda 
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Configurações das preferências de codificação 


Sobre as preferências de codificação 

Definição da aparência do código 

Alteração do formato de código 

Definição das preferências de regravação de código 
Definição das cores de código 

Uso de um editor externo 


E o PET 
Sobre as preferências de codificação RA 


Você pode definir as preferências de codificação como formatação e cores de código, entre outros, para atender às suas necessidades 
específicas. 


Nota: Para definir preferências avançadas, use o Editor de bibliotecas de tags (consulte Gerenciamento de bibliotecas de tags). 


RÉ A 5 RT R iníci 
Definição da aparência do código id 


Você pode definir a quebra automática de linha, exibir números de linha para o código, realçar o código inválido, definir a cor da sintaxe dos 
elementos de código, definir o recuo e exibir caracteres ocultos no menu Exibir > Opções de visualização de código. 

1. Visualize um documento na Visualização de código ou no Inspetor de código. 

2. Siga um destes procedimentos: 


e Selecione Exibir > Opções de visualização de código 


E 


* Clique no botão Opções de visualização =. na barra de ferramentas na parte superior da Visualização de código ou no Inspetor de 
código. 


3. Marque ou desmarque qualquer uma destas opções: 
Quebra automática de palavra Quebra automaticamente a linha de código para que você possa visualizá-lo sem rolar a tela 
horizontalmente. Esta opção não insere quebras de linha; ela apenas facilita a visualização de código. 


Números de linha Exibe números de linha na lateral do código. 


Caracteres ocultos Exibe caracteres especiais no lugar do espaço em branco. Por exemplo, um ponto substitui cada espaço, uma divisa 
dupla substitui cada tabulação e um marcador de parágrafo substitui cada quebra de linha. 
Nota: As quebras de linha manuais usadas pelo Dreamweaver não são exibidas com um marcador de parágrafo. 


Realçar código inválido Faz com que o Dreamweaver realce em amarelo todo o código HTML inválido. Quando você selecionar uma tag 
inválida, o Inspetor de propriedades exibirá as informações sobre como corrigir o erro. 


Sinalização da sintaxe por cores Ativa ou desativa a codificação por cores. Para informações sobre a alteração do esquema de cores, 
consulte Definição das cores de código. 


Recuar automaticamente Faz com que o código recue automaticamente quando você pressiona Enter enquanto escreve o código. A nova 
linha de código é recuada no mesmo nível da linha anterior. Para obter informações sobre a alteração do espaçamento do recuo, consulte a 
opção Tamanho da tabulação em Alteração do formato de código. 


Alteração do formato de código di 


Você pode alterar a aparência do código especificando preferências de formatação, como recuo, tamanho da linha e uso de 
maiúsculas/minúsculas dos nomes de tag e atributo. 


Todas as opções de formatação de código, exceto a opção Ignorar maiúscula/minúscula de, serão aplicadas somente aos novos documentos ou 
às adições a documentos criadas subsequentemente. 


Para reformatar documentos HTML existentes, abra o documento e selecione Comandos > Aplicar Formatação de Origem. 
1. Selecione Editar > Preferências. 


2. Selecione Formato do Código na lista Categoria à esquerda. 


3. Defina uma das seguintes opções: 
Recuo Indica se o código gerado pelo Dreamweaver deve ser recuado (de acordo com as regras de recuo especificadas nessas 
preferências) ou não. 
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Nota: A maioria das opções de recuo nesta caixa de diálogo se aplica somente ao código gerado pelo Dreamweaver, e não ao código 
digitado. Para fazer com que cada nova linha do código digitado recue no mesmo nível da linha anterior, selecione a opção Exibir > Recuo 
automático das opções de visualização de código. Para obter mais informações, consulte Definição da aparência do código. 


Com (Caixa de texto e menu pop-up) Especifica quantos espaços ou tabulações o Dreamweaver deve usar para recuar o código gerado. 
Por exemplo, se você digitar 3 na caixa e selecionar Tabulações no menu pop-up, o código gerado pelo Dreamweaver será recuado por 
meio de três caracteres de tabulação para cada nível de recuo. 


Tamanho da tabulação Determina o tamanho de cada caractere de tabulação na Visualização de código. Por exemplo, se a opção 
Tamanho da tabulação for definida como 4, cada tabulação será exibida na Visualização de código como um espaço em branco de quatro 
caracteres. Se, além disso, a opção Recuar com for definida como 3 Tabulações, o código gerado pelo Dreamweaver será recuado usando 
três caracteres de tabulação para cada nível de recuo, que aparece na Visualização de código como um espaço em branco de doze 
caracteres. 

Nota: O Dreamweaver aplica o recuo usando espaços ou tabulações. Ele não converte uma série de espaços em uma tabulação ao inserir 
código. 


Tipo de quebra de linha Especifica o tipo de servidor remoto (Windows, Macintosh ou UNIX) que hospeda o site remoto. A escolha do tipo 
corretor de caracteres de quebra de linha garante que o código-fonte HTML aparecerá corretamente quando visualizado no servidor 
remoto. Essa configuração também será útil que você estiver trabalhando com um editor de texto externo que reconheça determinados 
tipos de quebras de linha. Por exemplo, use CR LF (Windows) se o Bloco de Notas for o editor externo e use CR (Macintosh) se o 
SimpleText for o editor externo. 

Nota: No caso dos servidores conectados através do FTP, esta opção se aplica somente ao modo de transferência binário. O modo de 
transferência ASCII do Dreamweaver ignora esta opção. Se você baixar os arquivos usando o modo ASCII, o Dreamweaver definirá as 
quebras de linha com base no sistema operacional do seu computador. Se você carregar os arquivos usando o modo ASCIlI, as quebras de 
linha serão definidas como CR LF. 


Padrão de maiúsc./minúsc. da tag e Padrão de maiúsc./minúsc. do atributo Controla o uso de maiúsculas/minúsculas dos nomes de 
tag e atributo. Estas opções se aplicam a tags e atributos inseridos ou editados na Visualização de design, mas não se aplicam a tags e 
atributos digitados diretamente na Visualização de código ou a tags e atributos já presentes em um documento quando estes são abertos (a 
menos que você também selecione uma ou ambas as opções Ignorar maiúscula/minúscula de:). 

Nota: Essas preferências se aplicam somente a páginas HTML. O Dreamweaver as ignora em páginas XHTML porque as tags e os 
atributos em maiúsculas são XHTML inválidos. 


Ignorar maiúscula/minúscula de: Tags e Atributos Especifica se as opções de maiúsculas/minúsculas especificadas serão sempre 
forçadas, inclusive quando você abrir um documento HTML existente. Quando você selecionar uma dessas opções e clicar em OK para 
ignorar a caixa de diálogo, todas as tags ou atributos do documento atual serão imediatamente convertidos no uso de 
maiúsculas/minúsculas especificado, assim como todas as tags ou atributos de cada documento que você abrir desse momento em diante 
(até você desmarcar esta opção novamente). As tags ou os atributos digitados na Visualização de código e no Quick Tag Editor também 
são convertidos no uso de maiúsculas/minúsculas, bem como as tags ou os atributos que você insere usando o painel Inserir. Por exemplo, 
se você deseja que os nomes de tag sejam sempre convertidos em minúsculas, especifique minúsculas na opção Padrão de 
maiúsc./minúsc. da tag e selecione a opção Ignorar maiúscula/minúscula de: Tags. Quando você abrir um documento que contenha nomes 
de tag em maiúsculas, o Dreamweaver os converterá em minúsculas. 

Nota: As versões antigas do HTML permitiam nomes de tag e atributo em maiúsculas ou minúsculas, mas o XHTML requer minúsculas 
nos nomes de tag e atributo. A Web está adotando XHTML; portanto, geralmente é melhor usar nomes de tag e atributo em minúsculas. 


Tag TD: Não incluir quebra de linha na tag TD Lida com um problema de processamento que ocorre em alguns navegadores antigos 
quando há espaço em branco ou quebras de linha imediatamente após uma tag <td> ou imediatamente antes de uma tag </td>. Quando 
você seleciona esta opção, o Dreamweaver não grava quebras de linha depois ou antes da tag <td>, mesmo se a formatação na Biblioteca 
de tags indicar que a quebra de linha deve existir. 


Formatação avançada Permite definir opções de formatação do código Folhas de estilo em cascata (CSS) e das tags e atributos 
individuais no Editor de biblioteca de tags. 


Caractere de espaço em branco (Apenas versão em japonês) Permite selecionar &nbsp; ou espaço Zenkaku para código HTML. O 
espaço em branco selecionado nesta opção será usado para tags vazias durante a criação de uma tabela e quando a opção “Permitir 
vários espaços consecutivos” estiver ativada nas páginas de codificação em japonês. 


E A E pe PET P. iníci 
Definição das preferências de regravação de código fic 


Use as preferências de regravação de código a fim de especificar como e se o Dreamweaver modificará o código enquanto os documentos são 
abertos, ao copiar e colar elementos de formulário, e ao digitar valores de atributo e URLs usando ferramentas como o Inspetor de propriedades. 
Essas preferência não têm efeito quando você edita HTML ou scripts na Visualização de código. 


Se você desativar as opções de regravação, os itens de markup inválidos serão exibidos na janela Documento para o HTML que seria regravado. 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Selecione Regravação de código na lista Categoria à esquerda. 


3. Defina uma das seguintes opções: 
Corrigir tags abertas e aninhadas incorretamente Regrava tags de sobreposição. Por exemplo, <b><i>texto</b></i> é regravado como 
<b><i>texto</i></b>. Esta opção também insere aspas e colchetes de fechamento caso eles estejam ausentes. 
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Renomear itens de formulário ao colar Garante que você não terá nomes duplicados de objetos de formulário. Esta opção é ativada por 
padrão. 

Nota: Diferente das outras opções nesta caixa de diálogo de preferência, esta opção não se aplica quando você abre um documento, mas 
somente quando você copia e cola um elemento de formulário. 


Remover tags de finalização adicionais Exclui tags de finalização que não possuem uma tag de abertura correspondente. 


Avisar ao corrigir ou remover tags Exibe um resumo do HTML tecnicamente inválido que o Dreamweaver tentou corrigir. O resumo 
indica o local do problema (usando números de linha e coluna) para que você possa localizar a correção e garantir que ela está sendo 
processado conforme esperado. 


Nunca regravar código: Em arquivos com extensões Impede que o Dreamweaver regrave código em arquivos com as extensões 
especificadas. Esta opção é particularmente útil para arquivos que contenham tags de terceiros. 


Codificar <, >, & e " em valores de atributo usando & Garante que os valores de atributo digitados ou editados usando ferramentas do 
Dreamweaver como o Inspetor de propriedades conterão apenas caracteres legais. Esta opção é ativada por padrão. 

Nota: Esta opção e as seguintes não se aplicam às URLs digitadas na Visualização de código. Além disso, elas não ocasionam a 
alteração do código já existente em um arquivo. 


Não codificar caracteres especiais Impede que o Dreamweaver altere URLs para que usem apenas caracteres legais. Esta opção é 
ativada por padrão. 


Codificar caracteres especiais em URLs utilizando &% Garante que, ao digitar ou editar URLs usando ferramentas do Dreamweaver 
como o Inspetor de propriedades, essas URLs conterão somente caracteres legais. 


Codificar caracteres especiais em URLs utilizando % Opera da mesma maneira que a opção anterior, mas usa um método diferente de 
codificação de caracteres especiais. Esse método de codificação (através do sinal de porcentagem) pode ser mais compatível com os 
navegadores antigos, mas não funciona bem com os caracteres de alguns idiomas. 


dd aaa 2 já P. iníci 
Definição das cores de código dd 


Use as preferências de codificação por cor a fim de especificar cores para as categorias gerais de tags e elementos de código, como tags 
relacionadas a formulário ou identificadores JavaScript. Para definir preferências de cor para uma tag específica, edite a definição da tag no 
Editor de bibliotecas de tags. 

1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 

2. Selecione Codificação por cores na lista Categoria à esquerda. 


3. Selecione um tipo de documento da lista Tipos de documentos. Quaisquer edições que você fizer às preferências de codificação por cores 
afetará todos os documentos desse tipo. 


4. Clique no botão Editar esquema de cores. 


5. Na caixa de diálogo Editar esquema de cores, selecione um elemento de código na lista Estilos para e defina a cor do texto, a cor do fundo 
e (opcional) o estilo (negrito, itálico ou sublinhado). O código de amostra no painel de visualização é alterado para que corresponda às 
novas cores e estilos. 


Clique em OK para salvar as alterações e feche a caixa de diálogo Editar esquema de cores. 


6. Faça quaisquer outras seleções necessárias nas preferências de codificação por cores e clique em OK. 
Fundo padrão define a cor de fundo padrão para a Visualização de código e o Inspetor de código. 


Caracteres ocultos define a cor dos caracteres ocultos 
Plano de fundo do Código ativo define a cor do fundo para a Visualização de código ativo. A cor padrão é amarelo. 
Alterações no Código ativo define a cor de destaque do código que é alterado na Visualização de código ativo. A cor padrão é rosa. 


Plano de fundo de somente leitura define a cor de fundo para o texto somente leitura. 


é Para o início 
Uso de um editor externo 


Você pode especificar um editor externo para a edição de arquivos com extensões específicas. Por exemplo, é possível iniciar um editor de texto 


como BBEdit, Bloco de Notas ou TextEdit no Dreamweaver a fim de editar arquivos JavaScript (JS). 


Você pode atribuir editores externos diferentes para extensões diferentes. 


Definição de um editor externo para um tipo de arquivo 
1. Selecione Editar > Preferências. 


2. Selecione Tipos de arquivos/editores na lista Categoria à esquerda, defina as opções e clique em OK. 
Abrir na Visualização de código Especifica as extensões de nome de arquivo abertas automaticamente na Visualização de código do 
Dreamweaver. 
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Editor de código externo Especifica o editor de texto a ser usado. 


Recarregar arquivos modificados Especifica o comportamento quando o Dreamweaver detecta que as alterações foram feitas 
externamente em um documento aberto no Dreamweaver. 


Salvar ao iniciar Especifica se o Dreamweaver sempre deve salvar o documento atual antes de iniciar o editor, nunca salvar o documento 
ou perguntar a você se deseja salvar cada vez que iniciar o editor externo. 


Fireworks Especifica editores para vários tipos de arquivo de mídia. 


Inicialização de um editor de código externo 
*& Selecione Editar > Editar com editor externo. 

Mais tópicos da Ajuda 

Visão geral da barra de ferramentas de codificação 


Limpar arquivos em HTML do Microsoft Word 


(9) ex-nc-sa ) 


Avisos legais | Política de privacidade on-line 
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Otimização e depuração do código 


Limpar código 

Verificar se as tags e chaves estão balanceadas 
Verificar compatibilidade de navegador 

Validar documentos XML 

Validar documentos usando o validador de W3C (CS 5.5) 
Definir preferências do Validador 

Tornar as páginas compatíveis com XHTML 

Usar o depurador do ColdFusion (somente Windows) 


E: 2 dê Para o início 
Limpar código 
Você pode remover automaticamente tags vazias, combinar tags font aninhadas e tags, e também melhorar a confusão ou ilegibilidade do código 
HTML ou XHTML. 


Para obter informações sobre como limpar o HTML gerado em um documento do Microsoft Word, consulte Abertura e edição de documentos 
existentes . 


1. Abra um documento: 
e Se o documento estiver em HTML, selecione Comandos > Limpar HTML. 
* Se o documento estiver em XHTML, selecione Comandos > Limpar XHTML. 


Em um documento XHTML, o comando Limpar XHTML corrige erros de sintaxe XHTML, define o uso de maiúsculas/minúsculas dos 
atributos de tag para minúsculas, e adiciona ou reporta os atributos necessários ausentes de uma tag, além de executar operações de 
limpeza de HTML. 


2. Na caixa de diálogo exibida, selecione qualquer uma das opções e clique em OK. 
Nota: Dependendo do tamanho do documento e do número de opções selecionadas, pode levar várias segundos para que a limpeza seja 
concluída. 
Remover tags de contêiner vazias Remove quaisquer tags que não tenham conteúdo entre elas. Por exemplo, <b></b> e <font 
color="HFFO0000"></font> são tags vazias, mas a tag <b> em <b>algum texto</b> não. 


Remover tags aninhadas redundantes Remove todas as ocorrências redundantes de uma tag. Por exemplo, no código <b> Isto foi 
<b>realmente</b> o que eu quis dizer</b>, as tags b que envolvem a palavra realmente são redundantes e seriam removidas. 


Remover comentário HTML não Dreamweaver Remove todos os comentários que não foram inseridos pelo Dreamweaver. Por exemplo, 
<!--begin body text--> seria removido, mas <!--TemplateBeginEditable name="doctitle"--> não seria, porque ele é um comentário do 
Dreamweaver que marca o início de uma região editável em um modelo. 


Remover markup especial do Dreamweaver Remove os comentários que o Dreamweaver adiciona ao código para permitir que os 
documentos sejam atualizados automaticamente quando os modelos e itens de biblioteca forem atualizados. Se você selecionar esta opção 
ao limpar o código em um documento baseado em modelo, o documento é desanexado do modelo. Para obter mais informações, consulte 
Desanexar um documento de um modelo. 


Remover tag(s) específica(s) Remove as tags especificadas na caixa de texto adjacente. Use esta opção para remover tags 
personalizadas inseridas por outros editores visuais e outras tags que não devem aparecer no seu site (por exemplo, blink). Separe várias 
tags usando vírgulas (por exemplo, font,blink). 


Combinar tags <font> aninhadas quando possível Consolida duas ou mais tags font quando elas controlam o mesmo intervalo de texto. 
Por exemplo, <font size="7"><font color="4FF0000">big red</font></font> seria alterado para <font size="7" color="HFFO0000">big 
red</font>. 


Mostrar conclusão do logon Exibe uma caixa de alerta com detalhes sobre as alterações feitas no documento assim que a limpeza é 
concluída. 


ei - RR 
Verificar se as tags e chaves estão balanceadas ara o inicio 


Você pode verificar se as tags, os parênteses (()), as chaves (( |) e os colchetes ([]) na página estão balanceados. 'Balanceado' significa que 
cada tag, parêntese, chave ou colchete de abertura tem um sinal de fechamento correspondente e vice-versa. 


Verificação de tags balanceadas 
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1. Abra o documento na Visualização de código. 
2. Coloque o ponto de inserção no código aninhado que você deseja verificar. 


3. Selecione Editar > Selecionar tag-mãe. 


As tags delimitadoras correspondentes (e seu conteúdo) são selecionadas no código. Se você continuar selecionando Editar > Selecionar 
tag-mãe, e suas tags estiverem balanceadas, o Dreamweaver acabará selecionando as tags html e /html mais externas. 


Verificação de parênteses, chaves ou colchetes balanceados 
1. Abra o documento na Visualização de código. 
2. Coloque o ponto de inserção no código que você deseja verificar. 


3. Selecione Editar > Ajustar chaves. 


Todos os códigos entre os parênteses, as chaves ou os colchetes delimitadores estão selecionados. Se você escolher novamente Editar > 
Ajustar chaves, todo o código dentro dos parênteses, das chaves ou dos colchetes que delimitam a nova seleção será selecionado. 


Para o início 


Verificar compatibilidade de navegador 


O recurso Verificação de compatibilidade do navegador (VCN) ajuda a localizar combinações de HTML e CSS que podem acionar bugs de 
processamento do navegador. Esse recurso também testa o código nos documentos para verificar se há alguma propriedade ou valor CSS 
incompatível com os navegadores de destino. 


Nota: Esse recurso substitui a antiga Verificação do navegador de destino, mas retém a funcionalidade CSS. 
Para o início 


Validar documentos XML 


Você pode definir preferências para o Validador, os problemas específicos que o Validador deve verificar e os tipos de erros que o Validador 
deve reportar. 


1. Siga um destes procedimentos: 
* Em um arquivo XML ou XHTML, selecione Arquivo > Validar > Como XML. 
e A aba Validação do painel Resultados exibe a mensagem “Nenhum erro ou aviso” ou lista os erros de sintaxe localizados. 


2. Clique duas vezes em uma mensagem de erro para realçar o erro no documento. 
3. Para salvar o relatório como um arquivo XML, clique no botão Salvar relatório. 
4. Para visualizar o relatório no navegador principal (que permitirá a impressão do relatório), clique no botão Procurar relatório. 


Para o início 


Validar documentos usando o validador de W3C (CS 5.5) 


O Dreamweaver CS5.5 e posterior ajuda na criação de páginas da Web compatíveis com os padrões com o suporte incorporado do validador de 
W3C. O validador de W3C valida os documentos em HTML de acordo com os padrões de XHTML ou HTML. Você pode validar tanto documentos 
abertos, como arquivos postados em um servidor dinâmico. 


Use o relatório gerado depois da validação para corrigir erros em seu arquivo. 
Nota: O recurso validador W3C está disponível no Dreamweaver CS5.5 e posterior. A versão anterior do recurso, disponível no Dreamweaver 
CS4, ficou obsoleta para o Dreamweaver CS5. Consulte a documentação do Dreamweaver CS4 para obter mais informações sobre a versão 
anterior do recurso. 
Validar um documento aberto 

1. Selecione Janela > Resultados > Validação de W3C. 


2. Selecione Arquivo > Validar > Validar documento atual (W3C). 


Validar documento dinâmico 

Nos documentos dinâmicos, o Dreamweaver valida o código recebido pelo navegador. Este código é exibido quando você clica com o botão 
direito do mouse no seu navegador e escolhe a opção de exibir o código-fonte. A validação de documentos dinâmicos é especialmente útil para 
validar páginas dinâmicas que usam PHP, JSP, etc. 


A opção Validar documento dinâmico só fica ativada quando o URL da página validada começa com http. 
1. Selecione Janela > Resultados > Validação de W3C. 
2. Clique em Visualização dinâmica. 
3. Selecione Arquivo > Validar > Validar documento dinâmico (W3C). 


Nos documentos dinâmicos, quando você clica duas vezes em um erro no painel Validação de W3C, uma janela separada é aberta. A janela 
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exibe o código gerado pelo navegador, e a linha com o erro é realçada. 


Personalizar configurações de validação 


1. 


2 
3 
4. 
5 


Selecione Janela > Resultados > Validação de W3C. 


. No painel Validação de W3C, clique no ícone Validação de W3C (Reproduzir). Selecione Configurações. 


. Selecione um DOCTYPE para validação se um DOCTYPE não tiver sido explicitamente especificado para o documento. 


Se você não quiser que erros e avisos sejam exibidos, limpe as opções. 


. Clique em Gerenciar, se quiser excluir algum aviso ou erro que você tiver ocultado usando o painel Validação de W3C. Quando avisos e 


erros são removidos, eles não são exibidos quando você seleciona Mostrar tudo no painel Validação de W3C. 


Selecione Não mostrar a caixa de diálogo de notificação do validador de W3C, se você não quiser que essa caixa de diálogo seja exibida 
ao começar a validação. 


Trabalho com relatórios de validação 
Depois que a validação é concluída, os relatórios de validação são exibidos no painel Validação de W3C. 


Para obter mais informações sobre o erro ou o aviso, selecione o erro/aviso no painel Validação de W3C. Clique em Mais informações. 
Para salvar o relatório como um arquivo XML, clique em Salvar relatório. 


Para exibir o relatório inteiro em HTML, clique em Procurar relatório. O relatório de HTML fornece a lista completa de erros e avisos junto 
com um resumo. 


Para ir ao local no código que contém o erro, selecione o erro no painel Validação de W3C. Clique no botão Opções e selecione o Ir para 
linha. 


Para ocultar erros/avisos, selecione o erro/aviso. Clique no botão Opções, e selecione o Ocultar erro. 


Para exibir todos os erros e avisos, incluindo erros ocultos, clique no botão Opções. Selecione Mostrar tudo. Todos os erros e avisos ocultos 
que você excluiu na caixa de diálogo Preferências não serão listados. 


Para limpar todos os resultados no painel Validação de W3C, clique no botão Opções. Selecione Limpar resultados. 


Para o início 


Definir preferências do Validador 


O recurso Validar tags está obsoleto no Dreamweaver CS5. Entretanto, o Dreamweaver ainda oferece suporte para validadores de código 
externos que você instala como extensões. Quando você instala uma extensão externa de validador, o Dreamweaver lista suas preferências na 
categoria Validador da caixa de diálogo Preferências. 


d: 
2: 
8. 


Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 

Na lista Categoria à esquerda, selecione Validador. 

Selecione as bibliotecas de tags que serão usadas na validação. 

Você não pode selecionar várias versões da mesma biblioteca de tags ou linguagem; por exemplo, se você selecionar HTML 4.0, não 


poderá selecionar também HTML 3.2 ou HTML 2.0. Selecione a versão mais antiga que deseja usar na validação; por exemplo, se um 
documento contiver um código HTML 2.0 válido, ele também será válido para HTML 4.0. 


4. Clique em Opções e defina as opções para essas bibliotecas. 


5. Selecione as opções de exibição dos tipos de erros e avisos que deverão estar incluídos no relatório do Validador. 


6. Selecione os itens que o Validador deve verificar: 


Aspas no texto Indica que o Dreamweaver deve avisar você sobre cada uso de aspas no texto do documento. Você deve usar a entidade 
&quot; em vez das aspas no texto dos documentos HTML. 


Entidades no texto Indica que o Dreamweaver deve recomendar a alteração de determinados caracteres (como E comercial (&), sinal de 
menor que (<) e sinal de maior que (>)) para seus equivalentes da entidade HTML. 


Clique em OK para fechar a caixa de diálogo Opções do validador e, em seguida, clique em OK novamente para definir as preferências. 


Para o início 


Tornar as páginas compatíveis com XHTML 


Ao criar uma página, você pode torná-la compatível com XHTML. Também é possível tornar um documento HTML compatível com XHTML. 


Criação de documentos compatíveis com XHTML 


Í. 
2: 
3. 


Selecione Arquivo > Novo. 
Selecione uma categoria e um tipo para a página a ser criada. 
Selecione uma das definições de tipo de documento (DTD) XHTML no menu pop-up TipoDoc na extrema direita da caixa de diálogo e 
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clique em Criar. 
Por exemplo, você pode criar um documento HTML compatível com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no 
menu pop-up. 


Nota: Nem todos os tipos de documentos podem se tornar compatíveis com XHTML. 


Criação de documentos compatíveis com XHTML por padrão 
1. Selecione Editar > Preferências ou Dreamweaver > Preferences (Mac OS X) e selecione a categoria Novo documento. 
2. Selecione um documento padrão e uma das definições de tipo de documento XHTML no menu pop-up Tipo padrão de documento (DTD), e 
clique em OK. 


Por exemplo, você pode criar um documento HTML compatível com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict no 
menu pop-up. 


Tornar um documento HTML existente compatível com XHTML 
1. Abra um documento e siga um destes procedimentos: 
* Em um documento sem quadros, selecione Arquivo > Converter e selecione uma das definições de tipo de documento XHTML. 


Por exemplo, você pode criar um documento HTML compatível com XHTML selecionando XHTML 1.0 Transitional ou XHTML 1.0 Strict 
no menu pop-up. 


* Em um documento com quadros, selecione um quadro, selecione Arquivo > Converter e selecione uma das definições de tipo de 
documento XHTML. 


2. Para converter o documento inteiro, repita esta etapa para cada quadro e para o documento de conjunto de quadros. 


Nota: Você não pode converter uma ocorrência de um modelo, pois ela deve estar na mesma linguagem que o modelo em que está baseada. 
Por exemplo, um documento baseado em um modelo XHTML sempre será XHTML, e um documento baseado em um modelo não compatível 
com XHTML sempre será HTML e não poderá ser convertido em XHTML ou qualquer outra linguagem. 


7 E Para o início 
Usar o depurador do ColdFusion (somente Windows) ici 
Se você for um desenvolvedor do ColdFusion que usa o ColdFusion como servidor de teste do Dreamweaver, poderá visualizar as informações 
de depuração desse aplicativo sem sair do Dreamweaver. 


Nota: Não há suporte para esse recurso no Macintosh. Os desenvolvedores do Macintosh podem usar o recurso Visualizar no navegador (F12) 
para abrir uma página do ColdFusion em um navegador separado. Se a página contiver erros, as informações sobre as possíveis causas dos 
erros aparecerão na parte inferior da página. 

Se você estiver executando o ColdFusion MX 6.1 ou anterior, verifique se as configurações de depuração estão ativadas no Administrador do 
ColdFusion antes de começar a depuração. Se você estiver executando o ColdFusion MX 7 ou posterior, o Dreamweaver ativará as 
configurações para você. 


Além disso, verifique se o servidor de teste do Dreamweaver está executando o ColdFusion. Para obter mais informações, consulte Configuração 
de um servidor de teste. 


Para garantir que as informações de depuração serão atualizadas cada vez que uma página for exibida no navegador interno, assegure que o 
Internet Explorer procurará versões mais recentes do arquivo cada vez que ele for solicitado. No Internet Explorer, selecione Ferramentas > 
Opções da Internet, selecione a aba Geral e clique no botão Configurações na área Arquivos de Internet Temporários. Na caixa de diálogo 
Configurações, selecione a opção A cada visita à página. 


1. Abra a página do ColdFusion no Dreamweaver. 


2. Clique no ícone Depuração de servidor ($) na barra de ferramentas Documento. 


O Dreamweaver solicita a página do servidor ColdFusion e a exibe em uma janela interna do navegador Internet Explorer. Se a página 
contiver erros, as possíveis causas dos erros aparecerão na parte inferior da página. 


Ao mesmo tempo, o painel Depuração de servidor será aberto. O painel fornece um grande volume de informações úteis, como todas as 
páginas que o servidor executou para processar a página, todas as consultas SQL executadas na página e todas as variáveis de servidor e 
seus respectivos valores, se houver algum. O painel também fornece um resumo dos tempos de execução. 


3. Se a categoria Exceções aparecer no painel Depuração de servidor, clique no ícone de adição (+) para expandir a categoria. 


A categoria Exceções aparecerá se o servidor detectar um ou mais problemas na página. Expanda a categoria para obter mais informações 
sobre o problema. 


4. Alterne de volta para a Visualização de código (Visualização > Código) ou para a Visualização de design (Visualização > Design) e corrija o 
erro. 


5. Salve o arquivo e clique novamente no ícone Depuração do servidor. 


O Dreamweaver processa a página no navegador interno novamente e atualiza o painel Depuração de servidor. Se não houver mais 
problemas na página, a categoria Exceções não reaparecerá no painel. 
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6. Para sair do modo de depuração, alterne para Visualização de código (Exibir > Código) ou Visualização de design (Exibir > Design). 


Mais tópicos da Ajuda 


ERES 


Avisos legais | Política de privacidade on-line 
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Gerenciamento de bibliotecas de tags 


Sobre as bibliotecas de tags do Dreamweaver 
Abertura e fechamento do Editor de bibliotecas de tags 
Adição de bibliotecas, tags e atributos 

Edição de bibliotecas, tags e atributos 

Exclusão de bibliotecas, tags e atributos 


Para o início 


Sobre as bibliotecas de tags do Dreamweaver 


Uma biblioteca de tags, no Dreamweaver, é um conjunto de tags de um tipo específico, juntamente com informações sobre como o Dreamweaver 
deve formatar as tags. As bibliotecas de tags fornecem informações sobre as tags que o Dreamweaver usa para dicas de código, verificações de 
navegador de destino, Seletor de tags e outros recursos de codificação. Com o Editor de bibliotecas de tags, você pode adicionar e excluir 
bibliotecas de tags, tags, atributos e valores de atributo, definir propriedades para uma biblioteca de tags, incluindo o formato (para facilitar a 
identificação do código), e editar tags e atributos. 


Abertura e fechamento do Editor de bibliotecas de tags PRP EARESA 


1. Selecione Editar > Bibliotecas de tags para abrir o Editor de bibliotecas de tags. 
A caixa de diálogo do Editor de bibliotecas de tags é exibida. (As opções desta caixa de diálogo mudam de acordo com a tag selecionada.) 
2. Fecha o Editor de bibliotecas de tags da seguinte maneira: 
e Para salvar as alterações, clique em OK. 
e Para fechar o editor sem salvar as alterações, clique em Cancelar. 


Nota: Quando você clica em Cancelar, todas as alterações efetuadas no Editor de bibliotecas de tags são descartadas. Se você 
excluiu uma tag ou uma biblioteca de tags, ela será restaurada. 


Para o início 


Adição de bibliotecas, tags e atributos 


Você pode usar o Editor de bibliotecas de tags para adicionar bibliotecas de tags, tags e atributos às bibliotecas de tags no Dreamweaver. 


Adição de uma biblioteca de tags 
1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no botão de adição (+) e selecione Nova biblioteca de tags. 


2. Na caixa Nome da biblioteca, digite um nome (por exemplo, Tags diversas) e clique em OK. 


Adição de tags a uma biblioteca de tags 
1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no botão de adição (+) e selecione Novas tags. 
2. Selecione o menu pop-up Biblioteca de tags e selecione uma biblioteca de tags. 
3. Digite o nome da nova tag. Para adicionar mais de uma tag, separe os nomes das tags com uma vírgula e um espaço (por exemplo: 
cfgraph, cfgraphdata). 
4. Se as novas tags tiverem tags de fim correspondentes (</...>), selecione Possui tags de fim correspondentes. 
5. Clique em OK. 


Adição de atributos a uma tag 
No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), clique no botão de adição (+) e selecione Novos atributos. 


Selecione o menu pop-up Biblioteca de tags e selecione uma biblioteca de tags. 


No menu pop-up Tag, selecione uma tag. 


PP O NR 


Digite o nome do novo atributo. Para adicionar mais de um atributo, separe os nomes dos atributos com uma vírgula e um espaço (por 
exemplo: width, height). 
5. Clique em OK. 


Para o início 
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Edição de bibliotecas, tags e atributos 


Use o Editor de bibliotecas de tags para definir as propriedades de uma biblioteca de tags, e editar tags e atributos em uma biblioteca. 


Definição das propriedades de uma biblioteca de tags 


1. 


4. 


No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags (e não uma tag) na lista Tags. 

Nota: As propriedades das bibliotecas de tags aparecem somente quando uma biblioteca de tags é selecionada. As bibliotecas de tags 
são representadas pelas pastas de nível superior na lista Tags; por exemplo, a pasta de tags HTML representa uma biblioteca de tags, 
enquanto a pasta abbr da pasta de tags HTML representa uma tag. 


Na lista Usado em, selecione cada tipo de documento que deve usar a biblioteca de tags. 
Os tipos de documento que você seleciona aqui determinam quais tipos de documento fornecem dicas de código para a biblioteca de tags 


especificada. Por exemplo, se a opção HTML não estiver selecionada para um determinada biblioteca de tags, as dicas de código dessa 
biblioteca aparecerão em arquivos HTML. 


(Opcional) Digite o prefixo das tags na caixa Prefixo da tag. 
Nota: Um prefixo é usado para identificar uma tag no código como parte de uma biblioteca de tags específica. Algumas bibliotecas de tags 
não usam prefixos. 


Clique em OK. 


Edição de uma tag em uma biblioteca de tags 


Í. 
2 


No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), expanda uma biblioteca de tags na lista Tags e selecione uma tag. 


Defina uma das seguintes opções de formatação de tag: 
Quebras de linha Especifica onde o Dreamweaver inserirá quebras de linha para uma tag. 


Conteúdo Especifica como o Dreamweaver inserirá o conteúdo de uma tag; ou seja, se ele aplicará uma quebra de linha, formatação e 
recuo de regras ao conteúdo. 


Maiúsc.Iminúsc. Especifica o uso de maiúsculas/minúsculas em uma tag específica. Selecione Padrão, Minúsculas, Maiúsculas ou 
Maiúsculas e minúsculas Se você selecionar Maiúsculas e minúsculas, a caixa de diálogo Nome da tag em maiúsc./minúsc. Digite a tag 
respeitando o uso de maiúsculas/minúsculas que o Dreamweaver deve usar ao inseri-la (por exemplo, getProperty) e clique em OK. 


Definir padrão Define o uso padrão de maiúsculas/minúsculas de todas as tags. Na caixa de diálogo Padrão de maiúsc./minúsc. da tag 
exibida, selecione <MAIÚSCULAS> ou <minúsculas> e clique em OK. 
Provavelmente será necessário definir o uso padrão de maiúsculas/minúsculas para que fique em conformidade com os padrões XML e 
XHTML. 


Edição de um atributo para uma tag 


1. 


No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), expanda uma biblioteca de tags na caixa Tags, expanda uma tag e selecione 
um atributo de tag. 


No menu pop-up Maiúsc./minúsc. de atributo, selecione a opção Padrão, Minúsculas, Maiúsculas ou Maiúsculas e minúsculas. 


Se você selecionar Maiúsculas e minúsculas, a caixa de diálogo Nome do atributo em maiúsc./minúsc. Digite o atributo respeitando o uso 
de maiúsculas/minúsculas que o Dreamweaver deve usar ao inseri-lo (por exemplo, onClick e clique em OK. 


Clique no link Definir padrão para definir o uso padrão de maiúsculas/minúsculas de todos os nomes de atributo. 
No menu pop-up Tipo de atributo, selecione o tipo do atributo. 


Se você selecionar Enumerado, digite cada valor permitido para o atributo na caixa Valores. Separe os valores com vírgulas, mas sem 
espaços. Por exemplo, os valores enumerados do atributo showborder da tag cfchart são listados como yes,no. 


Para o início 


Exclusão de bibliotecas, tags e atributos 


1. No Editor de bibliotecas de tags (Editar > Bibliotecas de tags), selecione uma biblioteca de tags, uma tag ou um atributo na caixa Tags. 


2. Clique no botão de subtração (—). 


3. Clique em OK para excluir definitivamente o item. 


4. 


O item é removido da caixa Tags. 


Clique em OK para fechar o Editor de bibliotecas de tags e concluir a exclusão. 


Mais tópicos da Ajuda 


ERES 


Avisos legais | Política de privacidade on-line 


483 


484 


Importação de tags personalizadas para o Dreamweaver 


Sobre a importação de tags personalizadas para o Dreamweaver 
Importar tags de arquivos XML 

Importar tags personalizadas do ASP.NET 

Importar tags JSP de um arquivo ou servidor (web.xml) 
Importar tags JRun 


Para o início 


Sobre a importação de tags personalizadas para o Dreamweaver 


Você pode importar tags personalizadas para o Dreamweaver a fim de que se tornem parte integrante do ambiente de criação. Por exemplo, 
quando você começa a digitar uma tag personalizada importada na Visualização de código, um menu de dicas de código é exibido, listando os 
atributos da tag e permitindo que você selecione um deles. 


Para o início 


Importar tags de arquivos XML 
Você pode importar tags de um arquivo XML de definição de tipo de documento (DTD) ou de um esquema. 


1. Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags). 

2. Clique no botão de adição (+) e selecione Esquema DTD > Importar Arquivo XML DTD ou de esquema. 
3. Digite o nome do arquivo ou o URL do arquivo DTD ou de esquema. 
4 


. Digite o prefixo a ser usado com as tags. 
Nota: Um prefixo é usado para identificar uma tag no código como parte de uma biblioteca de tags específica. Algumas bibliotecas de tags 
não usam prefixos. 


5. Clique em OK. 


Para o início 


Importar tags personalizadas do ASP.NET 
Você pode importar tags personalizadas do ASP.NET para o Dreamweaver. 


Antes de começar, verifique se a tag personalizada está instalada no servidor de teste definido na caixa de diálogo Definição de sites (consulte 
Configuração de um servidor de teste). As tags compiladas (arquivos DLL) devem ser colocadas na pasta /bin da raiz do site. As tags não 
compiladas (arquivos ASCX) podem residir em qualquer diretório ou subdiretório virtual no servidor. Para obter mais informações, consulte a 
documentação do Microsoft ASP.NET. 

1. Abra uma página ASP.NET no Dreamweaver. 

2. Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags). 

3. Clique no botão de adição (+), selecione uma das seguintes opções e clique em OK: 


e Para importar todas as tags personalizadas do ASP.NET do servidor de aplicativo, selecione ASP.NET > Importar todas as tags 
personalizadas do ASP.NET. 


e Para importar apenas determinadas tags personalizadas do servidor de aplicativo, selecione ASP.NET > Importar todas as tags 
personalizadas do ASP.NET selecionadas. Mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla 
Command (Macintosh) enquanto clica nas tags da lista. 


Para o início 


Importar tags JSP de um arquivo ou servidor (web.xml) 
Importe uma biblioteca de tags JSP de vários tipos de arquivo ou de um servidor JSP para o Dreamweaver. 


1. Abra uma página JSP no Dreamweaver. 
. Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags). 
. Clique no botão de adição (+) e selecione JSP > Importar do arquivo (*.tld, *.jar, *.zip) ou JSP > Importar do servidor (web.xml.) 


. Clique no botão Procurar ou digite um nome para o arquivo que contém a biblioteca de tags. 


EN 


. Digite um URI para identificar a biblioteca de tags. 


O URI (Localizador uniforme de recursos) geralmente consiste no URL da organização que mantém a biblioteca de tags. O URL não é 
usado para visualizar o site da organização. Ele é usado para identificar exclusivamente a biblioteca de tags. 
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6. (Opcional) Digite o prefixo a ser usado com as tags. Algumas bibliotecas de tags usam um prefixo para identificar uma tag no código como 


7. 


Importar tags JRun 


parte de uma biblioteca de tags específica. 
Clique em OK. 


Para o início 


Se você usar o Adobe8 JRun"M, poderá importar suas tags JRun no Dreamweaver. 


q; 


Gg E w N 


Abra uma página JSP no Dreamweaver. 

Abra o Editor de bibliotecas de tags (Editar > Bibliotecas de tags). 

Clique no botão de adição (+) para selecionar JSP > Importar tags do servidor JRun Server da pasta. 
Digite um nome para a pasta que contém as tags JRun. 

Digite um URI para identificar a biblioteca de tags. 


O URI (Localizador uniforme de recursos) geralmente consiste no URL da organização que mantém a biblioteca de tags. O URL não é 
usado para visualizar o site da organização. Ele é usado para identificar exclusivamente a biblioteca de tags. 


(Opcional) Digite o prefixo a ser usado com as tags. Algumas bibliotecas de tags usam um prefixo para identificar uma tag no código como 
parte de uma biblioteca de tags específica. 


Clique em OK. 


(5) ex-nc-sa ) 
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Informações gerais sobre a codificação no Dreamweaver 


Linguagens com suporte 

Markup inválido 

Modificação automática de código 
Código XHTML 

Expressões regulares 

Código de comportamento de servidor 


E Para o início 
Linguagens com suporte 


Além dos recursos de edição de texto, o Adobeê DreamweaverQ oferece vários recursos, como dicas de código, para ajudar você a codificar nas 
seguintes linguagens: 


- HTML 

e XHTML 

e CSS 

e JavaScript 

e Linguagem de markup do ColdFusion (CFML) 
« VBScript (para ASP) 

e Ce Visual Basic (para ASP.NET) 

- JSP 

- PHP 


Não há suporte para outras linguagens, como Perl, nos recursos de codificação específicos de linguagem no Dreamweaver; por exemplo, você 
pode criar e editar arquivos Perl, mas as dicas de código não se aplicam a essa linguagem. 


- AI: Para o início 
Markup inválido 
Se o documento contiver um código inválido, o Dreamweaver exibirá esse código na Visualização de design e, opcionalmente, o realçará na 
Visualização de código. Se você selecionar o código na visualização, o Inspetor de propriedades exibirá as informações sobre por que ele é 
inválido e como corrigi-lo. 


Nota: A opção para realçar códigos inválidos na Visualização de código fica desativada por padrão. Para acioná-la, alterne para a Visualização 
de código (Exibir > Código) e depois selecione Visualização > Opções da visualização de código > Realçar código inválido. 
Você também pode especificar preferências para regravar automaticamente vários tipos de código inválido ao abrir um documento. 


as ” Za: Za Para o início 
Modificação automática de código 
Você pode definir opções que instruam o Dreamweaver limpar automaticamente o código manuscrito de acordo com os critérios especificados. 
No entanto, o código nunca é regravado, a menos que as opções de regravação de código sejam ativadas ou que você execute uma ação que 
altere o código. Por exemplo, o Dreamweaver não altera o espaço em branco nem altera as maiúsculas e minúsculas dos atributos, a menos que 
você use o comando Aplicar Formatação de Origem. 


Algumas dessas opções de regravação de código são ativadas por padrão. 


Os recursos de Roundtrip HTML do Dreamweaver permitem que você mova os documentos para frente e para trás entre um editor HTML 
baseado em texto e o Dreamweaver com pouco ou nenhum efeito no conteúdo e na estrutura do código-fonte HTML original do documento. 
Esses recursos incluem: 


e Você pode usar um editor de texto de terceiros para editar o documento atual. 


e Por padrão, o Dreamweaver não altera o código criado ou editado em outros editores HTML, mesmo se o código for inválido, a menos que 
você ative as opções de regravação de código. 


e O Dreamweaver não altera tags que não reconheça — incluindo as tags XML — porque ele não tem critérios que possa usar para julgá-las. 
Se uma tag não reconhecida sobrepuser outra tag (por exemplo, <MyNewTag><em>text</MyNewTag></em>), o Dreamweaver a marcará 
como um erro, mas não regravará o código. 
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e Se desejar, defina o Dreamweaver para realçar o código inválido na Visualização de código (em amarelo). Quando você selecionar uma 


seção realçada, o Inspetor de propriedades exibirá as informações sobre como corrigir o erro. 


Código XHTML 


O Dreamweaver gera o novo código XHTML e limpa o código XHTML existente de uma forma que atenda à maioria dos requisitos XHTML. As 


Para o início 


ferramentas que você precisa para atender a alguns requisitos XHTML restantes também são fornecidos. 


Nota: Alguns requisitos também são necessários em várias versões HTML. 


A tabela a seguir descreve os requisitos XHTML que o Dreamweaver atende automaticamente: 


Requisito XHTML 


Deve haver uma declaração DOCTYPE no documento anterior 
ao elemento raiz e a declaração deve referenciar um dos três 
arquivos de definição de tipo de documento (DTD) para XHTML 
(strict, transitional ou frameset). 


O elemento raiz do documento deve ser html e o elemento html 
deve designar o espaço para nome XHTML. 


Um documento padrão deve ter os elementos estruturais head, 
title e body. Um documento de conjunto de quadros deve ter os 
elementos estruturais head, title e frameset. 


Todos os elementos do documento devem ser adequadamente 
aninhados: 


<p>Este é um <i>péssimo exemplo.</p></i> <p>Este é um 
<i>bom exemplo.</i></p> 


Todos os nomes de elemento e atributo devem ser minúsculos. 


Cada elemento deve ter uma tag de finalização, a não ser que 
isso seja declarado na DTD como EMPTY. 


Os elementos vazios devem ter uma tag de finalização ou a tag 
de abertura deve ser finalizada com />. Por exemplo, <br> não é 
válido. A forma correta é <br></br> ou <br/>. Estes são os 
elementos vazios: area, base, basefont, br, col, frame, hr, img, 
input, isindex, link, meta e param. 


Para compatibilidade com versões anteriores em navegadores 
que não são ativados para XML, deve haver um espaço antes de 
/> (por exemplo, <br />, e não <br/>). 


Os atributos não podem ser minimizados; por exemplo, 
<td nowrap> não é válido. A forma correta é 
<td nowrap="nowrap">. 


Isso afeta os seguintes atributos: checked, compact, declare, 
defer, disabled, ismap, multiple, noresize, noshade, nowrap, 
readonly e selected. 


Todos os valores de atributo devem ser envolvidos por aspas. 


Os seguintes elementos devem ter um atributo id, bem como um 
atributo name: a, applet, form, frame, iframe, img e map. Por 
exemplo, <a name="intro">Introduction</a> não é válido; a forma 
correta é 


Ações do Dreamweaver 


Adiciona um XHTML DOCTYPE a um documento XHTML: 


<IDOCTYPE himl PUBLIC "-/AN3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- 
transitional.dtd"> 


Se o documento XHTML tiver um conjunto de quadros: 


<IDOCTYPE himl PUBLIC "-/AW3C//DTD XHTML 1.0 
Frameset//EN" "http:/Anww .w3.org/TR/xhtml1/DTD/xhtml1- 
frameset.dtd"> 


Adiciona o atributo namespace ao elemento html, da seguinte 
maneira: 


<html xmins="http:/Avww.w3.org/1999/xhtml"> 


Um documento padrão inclui os elementos head, title e body. Um 
documento de conjunto de quadros inclui os elementos head, title 
e frameset. 


Gera um código corretamente aninhado e, ao limpar o XHTML, 
corrige o aninhamento do código que não foi gerado pelo 
Dreamweaver. 


Força os nomes de elemento e atributo HTML a estarem em 
minúsculas no código XHTML gerado e ao limpar o XHTML, 
independentemente das preferências de minúsculas ou 
maiúsculas da tag e do atributo. 


Insere tags de finalização no código gerado e ao limpar o 
XHTML. 


Insere elementos vazios com um espaço antes da barra de 
fechamento nas tags vazias do código gerado e ao limpar o 
XHTML. 


Insere pares completos de atributo/valor no código gerado e ao 
limpar o XHTML. 


Nota: Se um navegador HTML não oferecer suporte a HTML 4, 
pode ser que ele não consiga interpretar esses atributos 
boolianos quando eles aparecerem na forma completa. 


Delimita os valores de atributo com aspas no código gerado e ao 
limpar o XHTML. 


Define os atributos name e id para o mesmo valor, sempre que o 
atributo name é definido por um Inspetor de propriedades no 
código gerado pelo Dreamweaver e ao limpar o XHTML. 
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<a id="intro">Introduction</a> ou <a id="section1" name="intro"> 
Introduction</a>. 


No caso dos atributos com valores de um tipo enumerado, os Força os valores de tipo enumerado a serem minúsculos no 
valores devem estar em minúsculas. código gerado e ao limpar o XHTML. 


Um valor de tipo enumerado é um valor que consta em uma lista 
especificada de valores permitidos; por exemplo, o atributo align 
tem os seguintes valores permitidos: center, justify, left e right. 


Todos os elementos de script e estilo devem ter um atributo type. Define os atributos type e language nos elementos script e o 
atributo type nos elementos style, no código gerado e ao limpar o 


(O atributo type do elemento script tem sido obrigatório desde o XHTML. 


HTML 4, quando o atributo language se tornou obsoleto.) 


Todos os elementos img e area devem ter um atributo alt. Define esses atributos no código gerado e, ao limpar o XHTML, 


relata atributos alt ausentes. 


”, Para o início 
Expressões regulares 


As expressões regulares são padrões que descrevem combinações de caracteres em texto. Use-as nas pesquisas de código para descrever 
conceitos como linhas que começam com 'var” e valores de atributo que contêm um número. 


A tabela a seguir lista os caracteres especiais nas expressões regulares, seus significados e exemplos de uso. Para procurar um texto que 
contenha um dos caracteres especiais da tabela, aplique o escape ao caractere especial precedendo-o com uma barra invertida. Por exemplo, 
para procurar o asterisco real na frase some conditions apply*, o padrão de pesquisa pode ter a seguinte aparência: applyl*. Se você não aplicar 
o escape ao asterisco, encontrará todas as ocorrências de “apply” (bem como qualquer ocorrência de “appl”, “applyy” e “applyyy”, e não apenas 


as seguidas por asterisco. 


Caractere Corresponde a Exemplo 

A Início da entrada ou linha. "T corresponde a “T” em “This good 
earth”, mas não em “Uncle Tom's Cabin” 

$ Fim da entrada ou linha. h$ corresponde a “h” em “teach”, mas não 
em “teacher” 

* O caractere precedente O ou mais vezes. um* corresponde a “um” em “rum”, “umm” 

em “yummy" e “u” em “huge” 

+ O caractere precedente uma ou mais um+ corresponde a “um” em “rum” e 
vezes. “umm” em “yummy”, mas não tem 

nenhuma correspondência em “huge” 

? O caractere precedente no máximo uma st?on corresponde a “son” em “Johnson” e 
vez (ou seja, indica que o caractere “ston” em “Johnston”, mas não tem 
precedente é opcional). nenhuma correspondência em “Appleton” 

ou “tension” 
Qualquer caractere único, exceto o .an corresponde a “ran” e “can” na frase 
caractere de nova linha. “bran muffins can be tasty” 

xly xouy FFO0000/0000FF corresponde a “FF0000” 

em bgcolor="H4FFO0000" e “O000FF” em 
font color="$0000FF" 

(n) Exatamente n ocorrências do caractere of2) corresponde a “oo” em “loom” e às 
precedente. duas primeiras letras o em “mooooo”, mas 

não tem nenhuma correspondência em 
“money” 

(nm) No mínimo n e no máximo m ocorrências F(2,4) corresponde a “FF” em “&FF0000” e 
do caractere precedente. às quatro primeiras letras F em 4FFFFFF 

[abc] Qualquer um dos caracteres entre [e-g] corresponde a “e” em “bed”, “f” em 


colchetes. Especifique uma faixa de 
caracteres com um hífen (por exemplo, [a- 
f] equivale a [abcdefl). 
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nm! 


“olly” e "g” em “guard” 


["abc] 


ho) 


'B 


id 


AD 


VN 
in 
W 


Is 


IS 


W 


iw 


W 


Control+Enter ou Shift+Enter (Windows), 
ou Control+ Return ou Shift+Return ou 
Command+ Return (Macintosh) 


Qualquer caractere que não está entre 
colchetes. Especifique uma faixa de 
caracteres com um hífen (por exemplo, 
["a-f] equivale a ["abcdef]). 


Um limite de palavra (como um espaço ou 
um retorno de carro). 


Algo que não seja um limite de palavra. 


Qualquer caractere de dígito. Equivalente 
a [0-9]. 


Qualquer caractere que não seja dígito. 
Equivalente a ["0-9]. 


Feed de formulário. 
Feed de linha. 
Retorno de carro. 


Qualquer caractere único de espaço em 
branco, incluindo espaço, tabulação, feed 
de formulário ou feed de linha. 


Qualquer caractere único de espaço que 
não seja em branco. 


Uma tabulação. 


Qualquer caractere alfanumérico, 
incluindo sublinhado. Equivalente a [A-Za- 
z0-9 ]. 


Qualquer caractere que não seja 
alfanumérico. Equivalente a [2A-Za-z0- 


9]. 


Caractere de retorno. Verifique se você 
desmarcou a opção Ignorar diferenças de 
espaço em branco ao realizar essa 
pesquisa, caso não esteja usando 
expressões regulares. Observe que isso 
corresponde a um caractere específico, e 
não à noção geral de uma quebra de 
linha. Por exemplo, isso não corresponde 
a uma tag <br> ou <p>. Os caracteres de 
retorno aparecem como espaços na 
Visualização de design, e não como 
quebras de linha. 


[Naeiou] corresponde inicialmente a “r” em 
“orange”, “b” em “book” e “k” em “eek!” 


ibb corresponde a “b” em “book”, mas não 
tem nenhuma correspondência em 
“goober" ou “snob” 


iBb corresponde a “b” em “goober”, mas 
não tem nenhuma correspondência em 
“book” 


id corresponde a “3” em “C3P0O” e “2” em 
“apartment 26” 


iD corresponde a “S” em “9008” e “Q” em 
“Q45” 


isbook corresponde a "book” em “blue 
book”, mas não tem nenhuma 
correspondência em “notebook” 


iSbook corresponde a “book” em 
“notebook”, mas não tem nenhuma 
correspondência em “blue book” 


blw* corresponde a “barking” em “the 
barking dog”, e “big” e “black” em “the big 
black dog” 


WW corresponde a “&” em “Jake&Mattie” e 
“Y%" em “100%” 


Use parênteses para executar agrupamentos na expressão regular que será referenciada posteriormente. Em seguida, use $1, $2, $3 e assim 
sucessivamente, no campo Substituir por para se referir ao primeiro, segundo, terceiro e subsequentes agrupamentos entre parênteses. 


Nota: Na caixa Procurar por, para se referir a um agrupamento entre parênteses anterior na expressão regular, use 1, |2, 13 e assim por diante, 


em vez de $1, 42, 83. 


Por exemplo, a procura por ((d+)V(Ad+)VAd+) e sua substituição por $2/$1/$83 trocará o dia e o mês em uma data separada por barras, 
convertendo entre datas em estilo americana e em estilo europeu. 


Código de comportamento de servidor 


Para o início 


Quando você desenvolver uma página dinâmica e selecionar um comportamento de servidor no painel Comportamentos de servidor, o 
Dreamweaver inserirá um ou mais blocos de código na página para fazer com que o comportamento de servidor funcione. 


Se você alterar manualmente o código em um bloco de códigos, não poderá usar mais painéis como Ligações e Comportamentos de servidor. O 
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Dreamweaver procura padrões específicos no código de página para detectar comportamentos de servidor e exibi-los no painel Comportamentos 
de servidor. Se você alterar o código em um bloco de códigos de qualquer forma, o Dreamweaver não poderá mais detectar o comportamento do 
servidor e exibi-lo no painel Comportamentos de servidor. No entanto, o comportamento do servidor ainda existirá na página e você não poderá 
editá-lo no ambiente de codificação do Dreamweaver. 


Mais tópicos da Ajuda 
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Edição do código na Visualização de design 


Sobre a edição do código na Visualização de design 
Seleção de tags-filha na Visualização de design 

Edição do código com o Inspetor de propriedades 
Edição do CFML com o Inspetor de propriedades 
Alterar atributos com o Inspetor de tags 

Visão geral do Quick Tag Editor 

Edição de código com o Quick Tag Editor 

Uso do menu de dicas no Quick Tag Editor 

Edição de código com o seletor de tags 

Gravação e edição de scripts na Visualização de design 
Edição de scripts na página usando o Inspetor de propriedades 
Uso de comportamentos JavaScript 


Para o início 


Sobre a edição do código na Visualização de design 


O Dreamweaver permite criar e editar visualmente páginas da Web sem que você precise se preocupar com o código-fonte subjacente. No 
entanto, haverá momentos em que provavelmente será necessário editar o código para ter maior controle ou para solucionar problemas da 
página da Web. O Dreamweaver permite que você edite algum código enquanto está trabalhando na Visualização de design. 


Esta seção foi projetada para pessoas que preferem trabalhar na Visualização de design, mas que também desejam acessar rapidamente o 
código. 


Para o início 


Seleção de tags-filha na Visualização de design 


Se você selecionar um objeto na Visualização de design que contém tags-filha, por exemplo, uma tabela HTML, poderá selecionar rapidamente a 
primeira tag-filha desse objeto clicando em Editar > Selecionar filho. 


Nota: Esse comando só estará ativado na Visualização de design. 
Por exemplo, a tag <table> normalmente tem tags-filha <tr>. Se você selecionar uma tag <table> no seletor de tags, poderá selecionar a primeira 


linha na tabela clicando em Editar > Selecionar filho. O Dreamweaver selecionará a primeira tag <tr> no seletor de tags. Como a tag <tr> possui 
tags-filha, chamadas tags <td>, se você clicar novamente em Editar > Selecionar filho, a primeira célula da tabela será selecionada. 


Para o início 


Edição do código com o Inspetor de propriedades 


Você pode usar o Inspetor de propriedades para inspecionar e editar os atributos de texto ou de objetos na página. As propriedades mostradas 
no Inspetor de propriedades geralmente correspondem aos atributos das tags. A alteração de uma propriedade no Inspetor de propriedades 
normalmente tem o mesmo efeito que alterar o atributo correspondente na Visualização de código. 


Nota: O Inspetor de tags e o Inspetor de propriedades permitem que você visualize e edite os atributos de uma tag. O Inspetor de tags permite 
que você visualize e edite cada atributo associado a uma tag específica. O Inspetor de propriedades mostra somente os atributos mais comuns, 
mas fornece um conjunto mais sofisticado de controles para alterar os valores desses atributos, e permite editar determinados objetos (como 
colunas de tabela) que não correspondem a tags específicas. 

1. Clique no texto ou selecione um objeto na página. 


O Inspetor de propriedades do texto ou objeto aparece abaixo da janela Documento. Se o Inspetor de propriedades não estiver visível, 
selecione Janela > Propriedades. 


2. Faça as alterações nos atributos no Inspetor de propriedades. 


Para o início 


Edição do CFML com o Inspetor de propriedades 
Use o Inspetor de propriedades para inspecionar e modificar o markup do ColdFusion na Visualização de design. 


1. No Inspetor de propriedades, clique no botão Atributos para editar os atributos da tag ou adicionar novos. 
2. Se a tag tiver conteúdo entre suas tags de abertura e finalização, clique no botão Conteúdo para editar o conteúdo. 


O botão Conteúdo aparecerá somente se a tag selecionada não for uma tag vazia (ou seja, se ela contiver uma tag de abertura e uma tag 
de finalização). 
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3. Se a tag contiver uma expressão condicional, faça as alterações nela na caixa Expressão. 


Para o início 


Alterar atributos com o Inspetor de tags 


Use o Inspetor de tags para editar ou adicionar atributos e valores de atributos. O Inspetor de tags permite editar tags e objetos usando uma folha 
de propriedades similar às encontradas em outros ambientes de desenvolvimento integrado (IDEs). 


1. Siga um destes procedimentos na janela Documento: 


Na Visualização de código (ou no Inspetor de código), clique em qualquer lugar no nome de uma tag ou em seu conteúdo. 


Na Visualização de design, selecione um objeto ou selecione uma tag no Seletor de tags. 


2. Abra o Inspetor de tags (Janela > Inspetor de tags) e selecione a aba Atributos. 


Os atributos da seleção e seus valores atuais aparecem no Inspetor de tags. 


3. Execute um dos seguintes procedimentos no Inspetor de tags: 


Para visualizar os atributos organizados pela categoria, clique no botão Mostrar visualização de categoria E 

Para visualizar os atributos em uma lista alfabética, clique no botão Mostrar visualização de lista EM 

Para alterar um valor do atributo, selecione o valor e edite-o. 

Para adicionar um valor para um atributo sem valor, clique na coluna de valor de atributo à direita do atributo e adicione um valor. 


Se o atributo usar valores predefinidos, selecione um valor no menu pop-up (ou no seletor de cores) à direita da coluna de valor de 
atributo. 


Se o atributo adotar um valor de URL, clique no botão Procurar ou use o ícone Apontar para arquivo a fim de selecionar um arquivo ou 
digite o URL na caixa. 


Se o atributo usar um valor de uma origem de conteúdo dinâmico (como um banco de dados), clique no botão Dados dinâmicos à 
direita da coluna de valor de atributo. Em seguida, selecione uma origem. 


Para excluir o valor do atributo, selecione o valor e pressione Backspace (Windows) ou Delete (Macintosh). 
Para alterar o nome de um atributo, selecione o nome do atributo e edite-o. 


Nota: Se você alterar o nome de um atributo padrão e, em seguida, adicionar um valor para esse atributo, o atributo e seu novo valor 
serão movidos para a categoria apropriada. 


Para adicionar um novo atributo que ainda não esteja listado, clique no espaço vazio abaixo do último nome de atributo listado e digite 
um novo nome de atributo. 


4. Pressione Enter (Windows) ou Return (Macintosh), ou clique em qualquer outro lugar no Inspetor de tags para atualizar a tag no 
documento. 


Para o início 


Visão geral do Quick Tag Editor 


Use o Quick Tag Editor para inspecionar, inserir e editar rapidamente as tags HTML sem sair da Visualização de design. 


Se você digitar um HTML inválido no Quick Tag Editor, o Dreamweaver tentará corrigi-lo para você inserindo aspas de fechamento e colchetes 
angulares de fechamento quando necessário. 


Para definir as opções do Quick Tag Editor, abra o editor pressionando Control-T (Windows) ou Command-T (Macintosh). 


O Quick Tag Editor possui três modos: 


e O modo Inserir HTML é usado para inserir um novo código HTML. 


e O modo Editar tag é usado para editar uma tag existente. 


* O modo Colocar tag ao redor é usado para colocar uma nova tag ao redor de uma seleção atual. 


Nota: O modo em que o Quick Tag Editor é aberto depende da seleção atual na Visualização de design. 


Nos três modos, o procedimento básico para uso do Quick Tag Editor é o mesmo: abra o editor, digite ou edite tags e atributos, e feche o 
editor. 


Você pode percorrer os três modos pressionando Control+T (Windows) ou Command+T (Macintosh) enquanto o Quick Tag Editor está ativo. 


Para o início 


Edição de código com o Quick Tag Editor 


Use o Quick Tag Editor para inserir e editar rapidamente as tags HTML sem sair da Visualização de design. 
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Inserção de uma tag HTML 
1. Na Visualização de design, clique na página para colocar o ponto de inserção no local em que você deseja inserir o código. 
2. Pressione Control+T (Windows) ou Command+T (Macintosh). 


O Quick Tag Editor é aberto no modo Inserir HTML. 


Inserir HTML: <> 


Iam atwo-year-old part Siamese cat who lives in San Francisco with my two owners. 


3. Digite a tag HTML e pressione Enter. 
A tag é inserida no código, juntamente com uma tag de finalização correspondente, se aplicável. 


4. Pressione Escape para sair sem fazer alterações. 


Edição de uma tag HTML 
1. Selecione um objeto na Visualização de design. 


Você também pode selecionar a tag que deseja editar no seletor de tags na parte inferior da janela Documento. Para obter mais 
informações, consulte Edição de código com o seletor de tags. 


2. Pressione Control+T (Windows) ou Command+T (Macintosh). 
O Quick Tag Editor é aberto no modo Editar tag. 


3. Digite novos atributos, edite atributos existentes ou edite o nome da tag. 


4. Pressione Tab para mover-se de um atributo para o seguinte; pressione Shift+Tab para retornar. 
Nota: Por padrão, as alterações são aplicadas ao documento quando você pressiona Tab ou Shift+Tab. 


5. Para fechar o Quick Tag Editor e aplicar todas as alterações, pressione Enter. 
6. Para sair sem fazer nenhuma outra alteração, pressione Escape. 


Delimitação da seleção atual com tags HTML 


1. Selecione o texto sem formatação ou um objeto na Visualização de design. 
Nota: Se você selecionar texto ou um objeto que inclua uma tag HTML de abertura ou finalização, o Quick Tag Editor será aberto no 
modo Editar tag, e não no modo Colocar tag ao redor. 


2. Pressione Control+T (Windows) ou Command+T (Macintosh), ou clique no botão do Quick Tag Editor no Inspetor de propriedades. 
O Quick Tag Editor é aberto no modo Colocar tag ao redor. 

3. Digite uma tag de abertura única, como strong, e pressione Enter (Windows) ou Return (Macintosh). 
A tag é inserida no início da seleção atual, enquanto uma tag de finalização correspondente é inserida no final. 


4. Para sair sem fazer nenhuma alteração, pressione Escape. 


Uso do menu de dicas no Quick Tag Editor did 


O Quick Tag Editor inclui um menu de dicas de atributos que lista todos os atributos válidos da tag que você está editando ou inserindo. 
Você também pode desativar o menu de dicas ou ajustar o atraso antes que o menu seja exibido no Quick Tag Editor. 


Para ver um menu de dicas que lista os atributos válidos para uma tag, faça uma pausa rápida enquanto edita um nome de atributo no Quick Tag 
Editor. Um menu de dicas é exibido, listando todos os atributos válidos para a tag que você está editando. 


Da mesma forma, para ver um menu de dicas que lista nomes de tag válidos, faça uma pausa enquanto digita ou edita um nome de tag no Quick 
Tag Editor. 


Nota: As preferências de dicas de código do Quick Tag Editor são controladas pelas preferências normais de dicas de código. Para obter mais 


informações, consulte Definir preferências de dicas de código. 


Uso de um menu de dicas 
1. Siga um destes procedimentos: 


e Comece a digitar um nome de tag ou atributo. A seleção no menu Dicas de código vai para o primeiro item que inicia com as letras que 
você digitou. 


e Use as teclas para cima ou para baixo a fim de selecionar um item. 
* Use a barra de rolagem para localizar um item. 


2. Pressione Enter para inserir o item selecionado ou clique duas vezes em um item para inseri-lo. 
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3. Para fechar o menu de dicas sem inserir um item, pressione Escape ou continue digitando. 


Desativação do menu de dicas ou alteração do atraso antes que o menu apareça 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e selecione Dicas de código. 


A caixa de diálogo Preferências de dicas de código é exibida. 


2. Para desativar o menu de dicas, cancele a seleção da opção Ativar dicas de código. 


3. Para alterar o atraso antes que o menu apareça, ajuste o controle deslizante Atraso e clique em OK. 


Para o início 


Edição de código com o seletor de tags 


Você pode usar o seletor de tags para selecionar, editar ou remover tags sem sair da Visualização de design. O seletor de tags está localizado 
na barra de status, na parte inferior da janela Documento, e mostra uma série de tags: 


«<body> <form> <table» <tr> 


Edição ou exclusão de uma tag 
1. Clique no documento. 


As tags aplicadas no ponto de inserção aparecem no seletor de tags. 


2. No seletor de tags, clique com o botão direito do mouse em uma tag (Windows) ou mantenha pressionada a tecla Control enquanto clica 
em uma tag (Macintosh). 


3. Para editar uma tag, selecione Editar tag no menu. Faça as alterações no Quick Tag Editor. Para obter mais informações, consulte Edição 
de código com o Quick Tag Editor. 


4. Para excluir uma tag, selecione Remover tag no menu. 


Seleção de um objeto correspondente a uma tag 
1. Clique no documento. 


As tags aplicadas no ponto de inserção aparecem no seletor de tags. 
2. Clique em uma tag no seletor de tags. 
O objeto representado pela tag é selecionado na página. 


Use esta técnica para selecionar linhas (tags tr) ou células (tags td) de tabela individuais. 


Para o início 


Gravação e edição de scripts na Visualização de design 


Você pode trabalhar com JavaScripts e VBScripts do cliente tanto na Visualização de código quanto na Visualização de design, da seguinte 
maneira: 


e Grave um script JavaScript ou VBScript para a página sem sair da Visualização de design. 
e Crie um link no documento para um arquivo de script externo sem sair da Visualização de design. 
e Edite um script sem sair da Visualização de design. 


Antes de iniciar, selecione Exibir > Auxílios visuais > Elementos invisíveis para garantir que os marcadores de script aparecerão na página. 


Gravação de um script do cliente 
1. Coloque o ponto de inserção no local onde deve ser inserido o script. 
2. Selecione Inserir > HTML > Objetos de script > Script. 


3. Selecione a linguagem de script no menu pop-up Linguagem. 

Se você estiver usando JavaScript e não tiver certeza da versão, selecione JavaScript em vez de JavaScript1l.1 ou JavaScript1.2. 
4. Digite ou cole o código de script na caixa Conteúdo. 

Não é preciso incluir as tags script de abertura e finalização. 


5. Digite ou cole o código HTML na caixa Nenhum script. Os navegadores que não oferecem suporte à linguagem de script escolhida exibem 
esse código, em vez de executarem o script. 


6. Clique em OK. 


Vinculação a um arquivo de script externo 
1. Coloque o ponto de inserção no local onde deve ser inserido o script. 
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art 


Selecione Inserir > HTML > Objetos de script > Script. 
Clique em OK sem digitar dados na caixa Conteúdo. 
Selecione o marcador de script na Visualização de design da janela Documento. 


No Inspetor de propriedades, clique no ícone de pasta, navegue até o arquivo de script externo desejado e selecione-o, ou digite o nome de 
arquivo na caixa Origem. 


Edição de um script 


2; 
2: 


Selecione o marcador de script. 
No Inspetor de propriedades, clique no botão Editar. 


O script é exibido na caixa de diálogo Propriedades do script. 


Se você estiver vinculado a um arquivo de script externo, o arquivo será aberto na Visualização de código, na qual você poderá fazer as 
edições. 


Nota: Se houver código entre as tags de script, a caixa de diálogo Propriedades do script será aberta, mesmo se também houver um link 
para um arquivo de script externo. 


. Na caixa Linguagem, especifique JavaScript ou VBScript como linguagem do script. 


4. No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor. 


. (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente. 


Clique no ícone de pasta 5 ou no botão Procurar para selecionar um arquivo ou digite o caminho. 


. Edite o script e clique em OK. 


Edição de scripts ASP do servidor na Visualização de design 
Use o Inspetor de propriedades do script ASP para inspecionar e modificar scripts ASP do servidor na Visualização de design. 


d: 
2: 
8. 


Na Visualização de design, selecione o ícone visual da tag de linguagem de servidor. 
No Inspetor de propriedades do script ASP, clique no botão Editar. 
Edite o script ASP do servidor e clique em OK. 


Para o início 


Edição de scripts na página usando o Inspetor de propriedades 


4. 


No Inspetor de propriedades, selecione a linguagem de script no menu pop-up Linguagem ou digite um nome de linguagem na caixa 
Linguagem. 
Nota: Se você estiver usando JavaScript e não tiver certeza da versão, selecione JavaScript em vez de JavaScript1.1 ou JavaScript1.2. 


2. No menu pop-up Tipo, especifique o tipo do script: do cliente ou do servidor. 


3. (Opcional) Na caixa Origem, especifique um arquivo de script vinculado externamente. Clique no ícone de pasta ED para selecionar o 


arquivo ou digite o caminho. 
Clique em Editar para modificar o script. 


Para o início 


Uso de comportamentos JavaScript 


Você pode anexar facilmente comportamentos JavaScript (no lado do cliente) nos elementos de página, usando a aba Comportamentos do 
Inspetor de tags. Para obter mais informações, consulte Aplicação de comportamentos internos do JavaScript. 


Mais tópicos da Ajuda 


[63] ex-ne-sa ] 
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Recolhimento de código 


Sobre o recolhimento de código 
Recolhimento e expansão de fragmentos de código 
Colagem e movimentação de fragmentos de código recolhidos 


Sobre o recolhimento de código ni 
Você pode recolher e expandir fragmentos de código para que possa visualizar diferentes seções do documento sem precisar usar a barra de 
rolagem. Por exemplo, para ver todas as regras CSS na tag head que se aplica a uma tag div mais abaixo na página, recolha tudo o que estiver 
entre as tags head e div, a fim de que você possa ver as duas seções de código simultaneamente. Embora você possa selecionar fragmentos de 
código fazendo seleções na Visualização de design ou Visualização de código, recolha o código apenas na Visualização de código. 

Nota: Os arquivos criados nos modelos do Dreamweaver exibem todos os códigos como totalmente expandidos, mesmo se o arquivo de modelo 
(dwt) contiver fragmentos de código recolhidos. 


a sá qi Para o início 
Recolhimento e expansão de fragmentos de código 
Quando você seleciona um código, um conjunto de botões de recolhimento é exibido ao lado da seleção (símbolos de menos no Windows, 
triângulos verticais no Macintosh). Clique nos botões para recolher e expandir a seleção. Quando o código é recolhido, os botões de recolhimento 
se transformam em botão de expansão (um botão de mais no Windows; um triângulo horizontal no Macintosh). 


Às vezes, o fragmento exato do código selecionado não é recolhido. O Dreamweaver usa o “recolhimento inteligente” para recolher a seleção 
mais comum e visualmente satisfatória. Por exemplo, se você selecionou uma tag recuada e, em seguida, selecionou os espaços recuados antes 
da tag também, o Dreamweaver não recolherá os espaços recuados, pois a maioria dos usuários esperará que seus recuos sejam preservados. 
Para desativar o recolhimento inteligente e forçar o Dreamweaver a recolher exatamente o que você selecionou, mantenha pressionada a tecla 
Control antes de recolher o código. 


Além disso, um ícone de aviso nos fragmentos de código recolhidos será exibido se um fragmento contiver erros ou código incompatível com 
determinados navegadores. 


Você também pode recolher o código mantendo pressionada a tecla Alt (Windows) ou mantendo pressionada a tecla Option (Macintosh) 
enquanto clica em um dos botões de recolhimento, ou clicando no botão Recolher seleção na Barra de ferramentas de codificação. 


1. Selecione algum código. 
2. Selecione Editar > Recolhimento de código e selecione qualquer uma das opções. 


Seleção de um fragmento de código recolhido 

“& Na Visualização de código, clique no fragmento de código recolhido. 

Nota: Quando você faz uma seleção na Visualização de design que é parte de um fragmento de código recolhido, o fragmento é 
automaticamente expandido na Visualização de código. Quando você faz uma seleção na Visualização de design que é um fragmento de código 
completo, o fragmento permanece recolhido na Visualização de código. 


Visualização do código em um fragmento de código recolhido sem expandi-lo 
*& Mantenha o ponteiro do mouse sobre o fragmento de código recolhido. 


Uso de atalhos de teclado para recolher e expandir código 
“& Você também pode usar os seguintes atalhos de teclado: 


Comando Windows Macintosh 
Recolher seleção Control+Shift+C Command+Shift+C 
Recolher seleção expandida Control+Alt+C Command+Alt+C 
Expandir seleção Control+Shift+E Command+Shift+E 
Recolher tag completa Control+Shift+J Command+Shift+J 
Recolher tag completa expandida Control+Alt+J Command+Alt+J 
Expandir tudo Control+Alt+E Command+Alt+E 
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E Reale E P, iníci 
Colagem e movimentação de fragmentos de código recolhidos iss 


Você pode copiar e colar fragmentos de código recolhidos ou movê-los arrastando-os. 


Cópia e colagem de um fragmento de código recolhido 
1. Selecione o fragmento de código recolhido. 


Selecione Editar > Copiar. 
Coloque o ponto de inserção no local em que você deseja colar o código. 


Ps IN 


Selecione Editar > Colar. 
Nota: Você pode realizar a colagem em outros aplicativos, mas o recolhimento do fragmento de código não será preservado. 


Arrastar um fragmento de código recolhido 
1. Selecione o fragmento de código recolhido. 


2. Arraste a seleção para o novo local. 
Para arrastar uma cópia da seleção, mantenha pressionada a tecla Control (Windows) ou mantenha pressionada a tecla Alt (Macintosh) 
e arraste. 


Nota: Não é possível arrastar para outros documentos. 


Mais tópicos da Ajuda 
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Dispositivo móvel e multitela 


Construção de páginas móveis com o Dreamweaver CS5.5 

David Karlins (03-aug-11) 

tutorial 

David Karlins, autor de "Dicas da Adobe Creative Suite 5 Web Premium: 100 técnicas essenciais", aborda as técnicas para criar páginas 
da Web adaptadas para celular com base em Javascript do jQuery. 
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Compactação de aplicativos da Web como aplicativos móveis nativos 
com o PhoneGap Build 


Sobre o PhoneGap Build e o Dreamweaver 

Criação de uma conta de serviço do PhoneGap Build 
Configuração do ambiente de desenvolvimento 

Instalação do complemento PhoneGap Build 

Compactação de aplicativos móveis com o PhoneGap Build 


Para o início 


Sobre o PhoneGap Build e o Dreamweaver 


O PhoneGap Build é um serviço baseado em nuvem que permite compactar os seus aplicativos da Web como aplicativos móveis nativos. A 
integração com o Dreamweaver permite construir e salvar seus aplicativos em um site do Dreamweaver e carregá-los no serviço do PhoneGap 
Build na nuvem para compactação. 


O PhoneGap Build oferece suporte à compactação de aplicativos nativos para os seguintes sistemas operacionais de dispositivos móveis: 
- iOSs 
e Android 
e BlackBerry 
e webOS 
e Symbian 
e Windows 8 
Para obter mais informações sobre o serviço do PhoneGap Build, consulte Site do PhoneGap. 


Para obter ajuda para uso do serviço do PhoneGap Build, consulte Documentação do PhoneGap Build. 


Para o início 


Criação de uma conta de serviço do PhoneGap Build 


Não é possível usar o PhoneGap Build e o Dreamweaver sem uma conta de serviço do PhoneGap Build. As contas são gratuitas e fáceis de 
configurar. Para criar uma conta, visite Site do PhoneGap Build. 


Será necessário validar a conta por meio de um email de confirmação para que a conta se torne ativa. 


E" a a E P. iníci 
Configuração do ambiente de desenvolvimento Ed 


Dependendo do tipo de aplicativos que você deseja compactar e dos dispositivos que deseja testar, há várias tarefas de configuração a serem 
concluídas antes de compactar seu aplicativo. É possível configurar algumas, todas ou nenhuma das seguintes opções: 


Android SDK Para testar aplicativos Android no seu computador local que usa um emulador Android, você precisará baixar e instalar o Android 
SDK. Para obter instruções, consulte Documentação do Android. 


Após ter instalado o Android SDK, você precisará iniciar o Android SDK e os Gerenciadores AVD e selecionar as ferramentas do Android com as 
quais deseja trabalhar localmente no computador. O Dreamweaver usa as informações que você selecionou durante essa configuração inicial 
para preencher as configurações de emulador Android no painel de Serviço do PhoneGap Build. Para obter mais informações sobre a 
especificação dessas configurações, consulte Documentação do Android. 


IMPORTANTE: para usar um emulador Android para testar o seu aplicativo localmente, antes de realizar o teste, você deve obter um emulador 
que funcione independentemente do Dreamweaver. 


webOS SDKIPDK Para testar aplicativos webOS no seu computador local que usa um emulador webOS, você precisará baixar e instalar o 
webOS SDK/PDK. Para obter instruções, consulte a Documentação do webOS. 


Leitores de código QR (Quick Response) Para transferir facilmente o aplicativo compactado para o dispositivo, você precisará de um leitor de 
código QR. (Quando compactar um aplicativo que usa o Dreamweaver, você receberá um código QR do aplicativo, que aparecerá no painel do 
PhoneGap Build, após o aplicativo ter sido compactado.) Um número de leitores de código diferentes estão disponíveis gratuitamente em vários 
mercados. Para obter mais informações, busque em Google “leitor de código QR”. 
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Para o início 


Instalação do complemento PhoneGap Build 
Antes de usar o serviço PhoneGap Build do Dreamweaver, você deve instalar o complemento do PhoneGap Build. 


Para instalar o complemento, vá para Janela > Buscar complementos. A página Complementos da Adobe Creative Cloud é exibida. Procure o 
complemento do PhoneGap Build e siga as instruções na tela para instalá-lo. 


Importante: antes de instalar os complementos, certifique-se de que você tenha ativado a sincronização de arquivos para sua conta da Adobe 
Creative Cloud. Consulte Ativar a sincronização de arquivos na Adobe Creative Cloud para obter mais detalhes. 


Compactação de aplicativos móveis com o PhoneGap Build Nr asd 


1. Verifique se você criou um site do Dreamweaver com uma página index.html (normalmente a página de início do seu aplicativo). 
Nota: o PhoneGap Build oferece suporte apenas aos arquivos HTML, CSS e JavaScipt. O seu site não pode conter páginas de servidor 
como PHP, CFM, ou outros tipos de páginas baseadas no servidor. 


2. Selecione Site > Serviço do PhoneGap Build > Serviço do PhoneGap Build. 


3. Forneça as suas informações de logon e faça logon no PhoneGap Build. Se não tiver criado uma conta do PhoneGap Build, consulte 
Criação de uma conta de serviço do PhoneGap Build. 


4. Deixe selecionado Criar como um novo projeto e clique em Continuar. 
5. (Atualização do Dreamweaver 12.0.3) Para os sistemas operacionais desejados, digite a chave e a senha conforme necessário. As 
informações da chave de assinatura são necessárias apenas para Android, iOS e Blackberry. 


Se você não conseguir criar mais de um aplicativo, talvez não tenha assinado o serviço PhoneGap. 


Nota: se as informações inseridas estiverem incorretas, ocorrerá uma falha com uma mensagem de erro indicando que você digitou uma 
chave ou senha incorreta. Se você não digitar nenhuma informação, o iOS falhará com o erro Assinatura de chave exigida. Aplicativos 
Android e Blackberry são criados usando certificados de depuração. 


Insira es infbersações chave e de senha 
que conesposdars à plstefbersa móvel 


6 > 
Due 


sema 


4 ans302 
Chu | Mort, - 


6. Observe que o Dreamweaver adiciona um arquivo ProjectSettings à raiz do seu site. (Talvez seja necessário atualizar o painel Arquivos 
para vê-lo.) Esse arquivo é muito importante, pois o serviço do PhoneGap Build o usa para controlar o aplicativo. 


O Dreamweaver também adiciona um arquivo config.xml à raiz do seu site. Clique duas vezes neste arquivo XML simples para abri-lo. 
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<?xml version="1.0" encodinge"UTF-8" 7> 
<vidget xmlns = "http://uuw.w3.0rg/ns/vidgets” 
xmins:gap = "hrrp://phonegap.com/ns/1.0" 
id = "com. phonegap. example” 
version = "1.0.0"> 


<name>PhoneGap Build Applíication</name> 

<«description> 

A simple PhoneGap Build application. 

</description> 

<author href="https://example.com” email="youfexemple.com"> 
Your Name 


</author> 


</vidget> 


Personalize a identidade do aplicativo editando os conteúdos desse arquivo. Se não fizer isso, todos os seus aplicativos terão o mesmo 
nome de aplicativo padrão. 


Para obter mais informações sobre como trabalhar com o arquivo config.xml, consulte a Documentação do PhoneGap Build. 


7. Salve o arquivo config.xml editado, feche-o e clique no painel Reconstruir do Serviço do PhoneGap. Quando o PhoneGap terminar de 
compactar o aplicativo para cada plataforma, você verá mensagens indicando que a versão está concluída. 


RR 
dr Ho 
A e [EV 
Pata o [557] W] 
Pegeses (e 
E ea 
[Logos] 


Após as suas versões estarem completas, você terá várias opções. Você poderá baixar os arquivos do aplicativo no computador, rastrear o 
código QR de uma versão para transferir o aplicativo para o seu dispositivo ou emular o aplicativo usando um emulador (somente Android e 
webOS). 


Download de arquivos do aplicativo 
Para baixar um aplicativo do PhoneGap Buil, clique no botão Baixar aplicativo (seta virada para baixo) no painel Serviço do PhoneGap Build. 


Nota: o download não está disponível para aplicativos iOS sem uma chave de assinatura. Para obter mais informações, consulte Documentação 
do PhoneGap Build. 


Os nomes de arquivos do aplicativo baixados são como se segue: 
* iOS - app.ipa 
e Android - app.apk 
« BlackBerry - app.jad 
e webOS - app.ipk 
* Symbian-app.wgz 


Rastreamento de código QR para transferir um aplicativo para um dispositivo 
É necessário ter um leitor de código QR instalado no dispositivo antes de continuar. Para obter mais informações, consulte Configuração do 
ambiente de desenvolvimento. 


Nota: os códigos QR não estão disponíveis para aplicativos iOS sem uma chave de assinatura. Para obter mais informações, consulte 
Documentação do PhoneGap Build. 
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Nota: os códigos QR não estão disponíveis para aplicativos iOS sem uma chave de assinatura. 


d: 


No painel Serviço do PhoneGap Build, clique no código QR do aplicativo que você deseja baixar. 


2. Inicie o leitor de código QR no seu dispositivo móvel e rastreie o código QR. 
3. 
4. Volte à lista de versão clicando no botão Voltar ao painel de versão. 


Após o aplicativo ter sido baixado, você poderá iniciá-lo diretamente no dispositivo. 


Emular um aplicativo (somente Android e webOS) 

IMPORTANTE: é necessário ter o Android SDK e/ou o webOS SDK/PDK instalado antes de continuar. Também é necessário ter especificado as 
informações do SDK/AVD que devem estar disponíveis localmente nos aplicativos SDK. Para obter mais informações, consulte Configuração do 
ambiente de desenvolvimento. 


Nota: os emuladores poderão ser lentos. Pode levar algum tempo para o emulador inicializar e carregar o aplicativo. 


4. 
2. 


Abra o painel Configurações do PhoneGap Build selecionando Site > Serviço do PhoneGap Build > Configurações do PhoneGap Build. 


Especifique os locais do Android e/ou webOS SDKs e clique em Salvar. Esses locais informam ao Dreamweaver onde localizar as 
informações necessárias para enviar o aplicativo aos emuladores. 


No painel Serviço do PhoneGap Build (Site > Serviço do PhoneGap Build > Serviço do PhoneGap Build), clique no botão Emular (voltado 
para os lados) do aplicativo que você deseja emular. 


Se anteriormente especificou as suas informações SDK/AVD dos aplicativos SDK, uma janela será exibida e estará pré-preenchida com as 
informações. 


Escolha o SDK/AVD que você deseja usar para a emulação e clique em Inicializar. 


Palavras-chave: what's new, dreamweaver, HTMLS, CSS, transitions, web application, web package, effects, CSS3, fluid grid layout, Phonegap, 
new features, jquery, business catalyst, web fonts, ftp improvements, PSD optimization, dreamweaver cs6 


As publicações do Twitter"! e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 
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Compactação de aplicativos da Web 


Empacotamento de aplicativos da Web como aplicativos móveis nativos (CS5.5) 


Empacotamento de aplicativos da Web como aplicativos móveis nativos (CS5.5) iii 


A integração do Dreamweaver com o jQuery Mobile e o PhoneGap ajuda na criação e no empacotamento de aplicativos da Web para 
implantação no AndroidTM e em dispositivos baseados em iOS. O Dreamweaver usa SDKs do PhoneGap para criar o pacote (arquivo .apk para 
Android/.xcodeproj para iPhone/iPad) 


Uma vez que empacotou um aplicativo móvel com o Dreamweaver, você poderá exibi-lo em um emulador de dispositivo ou implantá-lo em seu 
próprio dispositivo. 


Importante: O aplicativo móvel que você empacotou com Dreamweaver é um aplicativo somente para fins de depuração. O aplicativo será 
executado no Android e em emuladores de iOS, ou no seu dispositivo móvel pessoal se você fizer a transferência, mas não é possível carregar 
os aplicativos móveis de depuração nas lojas da Apple e do Android. Para carregar aplicativos para iOS ou Android, você deverá executar a 
etapa adicional de assiná-los fora do Dreamweaver. Para obter mais informações sobre o carregamento de aplicativos nas lojas da Apple e do 
Android, consulte a documentação do Android ou o Guia do usuário do programa no Portal de fornecimento do Apple iOS. (Antes de poder 
acessar o Portal de fornecimento do Apple iOS Fornecimento você deverá se registrar no Programa de Desenvolvedor de Apple [gratuito] e se 
inscrever no Programa de Desenvolvedor iOS [taxa anual].) 


Crie um aplicativo da Web usando a página inicial 
Você pode usar qualquer página inicial para criar seu aplicativo da Web. Entretanto, se o seu aplicativo da Web, quando implantado como um 
aplicativo móvel, acessar recursos nativos em dispositivos móveis, use a página do jQuery Mobile (PhoneGap). 


A página inicial do jQuery Mobile (PhoneGap) contém o arquivo phonegap.js além de outros arquivos do jQuery Mobile. O arquivo phonegap.js 
contém as APIs necessárias para funcionar com recursos móveis nativos, tais como GPS, acelerômetro, câmera, etc. 


1. Selecione Arquivo > Novo. 

2. Selecione Página da Amostra > Iniciais do Mobile > jQuery Mobile (PhoneGap). 
3. Clique em Criar. 
4 


. No painel Inserir (Janela > Inserir), selecione jQuery Mobile. Os componentes que podem ser adicionados ao aplicativo da Web são 
exibidos. 


5. Na Visualização de design, posicione o cursor onde deseja inserir o componente e clique no componente no painel Inserir. Na caixa de 
diálogo exibida, personalize os componentes usando as opções. 
Nota: Para editar o arquivo PhoneGap.js, defina a estrutura e as configurações do aplicativo. Para obter mais informações, consulte os 
tópicos sobre como criar pacotes de aplicativos. 


Visualize a página na Visualização dinâmica. Algumas classes de CSS são aplicadas somente na Visualização dinâmica. 


Requisitos do sistema para empacotar aplicativos 
Você deve garantir que atende aos seguintes requisitos do sistema antes que possa prosseguir com o empacotamento de um aplicativo. 


MAC OS - iOS 

e Mac OS X Snow Leopard versão 10.6.x ou posterior 

e Xcode 3.2.x com SDK do iOS (instruções de instalação abaixo.) 
MAC OS - Android 

e Mac OS X 10.5.8 ou posterior (somente x86) 

e SDK do Android (instruções de instalação abaixo.) 
Windows - iOS 

* OiOS só está disponível para usuários com um computador Apple 


Windows - Android 
e Windows XP (32 bits), Vista (32 ou 64 bits) ou Windows 7 (320u 64 bits) 
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SDK do Android (instruções de instalação abaixo). 


Criar um pacote de programas do aplicativo(Windows) 


Para obter informações sobre como criar um aplicativo da web, incluindo arquivos de exemplo, consulte este tutorial no Dreamweaver Developer 
Center. 


1. 


Oo NO 1 


9. 


Abra o aplicativo da Web que deseja converter para um aplicativo móvel. Assegure-se de que seu aplicativo da Web esteja configurado 
como um site no Dreamweaver e que o tamanho do site seja menor que 25 MB. 


Nota: Assegure-se de que o aplicativo contenha somente arquivos HTMLS, CSS e JavaScript. 

Selecione Site > Aplicativos móveis > Configurar estrutura de aplicativo. 

Clique em Instalação fácil para instalar o Android SDK. 

Nota: Se a Instalação fácil falhar, consulte tech note 90408. 

Selecione um local para instalar arquivos SDK e clique em Selecionar. Após a conclusão da instalação, clique em Salvar. 
Selecione Site > Aplicativos móveis > Configurações do aplicativo. 

Na ID de compactação, digite um nome para o pacote usando as informações na caixa de diálogo. 

Digite um nome para o aplicativo e o nome da pessoa que o criou. 

Opcionalmente, especifique: 


a. No PNG do ícone do aplicativo, especifique um arquivo PNG para ser usado como ícone do aplicativo. O Dreamweaver redimensionará 
o ícone no tamanho padrão se você ainda não o tiver redimensionado. 


b. Especifique um caminho de destino para o pacote. 


c. Para fazer download e instalar os componentes SDK mais recentes do Google, clique em Gerenciar AVDs. Use o Android SDK and 
AVD Manager para atualizar o Android SDK. Para obter informações sobre como usar o gerenciador, consulte 
http://developer.android.com/sdk/adding-components.html. 


Nota: Quando você clica em Salvar, o arquivo phonegap.js é copiado na raiz do site. 
Siga um destes procedimentos: 


e Se estiver implantando seu aplicativo diretamente em um dispositivo, selecione Site > Aplicativos móveis > Versão. Selecione uma 
plataforma/dispositivo para a versão. 


* Se deseja ver a aparência da versão em um emulador antes de criá-la, selecione Site > Aplicativos móveis > Criar e emular. 


Criar um pacote de programas do aplicativo (Mac OS) 


Para obter informações sobre como criar um aplicativo da Web, incluindo arquivos de exemplo, consulte este artigo no Dreamweaver Developer 
Center. 


do 


Go NI dO PO 


Abra o aplicativo da Web que deseja converter para um aplicativo móvel. Assegure-se de que seu aplicativo da Web esteja configurado 
como um site no Dreamweaver e que o tamanho do site seja inferior a 25 MB. 


Nota: Assegure-se de que o aplicativo contenha somente arquivos HTMLS, CSS e JavaScript. 
Selecione Site > Aplicativos móveis > Configurar estrutura de aplicativo. 
Instale o SDK para iOS ou Android com base em seus requisitos: 


e Clique no link do Apple iOS Dev Center para fazer download e instalar o xcode e o iOS SDK. O aplicativo é, por padrão, instalado em 
OS <número da versão>/developer directory. 


Faça login no Dev Center usando sua ID da Apple. O registro é gratuito. Crie uma conta se não for um usuário registrado. 


Nota: Você pode usar o pacote SDK do Apple Dev Center como teste. Entretanto, para carregar o aplicativo na Loja da Apple, 
registre-se como um desenvolvedor da Apple após o pagamento da taxa obrigatória. 


e Clique em Instalação fácil para instalar o Android SDK. 
Nota: Se a Instalação fácil falhar, consulte tech note 90408. 
Clique em Salvar. 
Selecione Site > Aplicativos móveis > Configurações do aplicativo. 
Na ID de compactação, digite um nome para o pacote usando as informações na caixa de diálogo. 
Digite um nome para o aplicativo e o nome da pessoa que o criou. 
Opcionalmente, faça o seguinte: 


e (Android) No ícone do aplicativo PNG, especifique um arquivo PNG para ser usado como ícone do aplicativo de Android. O 
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Dreamweaver redimensionará o ícone no tamanho padrão se você ainda não o tiver redimensionado. 


e (Mac8 OS 10.6.x) No PNG da tela de inicialização, especifique um arquivo PNG para ser usado como ícone do aplicativo iOS. O 
Dreamweaver redimensionará o ícone no tamanho padrão se você ainda não o tiver redimensionado. 


e (Mac OS 10.6.x) Selecione uma versão do iPhone/iPod Touch/iPad para a criação do pacote. 
e Defina um caminho de destino diferente para o pacote. 
Nota: Quando você clica em Salvar, o arquivo phonegap.js é copiado na raiz do site. 
9. Siga um destes procedimentos: 


* Se estiver implantando seu aplicativo diretamente em um dispositivo, selecione Site > Aplicativos móveis > Versão. Selecione uma 
plataforma/dispositivo para a versão. 


e Se deseja ver a aparência da versão em um emulador antes de criá-la, selecione Site > Aplicativos móveis > Criar e emular. 
Adobe recomenda EM Há algum tutorial que você gostaria de compartilhar? 


Empacotamento de aplicativos 
da Web como aplicativos 


móveis usando o Dreamweaver 
O cs: 
Hh 


Jon Michael Varese 

Tutorial passo a passo sobre 
empacotamento de seu aplicativo da 
Web 


Mais tópicos da Ajuda 
http:/Ayww.phonegap.com/about 


http://jquerymobile.com/demos/1.0a2/ 
http://docs.phonegap.com/ 


Tutorial de empacotamento de aplicativos da Web 


(65) ev-nc-sa ] 
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Criação de aplicativos da Web para dispositivos móveis (CS5.5) 


Mais tópicos da Ajuda 
http://jquerymobile.com/demos/1.0a3/ 


http://docs.jquery.com/Downloading jQuery4CDN Hosted jQuery 
http://en.wikipedia.org/wiki/Content delivery network 


http://docs.jquery.com/Downloading jQuery 


(5) ev-nc-sa ] 
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Criação de consultas de mídia 


Você pode usar consultas de mídia para especificar arquivos CSS com base nas características informadas de um dispositivo (design 
responsivo). O navegador em um dispositivo verifica a consulta de mídia e usa o arquivo CSS correspondente para exibir a página da web. 


Por exemplo, a seguinte consulta de mídia especifica o arquivo phone.css para dispositivos de 300-320 pixels. 


<link href="css/orig/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 300px) and (max- 
width: 320px)"> 


Para uma obter introdução extensa às consultas de mídia, leia o artigo de Don Booth no Adobe Developer Center 
www.adobe.com/go/learn dw medquery don br. 


Para obter mais informações sobre consultas de mídia da W3C, consulte www.w3.org/TR/css3-mediaqueries/. 


Criar consulta de mídia 

Usar um arquivo de consultas de mídia existente 

Escolher um arquivo de consultas de mídia para todo o site diferente 
Visualização de páginas da Web com base em consulta de mídia 


Consulte também: 
e Design responsivo usando layouts de grade fluida 


Para o início 


Criar consulta de mídia 

No Dreamweaver, você pode criar um arquivo de consulta de mídia para todo o site ou uma consulta de mídia para um documento específico. 
Arquivo de consulta de mídia para todo o site 

Especifica configurações de exibição de todas as páginas em seu site que incluem o arquivo. 


O arquivo de consulta de mídia para todo o site age como repositório central de todas as consultas de mídia em seu site. Depois de criar o 
arquivo, vincule-o a páginas em seu site que precisem usar consultas de mídia para a exibição do arquivo. 


Consulta de mídia para documento específico 


A consulta de mídia é inserida diretamente no documento, e a página é exibida com base na consulta de mídia inserida. 
1. Crie uma página da web. 


2. Selecione Modificar > Consultas de mídia. 


vo 


Siga um destes procedimentos: 
e Para criar um arquivo de consulta de mídia para todo o site, selecione Arquivo de consultas de mídia para todo o site. 


e Para criar uma consulta de mídia específica de um documento, selecione Este documento. 
4. Para fazer uma consulta de mídia para todo o site, faça o seguinte: 

a. Clique em Especificar. 

b. Selecione Criar novo arquivo. 

c. Especifique um nome para o arquivo e clique em OK. 


5. É possível que alguns dispositivos não informem a largura real. Para forçar dispositivos a informar a largura real, verifique se a opção 
Forçar dispositivos a informar largura real está ativada. 


O seguinte código é inserido no arquivo quando você escolhe essa opção. 


<meta name="viewport" content="width=device-width"> 


6. Siga um destes procedimentos: 
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8. 


9. 


Clique em "+" para definir as propriedades do arquivo de consulta de mídia. 


e Clique em Predefinições Padrão se quiser começar com predefinições padrão. 
Selecione linhas na tabela e edite as respectivas propriedades usando as opções em Propriedades. 
Descrição A descrição do dispositivo para o qual o arquivo CSS deve ser usado. Por exemplo, telefone, televisão, mesa digitalizadora, etc. 


Largura mínima e máxima O arquivo CSS é usado para dispositivos cuja largura informada está dentro dos valores especificados. 


Nota: Deixe a Largura mínima ou a Largura máxima em branco se não desejar especificar um intervalo explícito para um dispositivo. Por 
exemplo, é comum deixar a Largura mínima em branco para telefones, cuja largura é de 320px ou menos. 


Arquivo CSS Selecione Usar arquivo existente e navegue até o arquivo CSS do dispositivo. 


Se deseja especificar um arquivo CSS que ainda será criado, selecione Criar novo arquivo. Digite o nome do arquivo CSS. O arquivo é 
criado quando você pressiona OK. 


Clique em OK. 


Um novo arquivo é criado para um consulta de mídia para todo o site. Salve-o. 


Consulta de mídia para todo o site: Em páginas existentes, verifique se você incluiu o arquivo de consulta de mídia em todas as páginas na tag 
<head>. 


Exemplo de um link de consulta de mídia onde mediaquery adobedotcom.css é o arquivo de consulta de mídia para todo o site 
www.adobe.com/br de site: 


<link href="mediaquery adobedotcom.css" rel="stylesheet" type="text/css"> 


Usar um arquivo de consultas de mídia existente 


4. 


Escolher um arquivo de consultas de mídia para todo o site diferente 


Para o início 


Crie uma página da Web ou abra uma existente. 

Selecione Modificar > Consultas de mídia. 

Selecione o arquivo de consultas de mídia para todo o site. 

Clique em Especificar. 

Selecione Usar arquivo existente se você já tiver criado um arquivo CSS com a Consulta de mídia. 
Clique no ícone de busca para procurar e especifique o arquivo. Clique em OK. 

Selecione o arquivo de consultas de mídia para todo o site. 


Para forçar dispositivos a informar a largura real, verifique se a opção Forçar dispositivos a informar largura real está ativada. O seguinte 
código é inserido no arquivo quando você escolhe essa opção. 


<meta name="viewport" content="width=device-width"> 


Clique em OK. 


Para o início 


Use este procedimento para alterar o arquivo de consultas de mídia para todo o site que você definiu na caixa de diálogo Consultas de mídia. 


1. 


Selecione Site > Gerenciar sites. 

Na caixa de diálogo Gerenciar sites, selecione o seu site. 

Clique em Editar. A caixa de diálogo Configuração de site é exibida. 

Em Configurações avançadas no painel esquerdo, selecione Informações locais. 


No arquivo de consulta de mídia para todo o site, no painel direito, clique em Procurar para selecionar o arquivo CSS da consulta de mídia. 
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Nota: A alteração do arquivo de consulta de mídia para todo o site não afeta documentos vinculados a um arquivo de consulta de mídia 
para todo o site diferente ou anterior. 


6. Clique em Salvar. 


: ti gicia oe eRagara 
Visualização de páginas da Web com base em consulta de mídia cdi io 


As dimensões especificadas em uma consulta de mídia aparecem nas opções de tamanho de botão/janela de várias telas. Quando você 
seleciona uma dimensão do menu, as seguintes modificações são vistas: 


e O tamanho da visualização muda para refletir as dimensões especificadas. O tamanho do quadro de documento permanece inalterado. 


e O arquivo CSS especificado na consulta de mídia é usado para exibir a página. 


As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 


510 


Alterar a orientação de página para dispositivos móveis (CS5.5 e 
posterior) 


Na maior parte de dispositivos móveis avançados, a orientação de uma página é alterada com base em como o dispositivo é segurado. Quando o 
usuário mantém o telefone verticalmente, a orientação de retrato é exibida. Quando o usuário vira o dispositivo horizontalmente, a página reajusta- 
se nas dimensões de paisagem. 


No Dreamweaver, você pode visualizar uma página nas orientações Retrato ou Paisagem tanto na Visualização dinâmica quanto na Visualização 
de design. Use essas opções para testar como sua página se adapta a essas configurações. Assim, você pode modificar, se necessário, O 
arquivo CSS para que a página seja exibida conforme desejado em ambas as orientações. 


“ Selecione Exibir > Tamanho da janela > orientação Paisagem ou orientação Retrato. 
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Criação de aplicativos da Web para dispositivos móveis (CS5.5, 
CS6) 


Sobre criação de um aplicativo da Web usando o jQuery Mobile 
Uso de páginas iniciais para criar um aplicativo para dispositivos móveis 
Criação de um aplicativo da Web para dispositivos móveis em uma nova página 


A integração do Dreamweaver com o jQuery Mobile ajuda você a projetar rapidamente um aplicativo da Web que funciona em dispositivos móveis 
e adaptá-lo às dimensões do dispositivo. 


Sobre criação de um aplicativo da Web usando o jQuery Mobile Req ep 


Abra uma página inicial do jQuery Mobile ou crie uma página em HTML5 


Use as páginas iniciais do jQuery Mobile no Dreamweaver para criar o aplicativo. Como alternativa, é possível iniciar a criação do aplicativo da 
Web em uma nova página HTMLS. 


As páginas iniciais do jQuery Mobile incluem arquivos HTML, CSS, JavaScript e de imagem que ajudam a começar a projetar o aplicativo. Você 
pode usar arquivos CSS e JavaScript hospedados em uma CDN e em seu próprio servidor ou arquivos instalados no Dreamweaver. 


Nota: Para identificar a localização dos arquivos vinculados, consulte as tags <link> e <script src> na Visualização de código. 
Insira componentes jQuery Mobile do Painel Inserir 


Insira componentes do jQuery Mobile do painel Inserir na página em HTML. Os arquivos CSS e JavaScript do jQuery Mobile definem o estilo e o 
comportamento dos componentes. 


Sobre CDNSs e arquivos locais do jQuery Mobile 


CDNs 


Uma CDN (rede de entrega de conteúdo) é uma rede de computador que contém cópias dos dados colocados em vários pontos na rede. Quando 
você cria um aplicativo da Web que usa o URL de uma CDN, os arquivos CSS e JavaScript especificados no URL são usados no aplicativo. Por 
padrão, o Dreamweaver usa a CDN do jQuery Mobile. 


Como alternativa, é possível usar o URL de CDNs de outros sites, como Microsoft e Google. Na visualização de código, edite a localização no 
servidor de arquivos CSS e JavaScript especificados nas tags <link> e <script src>. 


Os arquivos transferidos por download de uma CDN são somente leitura. 


Arquivos locais do jQuery Mobile 
Quando você instala o Dreamweaver, é feita uma cópia dos arquivos do jQuery Mobile em seu computador. A página HTML que se abre quando 
você escolhe a página inicial do jQuery Mobile (local) é vinculada a arquivos locais CSS, JavaScript e de imagem. 


Páginas iniciais para o jQuery Mobile 
O Dreamweaver fornece as seguintes páginas iniciais para você criar seu aplicativo da Web: 


jQuery Mobile (CDN) (CS5.5 e versões posteriores) 

Use essa página inicial se planeja hospedar a biblioteca do jQuery Mobile em uma CDN. 

jQuery Mobile (Local) (CS5.5 e versões posteriores) 

Use essa página inicial se planeja hospedar os ativos ou se o seu aplicativo não depender de uma conexão com a Internet. 
jQuery Mobile (PhoneGap) (CS5.5 e versões posteriores) 


Use essa página inicial se o seu aplicativo da Web, quando implantado como aplicativo móvel, acessar recursos nativos em dispositivos móveis. 
Para obter mais informações, consulte Implantar aplicativos da Web como aplicativos móveis nativos (CS 5.5). 


Para o início 


Use páginas iniciais para criar um aplicativo para dispositivos móveis 


1. Selecione Arquivo > Novo. 
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2. Selecione uma das seguintes opções com base em seus requisitos: 
* Página da amostra > Iniciadores de disp. móveis > jQuery Mobile (CDN). 
e Página da amostra > Iniciadores de disp. móveis > jQuery Mobile (Local). 


- Página da amostra > Iniciadores de disp. móveis > jQuery Mobile com tema (Local). 


3. Clique em Criar. 


Na página que for exibida, ative Seguir links continuamente (Visualizar > Opções de Visualização dinâmica), e alterne para Visualização 
dinâmica. Use os componentes de navegação para testar como o aplicativo trabalha. 


Use as opções no menu Várias telas para ver como o design é exibido nos dispositivos com várias dimensões. Desative Visualização 


dinâmica e alterne de volta para a Visualização de design. 


4. No painel Inserir (Janela > Inserir), selecione jQuery Mobile. Os componentes que podem ser adicionados ao aplicativo da Web são 
exibidos. 


5. Na Visualização de design, posicione o cursor no local onde você deseja inserir o componente e clique o componente no painel Inserir. Na 
caixa de diálogo exibida, personalize os componentes usando as opções. 


6. (jQuery Mobile (Local), jquery Mobile com tema (Local)) Após salvar o arquivo em HTML, os arquivos jQuery Mobile, incluindo arquivos de 
imagem, são copiados para uma pasta no local do arquivo em HTML. 


Visualize a página na Visualização dinâmica. Algumas classes de CSS são aplicadas somente na Visualização dinâmica. 
é ' E x asi ” é ro Para o início 
Crie um aplicativo da Web para dispositivos móveis em uma nova página 


O componente da Página atua como o contêiner de todos os outros componentes do jQuery Mobile. Adicione o componente da Página antes de 
inserir outros componentes. 


1. Selecione Arquivo > Novo. 


2. Selecione Página em branco > HTML. 
Alguns componentes do jQuery Mobile usam atributos HTML5 específicos. Para assegurar a compatibilidade com HTML5 durante a 
validação, selecione HTML5 como seu tipo de documento. 
3. No painel Inserir (Window > Inserir), selecione jQuery Mobile do menu. Os componentes do jQuery Mobile são exibidos no painel. 
4. No painel Inserir, arraste o componente Página para a Visualização de design. 


5. Na caixa de diálogo Arquivos do jQuery Mobile, selecione uma das seguintes opções: 


Remoto (CDN) Se deseja conectar-se a um servidor CDN remoto que hospeda os arquivos do jQuery Mobile. Use a opção padrão do site 
jQuery se você não tiver configurado um site que contém arquivos do jQuery Mobile. Você também pode escolher usar outros servidores 
CDN. 


Local Os arquivos disponíveis no Dreamweaver são exibidos. Para especificar uma pasta diferente, clique em Procurar e navegue até a 
pasta que contém os arquivos do jQuery Mobile. 


Os arquivos CSS e Javascript são copiados em um diretório local temporário até você salvar o arquivo HTML em seu computador. Depois 
que o arquivo HTML é salvo, todos os arquivos associados ao jQuery Mobile e os arquivos de imagem são copiados em uma pasta na raiz 
do site. 


6. Insira as propriedades do componente Página. 


7. Na Visualização de design, posicione o cursor no local onde você deseja inserir o componente e clique o componente no painel Inserir. Na 
caixa de diálogo exibida, personalize os componentes usando as opções. 


Visualize a página na Visualização dinâmica. Algumas classes de CSS são aplicadas somente na Visualização dinâmica. 


Usar arquivos e pastas personalizados 
Você pode criar arquivos CSS e JS personalizados para o seu aplicativo. Nomeie os arquivos como jquery.mobile.js, jquery.mobile.css e jquery.js 


Se estiver usando pastas personalizadas, faça o seguinte: 


1. Faça download da versão descompactada da biblioteca principal do jQuery 1.5 em 
http://docs.jquery.com/Downloading jQuery4Download jQuery. 
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2. Salve o arquivo na pasta principal que contém outros recursos. 


e http://jguerymobile.com/demos/1.0a3/ 

e http://docs.jquery.com/Downloading jQuery4CDN Hosted jQuery 
e http://en.wikipedia.org/wiki/Content delivery network 

e http://docs.jquery.com/Downloading jQuery 


As publicações no Twitter!” e Facebook não estão licenciadas nos termos da Creative Commons. 
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Visualização 
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Visualização de páginas 


Visualização de páginas no Dreamweaver 
Visualização de páginas em navegadores 


Nota: A interface de usuário foi simplificada na Dreamweaver CC e posterior. Como resultado, você talvez não consiga localizar algumas das 
opções descritas neste artigo na Dreamweaver CC e posterior. Para obter mais informações, consulte este artigo. 


A Visualização de design dá uma ideia de como sua página será exibida na Web, mas não processa as páginas exatamente como os 
navegadores fazem. A visualização dinâmica mostra uma representação mais precisa e permite trabalhar na Visualização de código para que 
você possa ver as alterações no design. O recurso Visualizar do navegador permite que você veja como suas páginas serão exibidas em 
navegadores específicos. 


' ' a A Para o início 
Visualização de páginas no Dreamweaver 


Sobre a Visualização dinâmica 

A visualização dinâmica difere da visualização tradicional de design do Dreamweaver por oferecer um processamento não editável e mais realista 
da aparência que a sua página terá no navegador, que é também editável. A visualização dinâmica não substitui o comando Visualizar no 
navegador; em vez disso, oferece outra maneira de visualizar como será a aparência "ao vivo" de sua página sem ter que deixar a área de 
trabalho do Dreamweaver. 


Você pode alternar para a Visualização dinâmica a qualquer momento em que estiver na Visualização de design. Alternar para a visualização 
dinâmica, no entanto, não tem nenhuma relação com alternar entre qualquer uma outra visualização tradicional no Dreamweaver 
(Código/Divisão/Design). Ao mudar para a Visualização dinâmica na Visualização de design, você estará simplesmente alternando a Visualização 
de design entre editável e "ao vivo”. 


Embora a Visualização de design permaneça congelada quando você entra na Visualização dinâmica, a Visualização de código permanece 
editável, para que você possa alterar o código e, em seguida, atualizar a Visualização dinâmica para ver as alterações em vigor. Quando na 
visualização dinâmica, você tem a opção adicional de exibir o código ativo. A Visualização de código ativo se assemelha à Visualização dinâmica 
por exibir uma versão do código que o navegador está executando para processar a página. Assim como a Visualização dinâmica, a Visualização 
de código ativo não é editável. 


Uma vantagem adicional da visualização dinâmica é a capacidade de congelar JavaScript. Por exemplo, você pode alternar para a visualização 
dinâmica e focalizar nas colunas da tabela com base no Spry que mudam de cor como resultado da interação do usuário. Ao congelar JavaScript, 
a visualização dinâmica congela a página em seu estado atual. Em seguida, você pode editar o CSS ou JavaScript e atualizar a página para ver 
as alterações em vigor. Congelar JavaScript na visualização dinâmica é útil se você deseja visualizar e alterar propriedades dos diferentes 
estados dos menus pop-up ou outros elementos interativos que não podem ser vistos na Visualização tradicional de design. 


Consulte também: 
e Editar na Visualização dinâmica 


Visualização de páginas na Visualização dinâmica 


1. Certifique-se de estar na Visualização de design (Exibir > Design) ou nas visualizações de código e de design (Exibir > Código e design). 


2. Clique no botão Visualização dinâmica. 


Live viam 


3. (Opcional) Faça as alterações na Visualização de código, no painel Estilos CSS, em uma folha de estilos CSS externa ou em outro arquivo 
relacionado. 


Embora você não possa editar na Visualização dinâmica, suas opções de edições em outras áreas (por exemplo, no painel Estilos CSS ou 
na Visualização de código) mudam quando você clica em Visualização dinâmica. 


Você pode trabalhar com arquivos relacionados (como folhas de estilos CSS) enquanto mantém o foco na Visualização dinâmica, 
abrindo o arquivo relacionado na barra de ferramentas Arquivos relacionados, na parte superior do documento. 


4. Se você tiver feito alterações na Visualização de código ou em um arquivo relacionado, atualize a Visualização dinâmica clicando no botão 
Atualizar da barra de ferramentas Documento ou pressionando F5. 
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5. Para retornar à Visualização de design editável, clique no botão Visualização dinâmica novamente. 


Visualização de código ativo 

O código exibido na Visualização de código ativo é semelhante ao que você visualiza na fonte da página de um navegador. Embora as fontes da 
página sejam estáticas, apresentando apenas a fonte da página do navegador, a Visualização de código ativo é dinâmica e é atualizada quando 
você interage com a página na Visualização dinâmica. 


1. Certifique-se de estar na Visualização dinâmica. 


2. Clique no botão Código ativo. 
O Dreamweaver exibe o código ativo que o navegador usa para executar a página. O código é realçado em amarelo e não é editável. 


Quando você interage com os elementos interativos da página, o código Ativo destaca as alterações dinâmicas no código. 


3. Para desativar o destaque das alterações na Visualização de código ativo, escolha Exibir > Opções de visualização dinâmica > Realçar 
alterações no Código ativo. 


4. Para retornar à Visualização de código editável, clique no botão Código ativo novamente. 


Para alterar as preferência de Código ativo, escolha Editar > Preferências (Windows) ou Dreamweaver > Preferências (SO Macintosh) e selecione 
a categoria de codificação por cores. 


Congelar JavaScript 
Siga um destes procedimentos: 
e Pressione F6 
e Selecione Congelar JavaScript no menu pop-up do botão Visualização dinâmica. 


Uma barra de informações na parte superior do documento indicará que o JavaScript está congelado. Para fechar a barra de informações, clique 
no link para fechar. 


Opções de visualização dinâmica 
Além da opção Congelar JavaScript, há outras opções disponíveis no menu pop-up do botão Visualização dinâmica ou no item de menu Exibir > 
Opções de visualização dinâmica. 


Congelar JavaScript Congela elementos afetados pelo JavaScript nos respectivos estados atuais. 


Desativar JavaScript Desativa o JavaScript e processa novamente a página com a aparência que ela teria caso o navegador não tivesse 
JavaScript ativado. 


Desativar plug-ins Desativa plug-ins e processa novamente a página com a aparência que ela teria caso o navegador não tivesse plug-ins 
ativados. 


Realçar alterações no Código ativo Ativa ou desativa o destaque para as alterações do Código ativo. 


Editar a página de visualização ativa em uma nova guia Permite que você abra novas guias para documentos do site para os quais você 
navega usando a barra de ferramentas de navegação do navegador ou o recurso Seguir link(s). Você deve navegar para o documento primeiro e, 
em seguida, selecionar Editar a página Visualização ativa em uma nova guia para criar uma nova guia para ela. 


Seguir link Ativa o próximo link em que você clica na Visualização ativa Como alternativa, você pode usar Control-clique em um link na 
visualização Ativa para ativá-lo. 


Seguir links continuamente Torna os links da visualização Ativa continuamente ativos até você desativá-los novamente ou fechar a página. 


Sincronizar automaticamente arquivos remotos Sincroniza automaticamente o arquivo local e remoto quando você clica no ícone Atualizar na 
barra de ferramentas de navegação do navegador. O Dreamweaver coloca seu arquivo no servidor, antes de atualizar, para que os dois arquivos 
estejam sincronizados. 


Usar Servidor de teste para fonte do documento Usado principalmente por páginas dinâmicas (como páginas do ColdFusion) e, por padrão, 
selecionado para páginas dinâmicas. Quando esta opção está selecionada, o Dreamweaver usa a versão do arquivo no servidor de teste do site 
como a fonte de exibição da Visualização dinâmica. 


Usar arquivos locais para links de documento A configuração padrão de sites não dinâmicos. Quando esta opção está selecionada para sites 
dinâmicos que usam servidor de teste, o Dreamweaver usa as versões locais do arquivos vinculados ao documento (por exemplo, arquivos CSS e 
JavaScript), em vez dos arquivos no servidor de teste. Você então pode fazer alterações locais nos arquivos relacionados, de modo a poder 
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visualizar a aparência desses arquivos antes de colocá-los no servidor de teste. Se esta opção estiver desmarcada, o Dreamweaver usará as 
versões do servidor de teste de arquivos relacionados. 


Configurações de solicitação HTTP Conduz a uma caixa de diálogo de configurações avançadas, onde é possível inserir valores para exibição 
de live data. Para obter mais informações, clique no botão Ajuda da caixa de diálogo. 


g ã ” Pam Para o início 
Visualização de páginas em navegadores 


Visualizar em um navegador 

Você pode visualizar uma página em um navegador a qualquer momento; não é necessário carregá-la no servidor da Web primeiro. Ao visualizar 
uma página, todas as funções relacionadas ao navegador devem funcionar, incluindo os comportamentos do JavaScript, os links absolutos e 
relacionados ao documento, os controles ActiveXO e os plug-ins Netscape Navigator, contanto que você tenha instalado os plug-ins ou controles 
ActiveX necessários no seu navegador. 


Antes de visualizar um documento, você precisa salvá-lo; caso contrário, o navegador não exibirá as alterações mais recentes. 


1. Escolha uma destas opções para visualizar a página: 
* Selecione Arquivo > Visualizar no navegador e, em seguida, selecione um dos navegadores listados. 


Nota: Se nenhum navegador estiver listado, selecione Editar > Preferências ou Dreamweaver > Preferências (Macintosh) e, em seguida, 
selecione a categoria Visualizar no navegador, à esquerda, para selecionar um navegador. 
e Pressione F12 (Windows) ou Option + F12 (Macintosh) para exibir o documento atual no navegador primário. 
e Pressione Control + F12 (Windows) ou Command + F12 (Macintosh) para exibir o documento atual no navegador secundário. 
2. Clique nos links e teste o conteúdo da sua página. 


Nota: O conteúdo vinculado a um caminho relativo à raiz do site não é exibido quando você visualiza documentos em um navegador local, 
a menos que você especifique um servidor de teste ou selecione a opção Visualizar utilizando o arquivo temporário em Editar&nbsp;> 
Preferências > Visualizar no navegador. Isso ocorre porque os navegadores não reconhecem raízes de site, diferente dos servidores. 


Para visualizar o conteúdo vinculado aos caminhos relativos à raiz, coloque o arquivo em um servidor remoto e selecione Arquivo > 
Visualizar no navegador. 


3. Feche a página do navegador quando terminar o teste. 


Definição das preferências de visualização de navegador 
Você pode definir preferências do navegador a ser usado ao visualizar um site e definir navegadores primários e secundários padrão. 


1. Selecione Arquivo > Visualizar no navegador > Editar lista de navegadores. 


ad 


Para adicionar um navegador à lista, clique no botão de adição (+), preencha a caixa de diálogo Adicionar navegador e clique em OK. 
3. Para excluir um navegador da lista, selecione o navegador e clique no botão de subtração (-). 


B 


Para alterar as configurações de um navegador selecionado, clique no botão Editar, faça alterações na caixa de diálogo Editar navegador e 
clique em OK. 


5. Selecione a opção Navegador primário ou Navegador secundário para especificar se o navegador selecionado é primário ou secundário. 


Pressionar F12 (Windows) ou Option + F12 (Macintosh) abre o navegador primário; pressionar Control + F12 (Windows) ou Command + 
F12 (Macintosh) abre o navegador secundário. 


6. Selecione Visualizar usando arquivo temporário para criar uma cópia temporária para visualização e depuração do servidor. (Desmarque 
esta opção para atualizar o documento diretamente.) 


A Adobe também recomenda 
e Visão geral da barra de ferramentas Navegação do navegador 
e Abertura de arquivos relacionados 
e Tutorial em vídeo da Visualização dinâmica 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Aplicativos da Web e formulários 
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Visualização de live data 


Fornecer live data à página na Visualização dinâmica 
Solução de problemas de live data na Visualização dinâmica 


O recurso Visualizar Live Data está obsoleto no Dreamweaver CS5. Ele foi substituído por Visualização dinâmica, um recurso mais simplificado. 
Para exibir live data em Visualização dinâmica, assegure-se de já ter feito o seguinte procedimento: 


e Definir uma pasta para processar páginas dinâmicas (por exemplo, uma pasta raiz em um servidor ColdFusion ou no computador ou em 
uma máquina remota). 


Se a página exibir uma mensagem de erro quando você ativar a Visualização dinâmica, verifique se o URL na caixa de diálogo Definição de 
sites está correto. 


e Copie os arquivos relacionados (se houver) para a pasta. 


* Forneça à página todos os parâmetros que um usuário normalmente forneceria. 


: x ga ' - m 2 As Para o início 
Fornecer live data à página na Visualização dinâmica 


1. Abra a caixa de diálogo Configurações de visualização dinâmica (Exibir > Opções de visualização dinâmica > Configurações de solicitação 
HTTP). 


Na área Solicitação de URL, clique no botão de adição (+) e digite um parâmetro que a página espera. 
Especifique um nome e um valor de teste para cada parâmetro. 


No menu pop-up Método, selecione o método de formulário em HTML que a página espera: POSTAR ou OBTER. 


q» won 


Para salvar as configurações da página atual, selecione Salvar configurações para este documento e, depois, clique em OK. 


Nota: Para salvar as configurações, você deve ativar as Design Notes (Arquivo > Design Notes). 


Para o início 


Solução de problemas de live data na Visualização dinâmica 


Muitos problemas com a visualização de dados dinâmicos em Visualização dinâmica podem estar ligados a valores não encontrados ou 
incorretos na caixa de diálogo Definição de sites (Site > Editar sites). 


Verifique as configurações do servidor que você especificou como o seu servidor de teste. Você precisa especificar uma pasta capaz de 
processar páginas dinâmicas quando a caixa de diálogo de Definição de sites solicita uma pasta de servidor ou diretório raiz. Veja um exemplo de 
uma pasta de servidor apropriada se IIS ou PWS estiverem em execução no disco rígido: 


CNInetpublwwwrooiimyappl 


Verifique se a caixa do URL especifica um URL que corresponda (mapeia) à pasta do servidor. Por exemplo, se PWS ou IIS estiverem em 
execução no computador local, estas pastas remotas terão os seguintes URL: 


Pasta remota URL da Web 
CNInetpublwwywrool http://localhost/ 
CNInetpublwwwrooiimyappl http://localhost/myapp/ 
CNInetpublwwwrootisiplanes http://localhost/fs/planes 


Mais tópicos da Ajuda 


(69) ex-nc-sa ] 
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Introdução aos aplicativos da Web 


Sobre os aplicativos da Web 

Usos comuns dos aplicativos da Web 
Exemplo de aplicativo da Web 

Como funciona um aplicativo de Web 
Processamento de páginas da Web estáticas 
Processamento de páginas dinâmicas 
Acesso a um banco de dados 

Criação de páginas dinâmicas 

Terminologia do aplicativo da Web 


Para o início 


Sobre os aplicativos da Web 


Um aplicativo da Web é um site que contém páginas de conteúdo parcial ou inteiramente não determinado. O conteúdo final de uma página só é 
determinado quando o visitante solicita uma página do servidor Web. Como o conteúdo final da página varia de solicitação para solicitação com 
base nas ações do visitante, esse tipo é chamado de página dinâmica. 


Os aplicativos da Web são criados para superar vários desafios e problemas. Esta seção descreve usos comuns para os aplicativos da Web e 
apresenta um exemplo simples. 


ne Rae 
Usos comuns dos aplicativos da Web dd 


Os aplicativos da Web têm muitos usos tanto para os visitantes quanto para os desenvolvedores do site, inclusive os seguintes: 
e Permitem aos visitantes localizar informações de maneira rápida e fácil em um site rico em conteúdo. 


Esse tipo de aplicativo da Web oferece aos visitantes a possibilidade de pesquisar, organizar e navegar em conteúdo na medida em que 
acharem cabível. Entre os exemplos estão intranets de empresas, o Microsoft MSDN (wwnw.msdn.microsoft.com) e a Amazon.com 
(www.amazon.com). 


e Colete, salve e analise dados fornecidos por visitantes do site. 


Antigamente, os dados inseridos em formulários em HTML eram enviados como mensagens de email a funcionários ou aplicativos CGI para 
processamento. Um aplicativo da Web pode salvar os dados do formulário diretamente em um banco de dados, além de extrair os dados e 
criar relatórios baseados na Web para análise. Entre os exemplos estão páginas de bancos on-line, páginas de retirada de lojas, pesquisas 
e formulários com comentários feitos pelo usuário. 


e Atualize sites cujo conteúdo mude constantemente. 


Um aplicativo da Web evita que o designer fique atualizando continuamente o HTML do site. Provedores de conteúdo como, por exemplo, 
editores de notícias fornecem conteúdo ao aplicativo da Web, e este atualiza o site automaticamente. Entre os exemplos estão a Economist 
(www.economist.com) e a CNN (www.cnn.com). 


Para o início 


Exemplo de aplicativo da Web 


Janet é designer profissional e, há muito tempo, a usuária do Dreamweaver responsável pela manutenção da intranet e do site de uma empresa 
de médio porte com 1.000 funcionários. Certo dia, Chris, dos Recursos Humanos, chega até ela com um problema. O RH administra um 
programa de condicionamento físico que dá aos funcionários pontos para cada quilômetro percorrido andando, de bicicleta ou correndo. Cada 
funcionário deve informar seu total mensal de quilômetros em um email enviado para Chris. Ao final do mês, Chris reúne todas as mensagens de 
email e dá aos funcionários pequenos prêmios em dinheiro de acordo com sua pontuação total. 


O problema de Chris é que o programa de condicionamento físico cresceu muito. Assim, muitos funcionários estão participando, e Chris é 
sobrecarregado com emails ao final de cada mês. Chris pergunta a Janet se há uma solução baseada na Web. 


Janet propõe um aplicativo da Web baseado na intranet que realiza as seguintes tarefas: 
e Permite aos funcionários inserir a quilometragem em uma página da Web usando um formulário em HTML simples 
e Armazena a quilometragem do funcionário em um banco de dados 
e Calcula os pontos de condicionamento físico de acordo com os dados da quilometragem 


e Permite aos funcionários controlar o andamento mensal 
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e Dáa Chris o acesso com um clique à pontuação total ao final de cada mês 


Janet coloca o aplicativo em funcionamento antes do horário de almoço usando o Dreamweaver, que conta com as ferramentas de que ela 
precisa para criar esse tipo de aplicativo rápida e facilmente. 


p E ã Para o início 
Como funciona um aplicativo de Web 
Um aplicativo de Web é um conjunto de páginas de Web estáticas e dinâmicas. Uma página da Web estática é aquela que não se altera quando 
um visitante a solicita: o servidor Web envia a página para o navegador da Web solicitante sem modificá-la. Já uma página da Web dinâmica é 
modificada pelo servidor antes de ser enviada para o navegador solicitante. A natureza mutável da página justifica ela ser chamada de dinâmica. 


Por exemplo, você poderia projetar uma página para exibir os resultados do condicionamento físico, ao mesmo tempo em que deixaria que 
determinadas informações (como, por exemplo, o nome do funcionário e os resultados) fossem determinadas quando a página fosse solicitada 
por um determinado funcionário. 


As próximas seções descrevem mais detalhadamente como funcionam os aplicativos da Web. 


Za gia Para o início 
Processamento de páginas da Web estáticas 
Um site estático é formado por um conjunto de páginas em HTML relacionadas e arquivos hospedados em um computador com um servidor Web 
em execução. 


Um servidor Web é o software que apresenta páginas da Web em resposta a solicitações de navegadores da Web. Uma solicitação de página é 
gerada quando um visitante clica em um link em uma página da Web, seleciona um marcador em um navegador ou digita um URL na caixa de 
texto de endereço do navegador. 


O conteúdo final de uma página da Web estática é determinado pelo designer da página e não é alterado quando ela é solicitada. Eis um 
exemplo: 


<html> 
<head> 
<title>Trio Motors Information Page</title> 
</head> 
<body> 
<h1>About Trio Motors</h1> 
<p>Trio Motors is a leading automobile manufacturer.</p> 
</body> 
</html> 


Todas as linhas do código em HTML da página são escritas pelo designer antes da página ser colocada no servidor. Como o HTML, uma vez no 
servidor, não é alterado, esse tipo de página é chamado de página estática. 


Nota: Mais especificamente, uma página “estática” pode não ser tão estática assim. Por exemplo, uma imagem de sobreposição ou um 
conteúdo Flash (um arquivo SWF) pode dar vida a uma página estática. No entanto, essa documentação se refere a uma página como sendo 
estática caso ela seja enviada para o navegador sem modificações. 

Quando recebe uma solicitação de uma página estática, o servidor Web lê a solicitação, localiza a página e a envia para o navegador solicitante, 
como mostra o seguinte exemplo: 


3] SERVIDOR WEB 


Navegador da web 


1. Navegador da Web solicita a página estática. 2. Servidor Web localiza a página. 3. Servidor Web envia a página para o navegador 
solicitante. 
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No caso dos aplicativos da Web, certas linhas de código não são determinadas quando o visitante solicita a página. Para que a página seja 
enviada ao navegador, essas linhas devem ser determinadas por um mecanismo. O mecanismo é abordado na seguinte seção. 


ra E Para o início 
Processamento de páginas dinâmicas 
Ao receber uma solicitação de uma página da Web estática, um servidor Web envia a página diretamente para o navegador solicitante. Porém, 
ao receber uma solicitação de uma página dinâmica, o servidor Web reage de maneira diferente: ele passa a página para uma parte especial do 
software responsável pela conclusão da página. Esse software especial é chamado de servidor de aplicativo. 


O servidor de aplicativo lê o código na página, conclui a página de acordo com as instruções do código e, em seguida, remove o código da 
página. O resultado é uma página estática que o servidor de aplicativo passa para o servidor Web que, em seguida, envia a página para o 
navegador solicitante. Todo o obtido pelo navegador quando a página chega é HTML puro. Eis uma visualização do processo: 


SERVIDOR WEB 


Navegador da Web 


1. Navegador da Web solicita a página dinâmica. 2. Servidor Web localiza e passa a página para o servidor de aplicativo. 3. Servidor de 
aplicativo rastreia a página em busca de instruções e conclui a página. 4. Servidor de aplicativo passa novamente a página concluída para o 
servidor Web. 5. Servidor Web envia a página concluída para o navegador solicitante 


Para o início 
Acesso a um banco de dados 
Um servidor de aplicativo permite trabalhar com recursos do servidor como, por exemplo, bancos de dados. Por exemplo, uma página dinâmica 
pode instruir o servidor de aplicativo para extrair dados de um banco de dados e inseri-los no HTML da página. Para obter mais informações, 
consulte www.adobe.com/go/learn dw dbguide br. 


O uso de um banco de dados para armazenar o conteúdo permite separar o design do site do conteúdo que você deseja exibir para os usuários 
do site. Em vez de escrever arquivos em HTML individuais para cada página, você só precisa escrever uma página — ou modelo — para os 
diferentes tipos de informações que deseja apresentar. Em seguida, você pode carregar o conteúdo em um banco de dados e, em seguida, fazer 
com que o site recupere esse conteúdo em resposta a uma solicitação do usuário. Você também pode atualizar as informações em uma única 
fonte e, em seguida, preencher essa alteração em todo o site sem ter que editar manualmente todas as páginas. Você pode usar o 

AdobeQ Dreamweaver? para projetar formulários da Web a fim de inserir, atualizar ou excluir dados do banco de dados. 


A instrução para extrair dados de um banco de dados é chamada de consulta ao banco de dados. Uma consulta consiste em critérios de 
pesquisa expressados em uma linguagem de banco de dados chamada SQL (Linguagem de consulta estruturada). A consulta SQL é escrita em 
scripts ou tags do servidor da página. 


Um servidor de aplicativo não pode se comunicar diretamente com um banco de dados porque o formato próprio do banco de dados processa os 
dados indecifráveis de maneira muito semelhante a um documento do Microsoft Word aberto no Bloco de Notas ou BBEdit talvez seja 
indecifrável. O servidor de aplicativo pode se comunicar com o banco de dados apenas por meio de um driver de banco de dados: software que 
funciona como um intérprete entre o servidor de aplicativo e o banco de dados. 


Depois que o driver estabelece a comunicação, a consulta é executada no banco de dados e um conjunto de registros é criado. Um conjunto de 
registros é um conjunto de dados extraídos de uma ou mais tabelas de um banco de dados. O conjunto de registros retorna ao servidor de 
aplicativo, que usa os dados para completar a página. 


Eis uma consulta ao banco de dados simples escrita em SQL: 
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SELECT lastname, firstname, fitpoints 
FROM employees 


A instrução cria um conjunto de registros com três colunas e o preenche com linhas que contêm sobrenome, nome e pontos em condicionamento 
físico de todos os funcionários no banco de dados. Para obter mais informações, consulte www.adobe.com/go/learn dw salprimer br. 


O seguinte exemplo mostra o processo de consulta a um banco de dados e o retorno dos dados ao navegador: 


SERVIDOR WEB 


Navegador da Web 


o 


1. Navegador da Web solicita a página dinâmica. 2. Servidor Web localiza e passa a página para o servidor de aplicativo. 3. Servidor de 
aplicativo rastreia a página em busca de instruções. 4. Servidor de aplicativo envia consulta ao driver de banco de dados. 5. Driver executa a 
consulta no banco de dados. 6. Conjunto de registros é devolvido ao driver. 7. Driver passa o conjunto de registros para o servidor de 
aplicativo 8. Servidor de aplicativo insere dados na página e, em seguida, passa a página para o servidor Web 9. Servidor Web envia a página 
concluída para o navegador solicitante. 


Você pode usar praticamente qualquer banco de dados com o aplicativo da Web, desde que o driver de banco de dados apropriado esteja 
instalado no servidor. 


Caso pretenda criar pequenos aplicativos de baixo custo, você pode usar um banco de dados baseado em arquivo como, por exemplo, um criado 
no Microsoft Access. Caso pretenda criar aplicativos robustos, fundamentais à empresa, você pode usar um banco de dados baseado em 
servidor como, por exemplo, um criado no Microsoft SQL Server, no Oracle 9i ou no MySQL. 


Caso o banco de dados esteja localizado em um sistema que não seja o servidor Web, verifique se há uma conexão rápida entre os dois 
sistemas para que o aplicativo da Web possa operar com rapidez e eficiência. 


E, É ra mf UR Para o início 
Criação de páginas dinâmicas 
A criação de uma página dinâmica consiste em escrever primeiramente o HTML e, em seguida, adicionar os scripts ou as tags do servidor ao 
HTML para tornar a página dinâmica. Quando você exibe o código resultante, a linguagem aparece incorporada ao HTML da página. Dessa 
forma, essas linguagens são conhecidas como linguagens de programação com HTML incorporado. O seguinte exemplo básico usa a Linguagem 
de markup do ColdFusion (CFML): 

Nota: O suporte para CFML foi removido do Dreamweaver CC e posterior. 


<html> 
<head> 
<title>Trio Motors Information Page</title> 
</head> 
<body> 
<h1>About Trio Motors</h1> 
<p>Trio Motors is a leading automobile manufacturer.</p> 
<!--- embedded instructions start here ---> 
<cfset department="Sales"> 
<cfoutput> 
<p>Be sure to visit our department& page.</p> 
</cfoutput> 
<!--- embedded instructions end here ---> 
</body> 
</html> 
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As instruções incorporadas à página realizam as seguintes ações: 
1. Crie uma variável chamada department e atribua a sequência de caracteres "Sales" a ela. 
2. Insira o valor da variável, "Sales", ao código em HTML. 


O servidor de aplicativo retorna a seguinte página ao servidor Web: 


<html> 
<head> 
<title>Trio Motors Information Page</title> 
</head> 
<body> 
<h1>About Trio Motors</h1> 
<p>Trio Motors is a leading automobile manufacturer .</p> 
<p>Be sure to visit our Sales page.</p> 
</body> 
</html> 


O servidor Web envia a página para o navegador solicitante, que a exibe da seguinte forma: 
Sobre a Trio Motors 

A Trio Motors é uma grande montadora de automóveis. 

Não deixe de visitar a nossa página de vendas. 


Você escolhe uma linguagem de script ou baseada em tag a ser usada de acordo com a tecnologia disponível no servidor. Estas são as 
linguagens mais conhecidas para as tecnologias de servidor que recebem suporte doDreamweaver: 


Tecnologia de servidor Linguagem 
ColdFusion Linguagem de markup do ColdFusion (CFML) 
ASP (Páginas ativas do servidor) VBScript 
JavaScript 
PHP PHP 


O Dreamweaver pode criar os scripts ou as tags do servidor necessárias ao funcionamento das páginas, ou você pode escrevê-los manualmente 
no ambiente de codificação do Dreamweaver. 


Para o início 


Terminologia do aplicativo da Web 
Esta seção define os termos mais usados em relação aos aplicativos da Web. 


Um servidor de aplicativo Software que ajuda um servidor Web a processar páginas da Web que contenham scripts ou tags do servidor. 
Quando uma página dessas é solicitada no servidor, o servidor Web a entrega ao servidor de aplicativo para que ele a processe antes do envio 
da página para o navegador. Para obter mais informações, consulte Como funciona um aplicativo de Web. 


Servidores de aplicativo comuns incluem ColdFusion e PHP. 


Um banco de dados Um conjunto de dados armazenados em tabelas. Cada uma das linhas de uma tabela constitui um registro e cada coluna, 


um campo no registro, como mostrado no seguinte exemplo: 
Campos (colunas) 


Um driver de banco de dados Software que funciona como intérprete entre um aplicativo da Web e um banco de dados. Os dados em um 
banco de dados são armazenados em um formato próprio. Um driver de banco de dados permite ao aplicativo da Web ler e manipular dados que 
outrora seriam indecifráveis. 

Um sistema de gerenciamento do banco de dados (DBMS ou sistema de banco de dados) Software usado para criar e manipular bancos de 
dados. Entre os sistemas de banco de dados mais comuns estão Microsoft Access, Oracle 9i e MySQL. 

Uma consulta ao banco de dados A operação que extrai um conjunto de registros de um banco de dados. Uma consulta consiste em critérios 
de pesquisa expressados em uma linguagem de banco de dados chamada SQL. Por exemplo, a consulta pode especificar que apenas 
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determinadas colunas ou certos registros sejam incluídos no conjunto. 

Uma página dinâmica Uma página da Web personalizada por um servidor de aplicativo para que a página seja enviada a um navegador. 
Um conjunto de registros Um conjunto de dados extraídos de uma ou mais tabelas em um banco de dados, como mostrado no 
seguinte exemplo: 


Tabela de conjunto de registros 


Um banco de dados relacional Um banco de dados que contém mais de uma tabela, com as tabelas compartilhando os dados. O seguinte 
banco de dados é relacional porque duas tabelas compartilham a mesma coluna DepartmentlD. 


EmpEmployees EmpDepartments 


DepartmentiD 
DepartmentName 


Temporary 
Email 


Uma tecnologia de servidor A tecnologia que o servidor de aplicativo usa para modificar páginas dinâmicas durante o runtime. 
O ambiente de desenvolvimento do Dreamweaver dá suporte às seguintes tecnologias de servidor: 


e Adobe8 ColdFusiont 
e Microsoft ASP (Páginas ativas do servidor) 
e PHP: PHP (Pré-processador de hipertexto) 


Você também pode usar o ambiente de codificação do Dreamweaver a fim de desenvolver páginas para qualquer outra tecnologia de 
servidor não listada. 


Uma página estática Uma página da Web não modificada por um servidor de aplicativo para que a página seja enviada a um navegador. Para 
obter mais informações, consulte Processamento de páginas da Web estáticas. 

Um aplicativo da Web Um site que contém páginas de conteúdo parcial ou inteiramente não determinado. O conteúdo final dessas páginas só é 
determinado quando um visitante solicita uma página do servidor Web. Como o conteúdo final da página varia de solicitação para solicitação com 
base nas ações do visitante, esse tipo é chamado de página dinâmica. 

Um servidor Web Software que envia páginas da Web em resposta a solicitações de navegadores da Web. Uma solicitação de página é gerada 
quando um visitante clica em um link em uma página da Web no navegador, seleciona um marcador no navegador ou digita um URL na caixa de 
texto de endereço do navegador. 

Servidores Web populares incluem o Microsoft Internet Information Server (IIS) e o Apache HTTP Server. 


Mais tópicos da Ajuda 
Guia introdutório aos bancos de dados 


(69) ex-nc-sa ] 


Avisos legais | Política de privacidade on-line 
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Utilizando formulários para reunir informações de usuários 


Sobre a coleta de informações dos usuários 

Parâmetros de formulário em HTML 

Parâmetros de URL 

Criação de parâmetros de URL com o uso de links em HTML 


já EA Para o início 
Sobre a coleta de informações dos usuários 
Você pode usar formulários da Web ou links de hipertexto para coletar informações dos usuários, armazenar essas informações na memória do 
servidor e, em seguida, usá-las para criar uma resposta dinâmica baseada nas entradas do usuário. As ferramentas mais comuns para a coleta 
de informações do usuário são os formulários em HTML e os links de hipertexto. 


Formulários em HTML Eles permitem que você colete informações dos usuários e as armazene na memória do servidor. Um formulário em 
HTML pode enviar as informações como parâmetros de formulário ou de URL. 

Links de hipertexto Eles permitem que você colete informações dos usuários e as armazene na memória do servidor. Você especifica um valor 
(ou valores) a ser enviado quando o usuário clica em um link — uma preferência, por exemplo — acrescentando o valor à URL especificada na tag 
de ancoragem. Quando um usuário clica no link, o navegador envia o URL e o valor acrescentado para o servidor. 


A Pe Para o início 
Parâmetros de formulário em HTML a 


Os parâmetros de formulário são enviados para o servidor usando um formulário em HTML com o método POSTAR ou OBTER. 


Quando estiver usando o método POSTAR, os parâmetros serão enviados para o servidor da Web como parte do cabeçalho do documento e não 
ficam visíveis ou acessíveis para qualquer pessoa que esteja usando métodos padrão para exibir a página. O método POSTAR deve ser usado 
para valores que afetam o conteúdo do banco de dados (por exemplo, inserindo, atualizando ou excluindo registros) ou para valores enviados por 
email. 


O método OBTER acrescenta parâmetros à URL solicitada. Os parâmetros ficam visíveis para qualquer pessoa que esteja exibindo a página. O 
método OBTER deve ser usado em formulários de pesquisa. 


Você pode usar o Dreamweaver para projetar rapidamente formulários em HTML que enviam parâmetros de formulário para o servidor. Tome 
cuidado com o método que você usa para transmitir informações do navegador para o servidor. 


Os parâmetros de formulário usam os nomes dos objetos de formulário correspondentes. Por exemplo, caso o formulário contenha um campo de 
texto chamado txtLastName, o seguinte parâmetro de formulário é enviado para o servidor quando o usuário clica no botão Enviar: 


txtLastName=enteredvalue 


Nos casos em que um aplicativo da Web espera um valor de parâmetro preciso (por exemplo, quando ele realiza uma ação com base em uma de 
várias opções), use um botão de opção, uma caixa de seleção ou um objeto de formulário lista/menu para controlar os valores que o usuário 
pode enviar. Isso impede que os usuários digitem as informações incorretamente e causem um erro de aplicativo. O seguinte exemplo mostra um 
formulário de menu pop-up que oferece três opções: 


À Adicionar, Atualizar e Excluir - Microsoft Internet Explorer 


Arquivo Editar Exibir Favortos Ferramentas Ajuda 


e| ? [8 (8) 6 P xe [| a 
Endereço | AB) http:/Hocalhost/TestaSP/TMPIovtytizxw.asp 


Adicionar um registro » 


Adicionar um reg 


Atualizar um registro 
Excluir um registro 


Cada opção de menu corresponde a um valor codificado enviado como um parâmetro de formulário para o servidor. A caixa de diálogo Listar 
valores do seguinte exemplo compara cada item de lista com um valor (Adicionar, Atualizar ou Excluir): 
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Listar valores 


CC) 


Rótulo de item Valor 
Adicionar um registro Adicionar 


Atualizar um registro Atualizar 
Excluir um registro Excluir 


Depois que um parâmetro de formulário é criado, o Dreamweaver pode recuperar o valor e usá-lo em um aplicativo da Web. Depois da definição 
do parâmetro de formulário no Dreamweaver, você pode inserir o valor em uma página. 


A Para o início 
Parâmetros de URL 
Os parâmetros de URL permitem passar informações fornecidas pelo usuário do navegador para o servidor. Quando um servidor recebe uma 
solicitação e os parâmetros são acrescentados à URL da solicitação, o servidor dá à página solicitada acesso aos parâmetros antes de oferecê-la 
ao navegador. 


Um parâmetro de URL é um par nome/valor acrescentado a um URL. O parâmetro começa com um ponto de interrogação (?) e usa a forma 
nome=valor. Caso haja mais de um parâmetro de URL, cada um deles é separado por um e comercial (&). O seguinte exemplo mostra um 
parâmetro de URL com dois pares nome/valor: 


http://server/path/document?namei=valuel&nameZ=valueZ 


No fluxo de trabalho desse exemplo, o aplicativo é uma loja baseada na Web. Como os desenvolvedores do site querem atingir o maior público 
possível, o site foi projetado para dar suporte a moedas estrangeiras. Ao fazer logon no site, os usuários podem selecionar a moeda na qual 
exibem os preços dos itens disponíveis. 


1. O navegador solicita a página report.cfm do servidor. A solicitação inclui o parâmetro de URL Currency="euro". A variável Currency="euro" 
especifica que todas as quantias monetárias recuperadas sejam exibidas em euro da União Europeia. 


2. O servidor armazena temporariamente o parâmetro de URL na memória. 


3. A página report.cfm usa os parâmetros para recuperar o custo dos itens em euros. Essas quantias monetárias podem ser armazenadas em 
uma tabela de banco de dados com moedas diferentes ou convertidas de uma moeda exclusiva associada a cada item (qualquer moeda 
com suporte do aplicativo). 


4. O servidor envia a página report.cfm para o navegador e exibe o valor dos itens na moeda solicitada. Quando esse usuário encerra a 
sessão, o servidor limpa o valor do parâmetro de URL, o que libera a memória do servidor para hospedar novas solicitações de usuário. 


SERVIDOR WEB 


http:/Awww.mysite.com/ 
report.cfm?Currency="€" 


Navegador da Web 


<HTML> 


<code> 
</HTML> 


report.cfm 


Os parâmetros de URL também são criados quando o método HTTP OBTER é usado em conjunto com um formulário em HTML. O método 
OBTER especifica se o valor de parâmetro está acrescentado à solicitação de URL quando o formulário é enviado. 


Entre os usos típicos dos parâmetros de URL está a personalização dos sites com base nas preferências do usuário. Por exemplo, um 
parâmetro de URL que consiste em um nome de usuário e senha pode ser usado para autenticar um usuário, exibindo apenas informações 
para as quais o usuário se registrou. Entre os exemplos comuns disso estão os sites de finanças que exibem os preços das ações com 
base nos símbolos do mercado de ações que o usuário escolheu previamente. Os desenvolvedores de aplicativo da Web normalmente 
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usam os parâmetros de URL para passar valores a variáveis dentro de aplicativos. Por exemplo, você poderia passar termos para variáveis 
SQL em um aplicativo da Web a fim de gerar resultados de pesquisa. 


e ER , P iníci 
Criação de parâmetros de URL com o uso de links em HTML PAN 
Você cria parâmetros de URL dentro de um link em HTML por meio do uso do atributo href da tag de ancoragem HTML. Você pode digitar os 
parâmetros de URL diretamente no atributo na visualização Código (Exibir > Código) ou por meio do acréscimo dos parâmetros de URL ao final 
do URL do link na caixa Link do Inspetor de propriedades. 


No seguinte exemplo, três links criam um parâmetro de URL exclusivo (action) com três valores possíveis (Adicionar, Atualizar e Excluir). Quando 
o usuário clica em um link, um valor de parâmetro é enviado para o servidor, e a ação solicitada é realizada. 


<a href="http://wuw.mysite.com/index.cfm?action=Add">Add a record</a> 
<a href="http://wuw.mysite.com/index.cfm?action=Update">Update a record</a> 
<a href="http://wuw.mysite.com/index.cfm?action=Delete">Delete a record</a> 


O Inspetor de propriedades (Janela > Propriedades) permite criar os mesmos parâmetros de URL com a seleção do link e o acréscimo dos 
valores de parâmetro de URL ao final do URL do link na caixa Link. 


PROPRIEDADES 


tm | Formato Nenhum(a) | Classe | Nenhum(a) v| BZ [== til Tudo 
css ID | Nenhum(a) ” Link | site.comfindex,cfm?action=Delete 4, [8 m) Destino Excluir 
Propriedades da página... Item de lista 


Depois que um parâmetro de URL é criado, o Dreamweaver pode recuperar o valor e usá-lo em um aplicativo da Web. Depois da definição do 
parâmetro de URL no Dreamweaver, você pode inserir o valor em uma página. 


Mais tópicos da Ajuda 


(9) ex-nc-sa ) 
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Uso de componentes do ColdFusion 


Sobre os componentes do ColdFusion 

Visão geral do painel Componentes (ColdFusion) 

Criar ou excluir um CFC no Dreamweaver 

Exibir CFCs no Dreamweaver 

Editar CFCs no Dreamweaver 

Criar páginas da Web que usam CFCs 

Definir um conjunto de registros em um CFC 

Usar um conjunto de registros CFC como fonte de conteúdo dinâmico 
Definir conteúdo dinâmico usando um CFC 


Nota: O suporte para o ColdFusion foi removido no Dreamweaver CC e posterior. 


, Para o início 
Sobre os componentes do ColdFusion 
Os arquivos CFC (componente do ColdFusion) lhe permitem integrar as lógicas de aplicativo e de negócios em unidades reutilizáveis, inteiras. Os 
CFCs também proporcionam uma forma rápida e fácil de criar serviços da Web. 


Um CFC é uma unidade de software reutilizável escrita em CFML (linguagem de markup do ColdFusion), que facilita a reutilização e a 
manutenção do código. 


Você pode usar o Dreamweaver para trabalhar com CFCs. Para obter informações sobre as tags e a sintaxe CFC, consulte a documentação do 
ColdFusion em Dreamweaver (Ajuda > Uso do ColdFusion). 


Nota: Você só pode usar CFCs com o ColdFusion MX ou posterior. Não há suporte para CFCs no ColdFusion 5. 

Os CFCs devem fornecer uma forma simples, mas eficiente, para que desenvolvedores integrem elementos dos sites. Normalmente, você deve 
usar componentes na lógica de aplicativo ou de negócios. Use tags personalizadas em elementos de apresentação como, por exemplo, 
saudações personalizadas, menus dinâmicos etc. 


Assim como acontece com muitos outros tipos de construção, os sites dinâmicos normalmente podem aproveitar partes intercambiáveis. Por 
exemplo, um site dinâmico pode executar a mesma consulta repetidamente ou calcular o preço total das páginas do carro de compras e 
recalculá-lo sempre que um item é adicionado. Essas tarefas podem ser tratadas por componentes. Você pode corrigir, melhorar, estender e até 
mesmo substituir um componente com impacto mínimo sobre o resto do aplicativo. 


Suponhamos que uma loja online calcule o frete com base no preço dos pedidos. Para pedidos abaixo de US$ 20, o frete é de US$ 4; para 
pedidos entre US$ 20 e US$ 40, ele é de US$ 6 e assim por diante. Você poderia inserir a lógica de cálculo do frete tanto na página do carro de 
compras quanto na página de retirada, mas isso misturaria o código de apresentação em HTML e o código da lógica em CFML, além de 
normalmente dificultar a manutenção e a reutilização. 


Você decide criar um CFC chamado Preço que tem, dentre outras coisas, uma função chamada ShippingCharge. A função usa um preço como 
argumento e retorna um frete. Por exemplo, caso o valor do argumento seja 32,80, a função retorna 6. 


Tanto na página do carro de compras quanto na página de retirada, você insere uma tag especial para invocar a função ShippingCharge. Quando 
a página é solicitada, a função é invocada e um frete retorna para a página. 


Mais tarde, a loja anuncia uma promoção especial: frete gratuito para todos os pedidos acima de US$ 100. Você faz a alteração nos fretes em 
um só local — a função ShippingCharge do componente Preço — e todas as páginas que usam a função obtêm automaticamente fretes precisos. 


Visão geral do painel Componentes (ColdFusion) RPE SMB 


Use o painel Componentes (Janela > Componentes) para exibir e editar os componentes do ColdFusion e adicione um código à página que 
invoca a função quando a página em CFM é solicitada. 


Nota: O painel Componentes só está disponível durante a exibição de uma página do ColdFusion no Dreamweaver. 


: : E e 
Criar ou excluir um CFC no Dreamweaver ara o início 


Você pode usar o Dreamweaver para definir visualmente um CFC e suas funções. O Dreamweaver cria um arquivo .cfc e insere as tags de CFML 
necessárias para você. 
Nota: Dependendo do componente, você talvez tenha que completar alguns códigos manualmente. 

1. Abra uma página do ColdFusion no Dreamweaver. 


2. No painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up. 
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3. Clique no botão de adição (+), complete a caixa de diálogo Criar componente e clique em OK. 


a. Na seção Componentes, informe os detalhes do componente. Aqui está uma lista parcial: 
Nome Especifica o nome de arquivo do componente. O nome deve conter apenas caracteres alfanuméricos e sublinhados ( ). Não 
especifique a extensão de arquivo .cfc ao digitar o nome. 


Diretório do componente Especifica onde o componente é salvo. Selecione a pasta raiz do aplicativo da Web (como, por exemplo, 
Ynetpublwwwrooâmyapp!) ou qualquer uma das subpastas. 


b. Para definir uma ou mais funções para o componente, selecione Funções na lista Seção, clique no botão de adição (+) e insira os 
detalhes da nova função. 


Verifique se você especificou o tipo do valor retornado pela função na opção Tipo de retorno. 


Caso você selecione remoto no menu Acesso, a função é disponibilizada como um serviço da Web. 


c. Para definir um ou mais argumentos de uma função, selecione Argumentos na lista Seção, selecione a função no menu pop-up, clique 
no botão de adição (+) e insira os detalhes do novo argumento à direita. 


4. Caso você use um servidor de desenvolvimento remoto, carregue o arquivo CFC e todos os arquivos dependentes (como, por exemplo, os 
usados para implementar uma função ou para incluir arquivos) no servidor remoto. 


O carregamentos dos arquivos garante que recursos do Dreamweaver como, por exemplo, a visualização Live e Visualizar o navegador 
funcionem corretamente. 


O Dreamweaver escreve um arquivo CFC e o salva na pasta que você especificar. O novo componente também é exibido no painel 
Componentes (depois do clique em Atualizar). 


5. Para remover um componente, você deve excluir manualmente o arquivo CFC do servidor. 


ne ER 
Exibir CFCs no Dreamweaver DE 


O Dreamweaver fornece uma forma de examinar visualmente os componentes de ColdFusion (CFCs) localizados na pasta do site ou em todo o 
servidor. O Dreamweaver lê os arquivos CFC e exibe informações sobre eles em uma visualização hierárquica de fácil navegação no painel 
Componentes. 


O Dreamweaver procura os componentes no servidor de teste (consulte Conexão com o banco de dados no Dreamweaver). Caso você crie CFCs 
ou faça alterações nos CFCs existentes, não se esqueça de carregar os arquivos CFC no servidor de teste para que eles sejam refletidos com 
precisão no painel Componentes. 


Para exibir os componentes localizados em outro servidor, altere as configurações do servidor de teste. 
Você pode exibir qualquer uma das seguintes informações sobre os componentes do CF: 
* Listar todos os componentes do ColdFusion definidos no servidor. 
e Caso você esteja executando o ColdFusion MX 7 ou posterior, filtre a lista para mostrar apenas os CFCs localizados na pasta do site. 
e Explorar as funções e os argumentos de cada componente. 
e Inspecionar as propriedades das funções que funcionam como serviços da Web. 


Para usar o Dreamweaver a fim de inspecionar os CFCs que residem na raiz do servidor enquanto também gerencia os arquivos do site em 
uma raiz diferente, você pode definir dois sites do Dreamweaver. Defina o primeiro site de forma a apontar para a raiz do servidor e o 
segundo, para a raiz do site. Use o menu pop-up do site no painel Arquivos para alternar rapidamente entre os dois sites. 


Para exibir os CFCs no Dreamweaver, siga estas etapas: 


1. Abra qualquer página do ColdFusion no Dreamweaver. 
2. No painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up. 


3. Clique no botão Atualizar no painel para recuperar os componentes. 
O pacote de componentes é exibido no servidor. Pacote de componentes é uma pasta que contém arquivos CFC. 
Caso os pacotes de componentes existentes não sejam exibidos, clique no botão Atualizar da barra de ferramentas do painel. 


4. Para exibir apenas os CFCs localizados na pasta do site, clique no botão Mostrar apenas os CFCs do site atual da barra de ferramentas do 


painel Componentes. 
Nota: O recurso só está disponível caso você tenha definido um computador com o ColdFusion MX 6 ou posterior em execução como 


servidor de teste do Dreamweaver. 
Nota: Caso o site atual esteja listado em uma pasta virtual do servidor remoto, a filtragem não funciona. 


5. Clique no botão de adição (+) ao lado do nome do pacote para exibir os componentes armazenados no pacote. 
e Para listar as funções de um componente, clique no botão de adição (+) ao lado do nome do componente. 


e Para ver os argumentos que uma função usa, bem como o tipo de argumento e se eles são obrigatórios ou opcionais, abra a 
ramificação da função na visualização hierárquica. 


As funções que não usam argumentos não apresentam nenhum botão de adição (+) abaixo delas. 
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e Para exibir rapidamente os detalhes de um argumento, de uma função, de um componente ou de um pacote, selecione o item na 
visualização hierárquica e clique no botão Obter detalhes na barra de ferramentas do painel. 


Você também pode clicar com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no item e 
selecionar Obter detalhes no menu pop-up. 


Os detalhes do item são exibidos em uma caixa de mensagem. 


. enRne 
Editar CFCs no Dreamweaver Eid 


O Dreamweaver fornece uma forma aprimorada de edição do código dos componentes do ColdFusion definidos para o site. Por exemplo, você 
pode adicionar, alterar ou excluir qualquer função de componente sem o Dreamweaver. 


Para usar o recurso, o ambiente de desenvolvimento deve ser definido da seguinte forma: 
e O ColdFusion deve estar em execução localmente. 


e Na caixa de diálogo avançada Definição de sites do Dreamweaver, o Tipo de acesso especificado na categoria Servidor de teste deve ser 
Local/rede. 


e Na caixa de diálogo avançada Definição de sites, o caminho da pasta raiz local deve ser igual ao caminho da pasta do servidor de teste (por 
exemplo, cilnetpublwwwrootcf projecisimyNewApp). Você pode examinar e alterar esses caminhos selecionando Site > Editar os sites. 


* O componente deve ser armazenado na pasta do site local ou em qualquer uma das subpastas do disco rígido. 


Abra qualquer página do ColdFusion no Dreamweaver e veja os componentes no painel Componentes. Para exibir os componentes, abra o painel 
Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up do painel e clique no botão Atualizar do painel. 


Como o ColdFusion está em execução localmente, o Dreamweaver exibe os pacotes de componentes no disco rígido. 

Use o seguinte procedimento para editar um componente. 
1. Abra qualquer página do ColdFusion no Dreamweaver e veja os componentes no painel Componentes (Janela > Componentes). 
2. Selecione Componentes CF no menu pop-up do painel e clique no botão Atualizar do painel. 


Como o ColdFusion está em execução localmente, o Dreamweaver exibe os pacotes de componentes no disco rígido. 


Nota: Para editar visualmente o conjunto de registros CFC, clique duas vezes nele no painel Ligações. 

3. Para editar um arquivo de componente em termos gerais, abra o pacote e clique duas vezes no nome do componente na visualização 
hierárquica. 
O arquivo do componente é aberto na Visualização de código. 


Para editar uma função específica, argumento ou propriedade, clique duas vezes no item na visualização hierárquica. 
Faça manualmente as alterações na Visualização de código. 
Salve o arquivo (Arquivo > Salvar). 


SO UT 


Para ver uma nova função no painel Componentes, atualize a visualização clicando no botão Atualizar na barra de ferramentas do painel. 


Criar páginas da Web que usam CFCs dida 


Uma forma de usar a função de um componente nas páginas da Web é escrever código na página que invoca a função quando a página é 
solicitada. Você pode usar o Dreamweaver para ajudar você a escrever o código. 
Nota: Para obter outras formas de usar componentes, consulte a documentação do ColdFusion em Dreamweaver (Ajuda > Uso do ColdFusion). 


1. No Dreamweaver, abra a página do ColdFusion que usará a função de componente. 
Passe para a Visualização de código (Exibir > Código). 
Abra o painel Componentes (Janela > Componentes), selecione Componentes CF no menu pop-up do painel. 


P wo N 


Localize o componente desejado e o insira usando uma das seguintes técnicas: 
e Arraste uma função da visualização hierárquica para a página. O código é inserido na página para invocar a função. 


e Selecione a função no painel e clique no botão Inserir na barra de ferramentas do painel (o segundo botão à direita). O Dreamweaver 
insere o código na página, no ponto de inserção. 


5. Caso você insira uma função com argumentos, complete manualmente o código do argumento. 
Para obter mais informações, consulte a documentação do ColdFusion em Dreamweaver (Ajuda > Uso do ColdFusion). 


6. Salve a página (Arquivo > Salvar). 


gs ; ã Para o início 
Definir um conjunto de registros em um CFC 


O Dreamweaver pode ajudar você a definir um conjunto de registros (também conhecido como consulta do ColdFusion) em um CFC. Definindo 
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um conjunto de registros em um CFC, você não precisa definir o conjunto de registros em todas as páginas em que ele é usado. Você define o 
conjunto de registros uma vez no CFC e usa o CFC em páginas diferentes. 
Nota: Esse recurso só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. Para 
obter mais informações, consulte Ativar os aprimoramentos feitos no ColdFusion. 

1. Crie ou abra um arquivo CFC existente no Dreamweaver. 


2. No painel Ligações (Janela > Ligações), clique no botão de adição (+) e selecione Conjunto de registros (consulta) no menu pop-up. 

A caixa de diálogo Conjunto de registros é exibida. Você pode trabalhar nas caixas de diálogo Conjunto de registros simples ou avançada. 
3. Para usar uma função existente no CFC, selecione a função no menu pop-up Função e passe à etapa 5. 

O conjunto de registros é definido na função. 


4. Para definir uma nova função no CFC, clique no botão Nova função, digite um nome para a função na caixa de diálogo exibida e, em 
seguida, clique em OK. 


O nome deve conter apenas caracteres alfanuméricos e sublinhados ( ). 
5. Para definir um conjunto de registros para a função, complete as opções da caixa de diálogo Conjunto de registros. 


A nova função é inserida no CFC que define o conjunto de registros. 


= a ê E P, iníci 
Usar um conjunto de registros CFC como fonte de conteúdo dinâmico e 


Você pode usar um componente de ColdFusion (CFC) como fonte de conteúdo dinâmico para as páginas caso o componente contenha uma 
função que define um conjunto de registros. 
Nota: Esse recurso só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. Para 
obter mais informações, consulte Ativar os aprimoramentos feitos no ColdFusion. 

1. Abra uma página do ColdFusion no Dreamweaver. 


2. No painel Ligações (Janela > Ligações), clique no botão de adição (+) e selecione Conjunto de registros (consulta) no menu pop-up. 
A caixa de diálogo Conjunto de registros é exibida. Você pode trabalhar nas caixas de diálogo Conjunto de registros simples ou avançada. 


3. Clique no botão Consulta do CFC. 


4. Complete a caixa de diálogo Consulta do CFC, clique em OK e em OK novamente para adicionar o conjunto de registros CFC à lista das 
fontes de conteúdo disponíveis no painel Ligações. 


5. Use o painel Ligações para ligar o conjunto de registros a vários elementos de página. 


Para obter mais informações, consulte Adição de conteúdo dinâmico a páginas. 


SM z do E P iníci 
Definir conteúdo dinâmico usando um CFC Rs POR 


Você pode definir um conjunto de registros como uma fonte de conteúdo dinâmico no Dreamweaver usando um CFC que contém uma definição 
do conjunto de registros. 


1. Na caixa Nome, digite um nome para o conjunto de registros CFC. 


Uma prática comum é adicionar o prefixo rs a nomes do conjunto de registros para diferenciá-los dos demais nomes de objeto no código, 
por exemplo: rsPressRelease. 


Os nomes dos conjuntos de registros devem conter apenas caracteres alfanuméricos e sublinhados ( ). Você não pode usar caracteres 
especiais ou espaços. 


2. Selecione um pacote de um dos já definidos no servidor. 


Caso o pacote não seja exibido no menu pop-up, você pode atualizar a lista de pacotes clicando no botão Atualizar próximo do menu pop- 
up. 
Primeiramente, verifique se você carregou os CFCs no servidor de teste. Só são exibidos CFCs no servidor de teste. 


3. Selecione um componente dentre os definidos no pacote selecionado atualmente. 


Caso o menu pop-up Componente não contenha nenhum componente, ou caso nenhum dos componentes criados anteriormente seja 
exibido no menu, você deve carregar os arquivos CFC no servidor de teste. 


4. (Opcional) Para criar um componente, clique no botão Criar novo componente. 
a. Na caixa Nome, digite o nome para o novo CFC. O nome deve conter apenas caracteres alfanuméricos e sublinhados ( ). 


b. Na caixa Diretório do componente, insira o local do CFC ou localize a pasta. 
Nota: A pasta deve ser o caminho relativo da pasta raiz do site. 


5. No menu pop-up Função, selecione a função que contém a definição do conjunto de registros. 


O menu pop-up Função contém apenas as funções definidas no componente selecionado no momento. Caso nenhuma função seja exibida 
no menu pop-up ou caso as alterações mais recentes não sejam refletidas nas funções listadas atualmente, verifique se as alterações 
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foram salvas e carregadas no servidor. 


Nota: As caixas Conexão e SQL são somente leitura. 
6. Edite todos os parâmetros (tipo, valor e valor padrão) que devem ser passados como um argumento de função clicando no botão Editar. 
a. Insira um valor para o parâmetro atual selecionando o tipo de valor no menu pop-up Valor e inserindo o valor na caixa à direita. 


O tipo de valor pode ser um parâmetro de URL, uma variável de formulário, um cookie, uma variável de sessão, uma variável de 
aplicativo ou um valor inserido. 


b. Insira um valor padrão para o parâmetro na caixa Valor padrão. 
Caso nenhum valor de runtime retorne, o valor de parâmetro padrão é usado. 
c. Clique em OK. 


Você não pode modificar a conexão de banco de dados e a consulta SQL do conjunto de registros. Esses campos estão sempre 
desativados — a conexão e a consulta SQL são exibidas para sua informação. 


7. Clique em Testar para se conectar ao banco de dados e criar uma ocorrência do conjunto de registros. 


Caso a instrução SQL contenha parâmetros de página, verifique se a coluna Valor padrão da caixa Parâmetros contém valores de teste 
válidos antes de clicar em Testar. 


Caso a consulta tenha sido executada com êxito, uma tabela exibe o conjunto de registros. Cada linha contém um registro e cada coluna 
representa um campo nesse registro. 


Clique em OK para limpar a Consulta do CFC. 
8. Clique em OK. 


Mais tópicos da Ajuda 
Configurar um servidor de teste 
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Solução de problemas das conexões de banco de dados 


Solução de problemas de permissão 
Solução de problemas de mensagens de erro Microsoft 
Solução de problemas de mensagens de erro MySQL 


pm” go ig Para o início 
Solução de problemas de permissão 
Uma dos problemas mais comuns é a insuficiência de permissões de arquivo ou de pasta. Caso o banco de dados esteja localizado em um 
computador com o Windows 2000 ou o Windows XP e você receba uma mensagem de erro ao tentar exibir uma página dinâmica em um 
navegador da Web ou na Visualização dinâmica, o erro talvez seja por conta de um problema de permissão. 


A conta do Windows que tenta acessar o banco de dados não tem permissões suficientes. A conta pode ser a conta do Windows anônima (por 
padrão, IUSR computername) ou uma conta de usuário específica, caso a página tenha sido protegida para acesso autenticado. 


Você deve alterar as permissões para dar à conta IUSR computername as permissões corretas de forma que o servidor Web possa acessar o 
arquivo de banco de dados. Além disso, a pasta que contém o arquivo de banco de dados também deve ter determinadas permissões definidas 
para que seja possível gravar nesse banco de dados. 


Caso a página deva ser acessada anonimamente, dê à conta IUSR computername controle total à pasta e ao arquivo de banco de dados, como 
descrito no procedimento abaixo. 


Além disso, caso o caminho do banco de dados seja referenciado usando UNC (NServidoriCompartilhamento), verifique se Permissões de 
compartilhamento dão à conta IUSR computername acesso total. Essa etapa se aplica mesmo que o compartilhamento esteja no servidor Web 
local. 


Caso você copie o banco de dados de outro local, talvez ele não herde as permissões da pasta de destino e você tenha que alterar as 
permissões para o banco de dados. 


Verificar ou alterar as permissões de arquivo do banco de dados (Windows XP) 
1. Verifique se você tem privilégios de administrador no computador. 


2. No Windows Explorer, localize o arquivo do banco de dados ou a pasta que contém o banco de dados, clique com o botão direito do mouse 
no arquivo ou na pasta e selecione Propriedades. 

3. Selecione a aba Segurança. 
Nota: Esta etapa só se aplica caso você tenha um sistema de arquivos NTFS. Se você tiver um sistema de arquivos FAT, a caixa de 
diálogo não terá uma aba Segurança. 


4. Caso a conta IUSR computername não esteja listada na lista Nomes de grupo ou de usuário, clique no botão Adicionar para adicioná-la. 


a 


Na caixa de diálogo Selecionar Usuários e Grupos, clique em Avançado. 
A caixa de diálogo é alterada para mostrar mais opções. 


Clique em Locais e selecione o nome do computador. 
Clique em Localizar agora para exibir uma lista dos nomes de conta associados ao computador. 
Selecione a conta IUSR computername e clique em OK; depois, clique em OK novamente para limpar a caixa de diálogo. 


O. 00 0) 


Para atribuir permissões totais à conta IUSR, selecione Controle total e clique em OK. 


Verificar ou alterar as permissões de arquivo do banco de dados (Windows 2000) 
1. Verifique se você tem privilégios de administrador no computador. 


2. No Windows Explorer, localize o arquivo do banco de dados ou a pasta que contém o banco de dados, clique com o botão direito do mouse 
no arquivo ou na pasta e selecione Propriedades. 

3. Selecione a aba Segurança. 
Nota: Esta etapa só se aplica caso você tenha um sistema de arquivos NTFS. Se você tiver um sistema de arquivos FAT, a caixa de 
diálogo não terá uma aba Segurança. 

4. Caso a conta IUSR computername não esteja listada dentre as contas do Windows na caixa de diálogo Permissões de arquivo, clique no 
botão Adicionar para adicioná-la. 

5. Na caixa de diálogo Selecionar usuários, computadores ou grupos, selecione o nome do computador no menu Pesquisar para exibir uma 
lista dos nomes da conta associados ao computador. 


6. Selecione a conta IUSR computername e clique em Adicionar. 


= 


Para atribuir permissões totais à conta IUSR, selecione Controle total no menu Tipo de acesso e clique em OK. 


535 


Para obter mais segurança, as permissões podem ser definidas de forma que a permissão de Leitura permaneça desativada para a pasta 
da Web que contém o banco de dados. A navegação na pasta não será permitida, embora as páginas da Web continuem podendo acessar 
o banco de dados. 


Para obter mais informações sobre a conta IUSR e as permissões do servidor Web, consulte as seguintes TechNotes no Centro de Suporte 
da Adobe: 


e Understanding anonymous authentication and the IUSR account at www.adobe.com/go/authentication br 


e Setting IIS Web server permissions at www.adobe.com/go/server permissions br 


m - Para o início 
Solução de problemas de mensagens de erro Microsoft 


Essas mensagens de erro Microsoft podem ocorrer quando você solicita uma página dinâmica do servidor caso use o Internet Information Server 
(IIS) com um sistema de banco de dados Microsoft como, por exemplo, o Access ou o SQL Server. 


Nota: A Adobe não dá suporte técnico a softwares de outros fabricantes como, por exemplo, o Microsoft Windows e o IIS. Caso essas 
informações não corrijam o problema, entre em contato com o suporte técnico da Microsoft ou visite o site de suporte Microsoft em 
http://support.microsoft. com/. 


Para obter mais informações sobre erros 80004005, consulte “INFO: Troubleshooting Guide for 80004005 Errors in Active Server Pages and 
Microsoft Data Access Components (Q306518)”, no site da Microsoft em http://support.microsoft.com/default.aspx?scid=kb;pt-br;Q306518. 


[Reference]80004005—Nome da fonte de dados não encontrado e nenhum driver padrão especificado 
Esse erro ocorre quando você tenta exibir uma página dinâmica em um navegador da Web ou na Visualização dinâmica. A mensagem de erro 
pode variar de acordo com o banco de dados e o servidor Web. Entre outras variações da mensagem de erro estão: 


* 80004005-—Falha em SQLSetConnectAttr do driver 
* 80004005—Erro geral ao não poder abrir a chave do Registro 'Driverld" 
Eis as causas possíveis e as soluções: 
e A página não consegue localizar o DSN. Verifique se um DSN foi criado tanto no servidor Web quanto na máquina local. 


e O DSN pode ter sido definido como um DSN de usuário, e não de sistema. Exclua o DSN de usuário e crie um DSN de sistema para 
substituí-lo. 


Nota: Caso você não exclua o DSN de usuário, os nomes de DSN duplicados produzem um novo erro ODBC. 


Caso você use o Microsoft Access, o arquivo de banco de dados (.mdb) pode estar bloqueado. O bloqueio talvez se deva a um DSN com um 
nome diferente acessando o banco de dados. No Windows Explorer, procure o arquivo de bloqueio (.Idb) na pasta que contém o arquivo de banco 
de dados (.mdb) e exclua o arquivo .Idb. Caso haja outro DSN apontando para o mesmo arquivo de banco de dados, exclua o DSN a fim de 
evitar o erro no futuro. Reinicie o computador depois de fazer todas as alterações. 


[Reference]80004005—Não foi possível usar “(desconhecido)”; arquivo já em uso 


Esse erro ocorre quando você usa um banco de dados do Microsoft Access e tenta exibir uma página dinâmica em um navegador da Web ou na 
Visualização dinâmica. Outra variação da mensagem de erro é “80004005—0O mecanismo de banco de dados Microsoft Jet não pôde abrir o 
arquivo (desconhecido).” 


A causa provável é um problema de permissão. Eis algumas causas específicas e as soluções: 


e A conta usada pelo Internet Information Server (normalmente, IUSR) talvez não tenha as permissões do Windows corretas para um banco 
de dados baseado em arquivo ou para a pasta que contém o arquivo. Verifique as permissões na conta do IIS (IUSR) no gerenciador de 
usuários. 


e Você talvez não tenha permissão para criar ou destruir arquivos temporários. Verifique as permissões quanto ao arquivo e à pasta. Verifique 
se você tem permissão para criar ou destruir algum arquivo temporário. Os arquivos temporários são normalmente criados na mesma pasta 
do banco de dados, embora o arquivo também possa ser criado em outras pastas como, por exemplo, AWinnt. 


e No Windows 2000, talvez seja necessário alterar o valor de tempo-limite para o DSN do banco de dados do Access. Para alterar o valor de 
tempo-limite, selecione Iniciar > Configurações > Painel de Controle > Ferramentas Administrativas > Fontes de Dados (ODBC). Clique na 
aba Sistema, realce o DSN correto e clique no botão Configurar. Clique no botão Opções e altere o valor Tempo limite da página para 5000. 


Caso os problemas persistam, consulte os seguintes artigos da Base de Dados de Conhecimento da Microsoft: 
* PRB: 80004005 “Couldn't Use “(unknown)”; File Already in Use” at http://support.microsoft.com/default.aspx?scid=kb;pt-br;Q174943. 


e PRB: Microsoft Access Database Connectivity Fails in Active Server Pages at http://support.microsoft.com/default.aspx?scid=kb;pt- 
br;Q253604. 
* PRB: Error “Cannot Open File Unknown” Using Access at http://support.microsoft.com/default.aspx?scid=kb;pt-br;Q166029. 


[Reference]80004005—Falha no logon() 


536 


Esse erro ocorre quando você usa o Microsoft SQL Server e tenta exibir uma página dinâmica em um navegador da Web ou na Visualização 
dinâmica. 

Esse erro é gerado pelo SQL Server caso você não aceite ou reconheça a conta do logon ou a senha enviada (caso você esteja usando a 
segurança padrão), ou caso uma conta do Windows não esteja mapeada para uma conta SQL (caso você esteja usando a segurança integrada). 


Eis as soluções possíveis: 


e Caso você use a segurança padrão, o nome da conta e a senha talvez estejam incorretos. Tente usar a conta Admin do sistema e a senha 
(UID= “sa” e sem senha), que devem ser definidas na linha da sequência de caracteres de conexão. (Os DSNs não armazenam nomes de 
usuário e senhas.) 


e Caso você use segurança integrada, verifique a conta do Windows chamando a página e localize a conta SQL mapeada (caso haja alguma). 


* O SQL Server não permite sublinhados em nomes de conta SQL. Se alguém mapear manualmente a conta do Windows 
IUSR machinename para uma conta SQL com o mesmo nome, haverá uma falha. Mapeie uma conta que usa um sublinhado para um 
nome de conta no SQL que não usa um sublinhado. 


[Reference]80004005— Operação deve usar uma consulta atualizável 
Esse erro ocorre quando um evento atualiza um conjunto de registros ou insere dados em um conjunto. 


Eis as causas possíveis e as soluções: 


e As permissões definidas na pasta que contém o banco de dados são muito restritivas. Os privilégios IUSR devem ser definidos como 
leitura/gravação. 


e As permissões no arquivo de banco de dados propriamente dito não têm privilégios de leitura/gravação em vigor. 


e O banco de dados deve estar localizado fora do diretório Inetpub/wwwroot. Embora possa exibir e pesquisar os dados, você talvez não 
consiga atualizá-los a menos que o banco de dados esteja localizado no diretório wwwroot. 


e O conjunto de registros se baseia em uma consulta não atualizável. Ingressos são bons exemplos de consultas não atualizáveis dentro de 
um banco de dados. Reestruture as consultas para que elas sejam atualizáveis. 


Para obter mais informações sobre o erro, consulte “PRB: ASP “Error The Query Is Not Updateable' When You Update Table Record”, na 
Base de Dados de Conhecimento da Microsoft em http://support.microsoft.com/default.aspx?scid=kb;pt-br;Q174640. 


[Reference]80040e07—Tipo de dados não correspondente na expressão de critérios 

Esse erro ocorre quando o servidor tenta processar uma página que contém um comportamento de servidor Inserir registro ou Atualizar registro, e 
o comportamento de servidor tenta definir o valor de uma coluna Data/hora de um banco de dados do Microsoft Access como uma sequência de 
caracteres vazia (""). 


O Microsoft Access tem tipo de dados acentuado; ele impõe um conjunto de regras rigorosas em determinados valores de coluna. O valor de 
sequência de caracteres vazia na consulta SQL não pode ser armazenada em uma coluna Data/hora do Access. Atualmente, a única alternativa 
conhecida é evitar a inserção ou a exclusão de colunas Data/hora no Access com sequências de caracteres vazias ("”) ou com qualquer outro 
valor que não corresponda à faixa de valores especificada para o tipo de dados. 


[Reference]80040€e10—Poucos parâmetros 
Esse erro ocorre quando uma coluna especificada na consulta SQL não existe na tabela do banco de dados. Compare os nomes da coluna na 
tabela do banco de dados com a consulta SQL. A causa desse erro costuma ser um erro tipográfico. 


[Reference]80040e10—Campo COUNT incorreto 
Esse erro ocorre quando você visualiza uma página que contém um comportamento de servidor Inserir registro em um navegador da Web e tenta 
usá-lo para inserir um registro em um banco de dados do Microsoft Access. 


Você talvez esteja tentando inserir um registro em um campo de banco de dados que apresenta um ponto de interrogação (?) no nome. O ponto 
de interrogação é um caractere especial para alguns mecanismos de banco de dados, inclusive o Microsoft Access, e não deve ser usado em 
nomes de tabela de banco de dados ou em nomes de campo. 


Abra o sistema de banco de dados e exclua o ponto de interrogação (?) dos nomes de campo e atualize os comportamentos de servidor na 
página que se referem ao campo. 


[Reference]80040e14-—Erro de sintaxe na instrução INSERT INTO 
Esse erro ocorre quando o servidor tenta processar uma página que contenha um comportamento de servidor Inserir registro. 


Esse erro normalmente resulta de um ou mais dos seguintes problemas com o nome de um campo, objeto ou variável no banco de dados: 


e O uso de uma palavra reservada como nome. A maioria dos bancos de dados tem um conjunto de palavras reservadas. Por exemplo, “data” 
é uma palavra reservada e não pode ser usada em nomes de coluna em um banco de dados. 


* O uso de caracteres especiais no nome. Entre os exemplos de caracteres especiais estão: 


HEHE -? 
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e O uso de um espaço no nome. 


O erro também pode ocorrer quando uma máscara de entrada é definida para um objeto no banco de dados, e os dados inseridos não 
correspondem à mascara. 


nu 


Para corrigir o problema, evite o uso de palavras reservadas como, por exemplo, “data”, “nome”, “seleção”, “onde” e “nível” ao especificar 
nomes de coluna no banco de dados. Além disso, elimine os espaços e os caracteres especiais. 


Consulte as seguintes páginas da Web para obter listas de palavras reservadas para sistemas de banco de dados comuns: 
e Microsoft Access em http://support.microsoft.com/default.aspx?scid=kb;pt-br;Q209187 
e Microsoft SQL Server em http://msdn.microsoft.com/library/default.asp?url=/library/pt br/tsglreflts ra-rz 9oj7.asp 


* MySQL em http://dev.mysql.com/doc/mysql/en/reserved-words.html 


[Reference]80040e21-—Erro de ODBC ao inserir ou atualizar 
Esse erro ocorre quando o servidor tenta processar uma página que contenha um comportamento de servidor Atualizar registro ou Inserir registro. 
O banco de dados não pode lidar com a operação de atualização ou de inserção que o comportamento de servidor está tentando realizar. 


Eis as causas possíveis e as soluções: 


* O comportamento de servidor está tentando atualizar um campo de numeração automática da tabela do banco de dados ou inserir um 
registro em um campo de numeração automática. Como os campos de numeração automática são preenchidos automaticamente pelo 
sistema de banco de dados, qualquer tentativa de preenchê-los externamente usando um valor resultará em falha. 


e Os dados que o comportamento de servidor está atualizando ou inserindo são do tipo errado para o campo de banco de dados como, por 
exemplo, inserir um campo booliano (sim/não), inserir uma sequência de caracteres em um campo numérico ou inserir uma sequência de 
caracteres formatada incorretamente no campo Data/hora. 


[Reference]800a0bcd—BOF ou EOF é verdadeiro 
Esse erro ocorre quando você tenta exibir uma página dinâmica em um navegador da Web ou na Visualização dinâmica. 


O problema ocorre quando a página tenta exibir dados de um conjunto de registros vazio. Para resolver o problema, aplique o comportamento de 
servidor Mostrar região para que o conteúdo dinâmico seja exibido na página da seguinte forma: 


1. Realce o conteúdo dinâmico na página. 


2. No painel Comportamentos de servidor, clique no botão de adição (+) e selecione Mostrar região > Mostrar região se conjunto de registros 
não estiver vazio. 


3. Selecione o conjunto de registros fornecendo o conteúdo dinâmico e clique em OK. 


4. Repita as etapas de 1 a 3 para cada elemento de conteúdo dinâmico na página. 


Solução de problemas de mensagens de erro MySQL icdidada 


Uma mensagem de erro que você recebe normalmente ao testar uma conexão de banco de dados do PHP com o MySQL 4.1 é “Client does not 
support authentication protocol requested. Consider upgrading MySQL client.” 


Você talvez tenha que reverter para uma versão anterior do MySQL ou instalar o PHP 5 e copiar algumas DLLs (bibliotecas de links dinâmicos). 
Para obter instruções detalhadas, consulte Configuração de um ambiente de desenvolvimento PHP. 


(5) ex-nc-sa ) 
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Configuração do computador para o desenvolvimento de aplicativo 


Do que você precisa para criar aplicativos da Web 
Fundamentos do servidor Web 

Escolha de um servidor Web 

Escolha do servidor de aplicativo 

Escolha de um banco de dados 

Configuração de um ambiente de desenvolvimento ColdFusion 
Configuração de um ambiente de desenvolvimento PHP 
Configuração de um ambiente de desenvolvimento ASP 
Criação de uma pasta raiz para o aplicativo 

Sobre a definição de um site do Dreamweaver 


Para o início 


Do que você precisa para criar aplicativos da Web 
Para criar aplicativos da Web no Adobeê DreamweaverQ, você precisa do seguinte software: 
* Um servidor Web 
* Um servidor de aplicativo que funcione com o servidor Web 
Nota: No contexto dos aplicativos da Web, os termos servidor Web e servidor de aplicativo se referem a software, e não a hardware. 
Caso queira usar um banco de dados com o aplicativo, você precisa do seguinte software adicional: 
* Um sistema de banco de dados 
* Um driver que dê suporte ao banco de dados 


Várias empresas de hospedagem na Web oferecem planos que permitem usar o software para testar e implantar aplicativos da Web. Em 
alguns casos, você pode instalar o software obrigatório no mesmo computador do Dreamweaver para fins de desenvolvimento. Você 
também pode instalar o software em um computador de rede (normalmente, um computador com Windows 2000 ou XP) para que outros 
desenvolvedores da equipe possam trabalhar em um projeto. 


Caso queira usar um banco de dados com o aplicativo da Web, você deve inicialmente se conectar a ele. 


: é Res 
Fundamentos do servidor Web ara o início 


Para desenvolver e testar páginas da Web dinâmicas, você precisa de um servidor Web em funcionamento. Um servidor Web é o software que 
apresenta páginas da Web em resposta a solicitações de navegadores da Web. As vezes, um servidor Web é chamado de servidor HTTP. Você 
pode instalar e usar um servidor Web no computador local. 


Caso seja um usuário do Macintosh, você pode usar o servidor Web Apache já instalado no Macintosh. 


Nota: A Adobe não dá suporte técnico a softwares de outros fabricantes como, por exemplo, o Microsoft Internet Information Server. Caso você 
precise de ajuda com um produto Microsoft, entre em contato com o suporte técnico da Microsoft. 

Caso você use o IIS (Internet Information Server) para desenvolver aplicativos da Web, o nome padrão do servidor Web é o nome do 
computador. Você pode alterar o nome do servidor alterando o nome do computador. Caso o computador não tenha nenhum nome, o servidor 
usa a palavra localhost. 


O nome do servidor corresponde à pasta raiz do servidor, que (em um computador com Windows) deve ser CiInetpublwwwroot. Você pode abrir 
qualquer página da Web armazenada na pasta raiz digitando o seguinte URL em um navegador em execução no computador: 


http://fnome do servidor/nome do arquivo 


Por exemplo, caso o nome do servidor seja mer noire e uma página da Web chamada soleil.html seja armazenada em ClInetpublwwwrool), você 
pode abrir a página digitando o seguinte URL em um navegador em execução no computador local: 


http://mer noire/soleil.html 


Nota: Não se esqueça de usar barras, e não barras invertidas, nos URLs. 
Você também pode abrir qualquer página da Web armazenada em qualquer subpasta da pasta raiz especificando a subpasta no URL. Por 
exemplo, suponhamos que o arquivo soleil.html esteja armazenado em uma subpasta chamada gamelan da seguinte forma: 


CiInetpublwwwrootigamelantsoleil.html 


Você pode abrir essa página digitando o seguinte URL em um navegador em execução no computador: 
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http://mer noire/gamelan/soleil.html 


Quando o servidor Web está em execução no computador, você pode substituir o nome do servidor por localhost. Por exemplo, os seguintes 
URLs abrem a mesma página em um navegador: 


http://mer noire/gamelan/soleil.html 
http://localhost/gamelan/soleil.html 


Nota: Outra expressão que você pode usar em lugar do nome do servidor ou de localhost é 127.0.0.1 (por exemplo, 
http://127.0.0.1/gamelan/soleil. html). 


- Para o início 
Escolha de um servidor Web 
Para desenvolver e testar aplicativos da Web, você pode escolher um dentre vários servidores Web, inclusive o Microsoft Internet Information 
Server (IIS) e o Apache HTTP Server. 


Caso não esteja usando um serviço de hospedagem na Web, escolha um servidor Web e o instale no computador local com o propósito de 
desenvolvimento. Usuários do Windows e do Macintosh que desejam desenvolver aplicativos da Web do ColdFusion podem usar o servidor Web 
incluído na edição de desenvolvedor do servidor de aplicativo ColdFusion 8, cuja instalação e uso são gratuitos. 


Outros usuários do Windows podem executar um servidor Web no computador local instalando o IIS. O servidor Web talvez já esteja instalado no 
sistema. Verifique a estrutura da pasta para ver se ela contém uma pasta Cllnetpub ou DNnetpub. O IIS cria essa pasta durante a instalação. 


Usuários do sistema operacional Mac podem usar o servidor Web Apache instalado com o sistema operacional. 


Para obter informações sobre a instalação e a configuração de outros servidores Web, consulte a documentação do fornecedor do servidor ou o 
administrador do sistema. 


E E E Para o início 
Escolha do servidor de aplicativo 
Servidor de aplicativo é um software que ajuda um servidor Web a processar páginas dinâmicas. Ao escolher um servidor de aplicativo, você 
deve considerar vários fatores, inclusive o orçamento, a tecnologia de servidor que deseja usar (ColdFusion, ASP, ou PHP), além do tipo de 
servidor Web. 


Orçamento Alguns fornecedores vendem servidores de aplicativo sofisticados cujos preços de aquisição e administração são altos. Outros 
fornecedores oferecem soluções mais simples e mais econômicas (um exemplo é o ColdFusion). Alguns servidores de aplicativo são incorporados 
a servidores Web (como o Microsoft IIS), enquanto outros podem ser baixados gratuitamente na Internet (como o PHP). 

Tecnologia de servidor Servidores de aplicativo usam tecnologias diferentes. O Dreamweaver dá suporte a três tecnologias de servidor: 
ColdFusion, ASP e PHP. A tabela a seguir mostra servidores de aplicativo comuns disponíveis para as tecnologias de servidor que recebem 
suporte do Dreamweaver: 


Tecnologia de servidor Servidor de aplicativo 
ColdFusion Adobe ColdFusion 8 
ASP Microsoft IIS 

PHP Servidor PHP 


Para obter mais informações sobre o ColdFusion, selecione Ajuda do ColdFusion no menu Ajuda. 


Para obter mais informações sobre o ASP, visite o site da Microsoft em http://msdn.microsoft.com/library/default.asp? 
url=/library/pt br/dnanchor/html/activeservpages.asp. 


Para obter mais informações sobre o PHP, visite o site do PHP em www .php.net/. 


Para o início 
Escolha de um banco de dados 
Os bancos de dados se apresentam em muitos formulários de acordo com a quantidade e a complexidade dos dados que devem armazenar. Ao 
escolher um banco de dados, você deve considerar vários fatores, incluindo o orçamento e a previsão do número de usuários que deve acessar o 
banco de dados. 


Orçamento Alguns fornecedores produzem servidores de sofisticados aplicativos de banco de dados, cujos preços de aquisição e administração 
são altos. Outros fornecedores fornecem soluções mais baratas e de custo efetivo maior, como o Microsoft Access ou o banco de dados de 
código-fonte aberto MySQL. 

Usuários Caso você preveja o acesso de uma grande comunidade de usuários ao site, selecione um banco de dados projetado para dar suporte 
à base de usuários desejada do site. Para sites que exijam maior flexibilidade na modelagem de dados, além da possibilidade de suporte a 
grandes comunidades de usuários simultâneos, deve-se considerar bancos de dados relacionais baseados em servidor (normalmente conhecidos 
como RDBMS), como o Microsoft SQL Server e o Oracle. 
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É - E E Para o início 
Configuração de um ambiente de desenvolvimento ColdFusion aii 
Para obter instruções detalhadas sobre a configuração de um ambiente de desenvolvimento do ColdFusion para Dreamweaver em computador 
com Windows ou Mac, consulte o site da Adobe em www.adobe.com/devnet/dreamweaver/articles/setup  cf.html. 


Os usuários do Windows e do Macintosh podem baixar e instalar uma edição de desenvolvedor gratuita totalmente funcional do servidor de 
aplicativo do ColdFusion no site da Adobe, em www.adobe.com/go/coldfusion br. 


Nota: A Developer Edition se destina ao uso não comercial para o desenvolvimento e o teste dos aplicativos da Web. Ela não está licenciada 
para desenvolvimento. Ela dá suporte a solicitações do host local e a dois endereços IP remotos. Você pode usá-la para desenvolver e testar os 
aplicativos da Web sempre que desejar; o software não expira. Para obter mais informações, consulte a ajuda do ColdFusion (Ajuda > Ajuda do 
ColdFusion). 

Durante a instalação, você pode configurar o ColdFusion para usar o servidor Web incorporado ao ColdFusion ou outro servidor Web instalado no 
sistema. Normalmente, é melhor que o ambiente de desenvolvimento corresponda ao ambiente de produção. Por isso, caso haja um servidor Web 
existente como, por exemplo, o Microsoft IIS no computador de desenvolvimento, você talvez queira usá-lo em lugar do servidor Web do 
ColdFusion incorporado. 


g Ei 5 Para o início 
Configuração de um ambiente de desenvolvimento PHP E 
Para obter instruções detalhadas sobre a configuração de um ambiente de desenvolvimento PHP para Dreamweaver em computador com 
Windows ou Mac, consulte o site da Adobe em www.adobe.com/devnet/dreamweaver/articles/setup php.html. 


Há edições do servidor de aplicativo para os sistemas Windows, Linux, UNIX, HP-UX, Solaris e Mac OS X. Para obter mais informações sobre o 
servidor de aplicativo, consulte a documentação do PHP, que você também pode baixar no site do PHP em wywaw.php.net/download-docs.php. 


, ai á ” Para o início 
Configuração de um ambiente de desenvolvimento ASP e 
Para obter instruções detalhadas sobre a configuração de um ambiente de desenvolvimento ASP para Dreamweaver em computador com 
Windows ou Mac, consulte o site da Adobe em www.adobe.com/devnet/dreamweaver/articles/setup asp.html. 


Para executar as páginas do ASP, você precisa de um servidor de aplicativo que dê suporte ao Microsoft Active Server Pages 2.0. como, por 
exemplo, o Microsoft IIS (Internet Information Services), que acompanha o Windows 2000 e o Windows XP Professional. Os usuários do Windows 
XP Professional podem instalar e executar o IIS no computador local. Os usuários do Macintosh podem usar um serviço de hospedagem na Web 
com um plano ASP ou instalar o IIS em um computador remoto. 


á " » e ' Para o início 
Criação de uma pasta raiz para o aplicativo 
Depois da inscrição em uma empresa de hospedagem na Web ou da configuração do software de servidor propriamente dito, crie uma pasta raiz 
para o aplicativo da Web no computador em que o servidor Web está execução. A pasta raiz pode ser local ou remota, dependendo do local em 
que o servidor Web está em execução. 


O servidor Web pode fornecer qualquer arquivo que esteja nessa pasta ou em qualquer uma de suas subpastas em resposta a uma solicitação 
HTTP de um navegador da Web. Por exemplo, em um computador com o ColdFusion 8 em execução, é possível fornecer a um navegador da 
Web qualquer arquivo na pasta YColdFusion8lwwwroot ou em uma de suas subpastas. 


Estas são as pastas raiz padrão dos servidores Web selecionados: 


Servidor Web Pasta raiz padrão 
ColdFusion 8 iColdFusion8iwwwroot 
HS Ynetpublwwwroot 
Apache (Windows) tapachelhtdocs 

Apache (Macintosh) Users:MyUserName:Sites 


Para testar o servidor Web, coloque uma página em HTML de teste na pasta raiz padrão e tente abri-la digitando o URL da página em um 
navegador. O URL é formado pelo nome de domínio e pelo nome de arquivo da página em HTML da seguinte forma: 
www.exemplo.com/página de teste.htm. 


Caso o servidor Web esteja em execução no computador local, você pode usar localhost em lugar de um nome de domínio. Digite um das 
seguintes URLs localhost de acordo com o servidor Web: 


Servidor Web URL localhost 
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ColdFusion 8 http://localhost:8500/testpage.htm 


HS http://localhost/testpage.htm 
Apache (Windows) http://localhost:80/testpage.htm 
Apache (Macintosh) http://localhost'-MyUserNamey/testpage.htm (em que 


MyUserName é o nome de usuário do Macintosh) 


Nota: Por padrão, o servidor Web ColdFusion é executado na porta 8500 e o servidor Apache para Windows, na porta 80. 
Caso a página não seja aberta como esperado, procure os seguintes erros: 


e O servidor Web não foi iniciado. Consulte a documentação do servidor Web para obter as instruções iniciais. 
e O arquivo não tem uma extensão .htm ou .html. 


e Você digitou o caminho de arquivo da página (por exemplo, cColdFusion8iwwwroottestpage.htm) e não o URL (por exemplo, 
http://localhost:8500/testpage.htm) na caixa de texto de endereço do navegador. 


* O URL digitado está incorreto. Verifique se há erros e se o nome de arquivo não é seguido por uma barra como, por exemplo, 
http://localhost:8080/testpage.htm/. 


Após a criação de uma pasta raiz para o aplicativo, defina um site do Dreamweaver para gerenciar os arquivos. 


É dis AR E P, iníci 
Sobre a definição de um site do Dreamweaver PER E 


Depois da configuração do sistema para desenvolver aplicativos da Web, defina um site do Dreamweaver para gerenciar os arquivos. 
Antes de iniciar, verifique se você atende aos seguintes requisitos: 


e Você tem acesso a um servidor Web. O servidor Web pode estar em execução no computador local, em um computador remoto como, por 
exemplo, um servidor de desenvolvimento ou um servidor mantido pela empresa de hospedagem na Web. 


* Um servidor de aplicativo está instalado e em execução no sistema em execução no servidor Web. 
e Você criou uma pasta raiz para o aplicativo da Web no sistema em que o servidor Web está em execução. 


A definição de um site do Dreamweaver para o aplicativo da Web consiste em três etapas: 


1. Definir uma pasta local 


A pasta local é a pasta que você usa para armazenar cópias funcionais dos arquivos do site no disco rígido. Você pode definir uma pasta local 
para cada novo aplicativo da Web criado. A definição de uma pasta local também dá a possibilidade de gerenciar os arquivos e de transferi-los de 
e para o servidor Web com facilidade. 


2. Definir uma pasta remota 


Defina uma pasta localizada no computador no qual o servidor Web está em execução como uma pasta remota do Dreamweaver. A pasta remota 
é a pasta que você criou para o aplicativo da Web no servidor Web. 


3. Definir uma pasta de teste 


O Dreamweaver usa a pasta para gerar e exibir o conteúdo dinâmico, além de se conectar a bancos de dados enquanto você trabalha. O servidor 
de teste pode ser o computador local, um servidor de desenvolvimento, um servidor de teste ou um servidor de produção. Desde que ele consiga 
processar esse tipo de página dinâmica que você pretende desenvolver, a opção não importa. 


Depois que o site do Dreamweaver estiver definido, você poderá começar a criar o aplicativo da Web. 


Mais tópicos da Ajuda 
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Proteção de uma pasta no aplicativo (ColdFusion) 


Proteção de uma pasta ou de um site no servidor (ColdFusion) 


Nota: O suporte para o ColdFusion foi removido no Dreamweaver CC e posterior. 


Proteção de uma pasta ou de um site no servidor (ColdFusion) ini 


Você pode usar o Dreamweaver para proteger uma pasta específica por senha no aplicativo do ColdFusion, inclusiva a pasta raiz do aplicativo. 
Quando um visitante do site solicita qualquer página na pasta especificada, o ColdFusion pede ao visitante um nome de usuário e senha. O 
ColdFusion armazena o nome de usuário e a senha em variáveis de sessão para que o visitante não precise digitá-los novamente durante a 
sessão. 


Nota: Esse recurso só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Com um documento do ColdFusion aberto no Dreamweaver, selecione Comandos > Assistente de logon do ColdFusion. 


2. Conclua o Assistente de logon do ColdFusion. 
a. Especifique o caminho completo até a pasta que você deseja proteger e clique em Avançar. 


b. Na tela seguinte, selecione um destes tipos de autenticação: 
Autenticação simples Protege o aplicativo com um nome de usuário e senha exclusivos para todos os usuários. 


Autenticação do Windows NT Protege o aplicativo usando nomes de usuário e senhas do NT. 
Autenticação LDAP Protege o aplicativo com nomes de usuário e senhas armazenados em um servidor LDAP. 


c. Especifique se você deseja que os usuários façam logon usando uma página de logon do ColdFusion ou um menu pop-up. 


d. Na próxima tela, especifique as seguintes configurações: 
e Caso você tenha selecionado a autenticação simples, especifique o nome de usuário e a senha que cada visitante deve digitar. 
e Caso você tenha selecionado a autenticação do Windows NT, especifique o domínio do NT de validação. 
e Caso você tenha selecionado a autenticação LDAP, especifique o servidor LDAP de validação. 
3. Carregue os novos arquivos no site remoto. Os arquivos estão localizados na pasta do site local. 


Mais tópicos da Ajuda 
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Remoção de scripts de conexão 


Uso do comando Remover scripts de conexão 


Eai Para o início 
Uso do comando Remover scripts de conexão is 
Você pode usar o comando Remover scripts de conexão para remover scripts que o Dreamweaver coloca em uma pasta remota para acessar 
bancos de dados. Esses scripts só são necessários na criação durante o design no Dreamweaver. 


Quando você seleciona a opção Usando driver no servidor de teste ou Usando o DSN no servidor de teste na caixa de diálogo Conexões do 
banco de dados, o Dreamweaver carrega um arquivo de script MMHTTPDB no servidor de teste. Isso permite que o Dreamweaver manipule o 
driver de banco de dados remoto com o protocolo HTTP, o que, por sua vez, permite ao Dreamweaver obter as informações de banco de dados 
de que ele precisa para ajudar a criar o site. No entanto, esse arquivo permite ver os DSNs definidos no sistema. Caso os DSNs e os bancos de 
dados não sejam protegidos por senha, o script também permite quem um invasor emita comandos SQL para o banco de dados. 


Os arquivos de script MMHTTPDB estão localizados na pasta mmsServerScripts, que está localizada na raiz do site. 


Nota: O navegador de arquivos do Dreamweaver (o painel Arquivos) oculta a pasta mmsServerScripts. Você pode ver a pasta 

— mmServerScripts caso use um cliente FTP de outro fabricante ou navegador de arquivos. 

Em algumas configurações, esses scripts não são tão necessários. Como não estão envolvidos quando você apresenta páginas da Web aos 
visitantes do site, os scripts não devem ser colocados em um servidor de produção. 


Caso tenha carregado o arquivo de scripts MMHTTPDB em um servidor de produção, você deve excluí-lo. O comando Remover scripts de 
conexão remove automaticamente os arquivos de script para você. 
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Otimização da área de trabalho para desenvolvimento visual 


Exibição de painéis de desenvolvimento de aplicativo da Web 

Exibir o banco de dados dentro do Dreamweaver 

Visualização de páginas dinâmicas em um navegador 

Restringir informações de banco de dados exibidas no Dreamweaver 

Definir o Inspetor de propriedades para procedimentos armazenados do ColdFusion e comandos do ASP 
Opções de Entrada 


Para o início 


Exibição de painéis de desenvolvimento de aplicativo da Web 


Selecione a categoria Dados no menu pop-up Categoria do painel Inserir para exibir um conjunto de botões que permitem adicionar conteúdo 
dinâmico e comportamentos de servidor à sua página. 


O número e o tipo de botões exibidos variam de acordo com o tipo de documento aberto na janela Documento. Mova o mouse sobre um ícone 
para exibir uma dica de ferramenta que descreve o que o botão faz. 


O painel Inserir inclui botões para adicionar os seguintes itens à página: 
* Conjuntos de registros 
e Texto dinâmico ou tabelas 
e Barras para navegação em registros 


Caso você alterne para a Visualização de código (Exibir > Código), painéis adicionais poderão ser exibidos na própria categoria painel 
Inserir, o que permite inserir código na página. Por exemplo, caso você veja uma página do ColdFusion na Visualização de código, um 
painel CFML é disponibilizado na categoria CFML do painel Inserir. 


Vários painéis oferecem forma de criar páginas dinâmicas: 


e Selecione o painel Ligações (Janela > Ligações) a fim de definir fontes de conteúdo dinâmico para a página e adicionar o conteúdo à 
página. 


* Selecione o painel Comportamentos de servidor (Janela > Comportamentos de servidor) para adicionar lógica do servidor a páginas 
dinâmicas. 


* Selecione o painel Bancos de dados (Janela >Bancos de dados) para explorar bancos de dados ou criar conexões de banco de dados. 


e Selecione o painel Componentes (Janela > Componentes) para inspecionar, adicionar ou modificar os códigos dos componentes do 
ColdFusion. 


Nota: O painel Componentes só é ativado quando se abre uma página do ColdFusion. 


Um comportamento de servidor é o conjunto de instruções inserido em uma página dinâmica durante o design e executado no servidor 
durante o runtime. 


Para obter um tutorial sobre a configuração da área de trabalho de desenvolvimento, consulte www.adobe.com/go/vid0144 br. 


ias ais 
Exibir o banco de dados dentro do Dreamweaver Eeunicio 


Depois de se conectar ao banco de dados, você pode exibir a estrutura e os dados dentro do Dreamweaver. 
1. Abra o painel Bancos de dados (Janela > Bancos de dados). 


O painel Bancos de dados exibe todos os bancos de dados para os quais você criou conexões. Caso você esteja desenvolvendo um site 
do ColdFusion, o painel exibe todos os bancos de dados que têm fontes de dados definidas no Administrador do ColdFusion. 


Nota: O Dreamweaver procura o site atual no servidor do ColdFusion que você definiu. 
Caso nenhum banco de dados seja exibido no painel, você deve criar uma conexão de banco de dados. 


2. Para exibir as tabelas, os procedimentos armazenados e as visualizações no banco de dados, clique no sinal de adição (+) ao lado de uma 
conexão na lista. 


3. Para exibir as colunas da tabela, clique no nome de uma tabela. 
Os ícones da coluna refletem o tipo de dados e indicam a chave primária da tabela. 


4. Para exibir os dados de uma tabela, clique com o botão direito do mouse (Windows) ou clique mantendo a tecla Control pressionada 
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(Macintosh) no nome da tabela na lista e selecione Exibir dados no menu pop-up. 


. E a ia d E a Para o início 
Visualização de páginas dinâmicas em um navegador 
Os desenvolvedores de aplicativo da Web costumam depurar as páginas clicando nelas normalmente em um navegador da Web. Você pode 
exibir rapidamente páginas dinâmicas em um navegador sem carregá-las inicialmente em um servidor (pressione F12). 


Para visualizar páginas dinâmicas, preencha a categoria Servidor de teste da caixa de diálogo Definição de sites. 


Você pode especificar que o Dreamweaver usa arquivos temporários, e não os arquivos originais. Com essa opção, o Dreamweaver executa uma 
cópia temporária da página em um servidor Web antes de exibi-la no navegador. (Em seguida, o Dreamweaver exclui o arquivo temporário do 
servidor.) Para definir essa opção, selecione Editar > Preferências > Visualizar no navegador. 


A opção Visualizar no navegador não carrega páginas relacionadas como, por exemplo, uma página de resultados ou detalhada, arquivos 
dependentes como arquivos de imagem ou inclusões do servidor. Para carregar um arquivo não encontrado, selecione Janela > Site para abrir o 
painel Site, escolha o arquivo em Pasta local e clique na seta para cima azul na barra de ferramentas a fim de copiar o arquivo para a pasta do 
servidor Web. 


A Ed =; dis P, iníci 
Restringir informações de banco de dados exibidas no Dreamweaver q PRE 


Usuários avançados de sistemas de bancos de dados grandes como o Oracle devem restringir o número de itens de banco de dados 
recuperados e exibidos pelo Dreamweaver durante o design. Um banco de dados Oracle pode conter itens que o Dreamweaver não pode 
processar durante o design. Você pode criar um esquema no Oracle e usá-lo no Dreamweaver para filtrar itens desnecessários durante o design. 


Nota: Você não pode criar um esquema ou catálogo no Microsoft Access. 
Outros usuários podem aproveitar a restrição da quantidade de informações que o Dreamweaver recupera durante o design. Alguns bancos de 


dados contêm dezenas ou mesmo centenas de tabelas, e talvez você prefira não listar todas elas enquanto trabalha. Um esquema ou catálogo 
pode restringir o número de itens de banco de dados recuperados durante o design. 


Você deve criar um esquema ou catálogo no sistema de banco de dados para poder aplicá-lo no Dreamweaver. Consulte a documentação do 
sistema de banco de dados ou o administrador do sistema. 


Nota: Você não pode aplicar um esquema ou catálogo no Dreamweaver caso esteja desenvolvendo um aplicativo do ColdFusion ou usando o 
Microsoft Access. 
1. Abra uma página dinâmica no Dreamweaver e, em seguida, abra o painel Bancos de dados (Janela > Bancos de dados). 


e Caso haja uma conexão de banco de dados, clique com o botão direito do mouse (Windows) ou clique mantendo a tecla Control 
pressionada (Macintosh) na lista e selecione Editar conexão no menu pop-up. 


e Caso a conexão não exista, clique no botão de adição (+) na parte superior do painel e a crie. 


2. Na caixa de diálogo da conexão, clique em Avançado. 
3. Especifique o esquema ou o catálogo e clique em OK. 


a a - E E P. iníci 
Definir o Inspetor de propriedades para procedimentos armazenados do ColdFusion e didi 


comandos do ASP 
Modifique o procedimento armazenado selecionado. As opções disponíveis variam de acordo com a tecnologia do servidor. 


“ Edite todas as opções. Quando você seleciona uma nova opção no inspetor, o Dreamweaver atualiza a página. 


Para o início 


Opções de Entrada 


O Inspetor de propriedades é exibido quando o Dreamweaver encontra um tipo de entrada não reconhecido. Esse erro normalmente ocorre por 
conta de uma digitação ou de outro erro na entrada dos dados. 


Caso você altere o tipo de campo no Inspetor de propriedades para um valor que o Dreamweaver reconhece — por exemplo, caso você corrija o 
erro ortográfico —, o Inspetor de propriedades é atualizado para mostrar as propriedades do tipo reconhecido. Defina qualquer uma das seguintes 
opções no Inspetor de propriedades: 


Entrada Atribui um nome ao campo. Essa caixa é obrigatória, e o nome deve ser exclusivo. 

Tipo Define o tipo de entrada do campo. O conteúdo da caixa reflete o valor do tipo de entrada exibido atualmente no código-fonte HTML. 
Valor Define o valor do campo. 

Parâmetros Abre a caixa de diálogo Parâmetros para que você possa exibir os atributos atuais do campo, bem como adicionar ou remover 
atributos. 

Mais tópicos da Ajuda 

Tutorial da área de trabalho de desenvolvimento 


Configurar um servidor de teste 
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Visão geral das fontes de conteúdo dinâmico 


Sobre as fontes de conteúdo dinâmico 

Sobre conjuntos de registros 

Sobre os parâmetros de URL e de formulário 
Sobre as variáveis de sessão 

Variáveis de aplicativo do ASP e do ColdFusion 
Variáveis de servidor do ASP 

Variáveis de servidor do ColdFusion 


Z md Para o início 
Sobre as fontes de conteúdo dinâmico 
Uma fonte de conteúdo dinâmico é um armazenamento das informações das quais você pode recuperar e exibir conteúdo dinâmico a ser usado 
em uma página da Web. Entre as fontes de conteúdo dinâmico estão não apenas as informações armazenadas em um banco de dados, mas os 
valores enviados por formulários em HTML, valores contidos em objetos de servidor e outras fontes de conteúdo. 


O Dreamweaver permite que você se conecte a um banco de dados e crie um conjunto de registros do qual extrair conteúdo dinâmico. Um 
conjunto de registros é o resultado de uma consulta de banco de dados. Ele extrai as informações específicas que você solicita e permite exibir 
essas informações dentro de uma página especificada. Você define o conjunto de registros com base nas informações contidas no banco de 
dados e no conteúdo que deseja exibir. 


Fornecedores de tecnologia diferentes podem usar terminologias distintas quanto a um conjunto de registros. No ASP e no ColdFusion, um 
conjunto de registros é definido como uma consulta. Caso você esteja usando outras fontes de dados como, por exemplo, entrada do usuário ou 
variáveis de servidor, o nome da fonte de dados definido no Dreamweaver é o mesmo nome da fonte de dados. 


Os sites dinâmicos exigem uma fonte de dados da qual possam recuperar e exibir conteúdo dinâmico. O Dreamweaver permite que você use 
bancos de dados, variáveis de solicitação, variáveis de URL, variáveis de servidor, variáveis de formulário, procedimentos armazenados e outras 
fontes de conteúdo dinâmico. Dependendo da fonte de dados, você pode recuperar o novo conteúdo para atender a uma solicitação ou modificar 
a página para atender às necessidades dos usuários. 


Qualquer fonte de conteúdo que você define no Dreamweaver é adicionada à lista das fontes de conteúdo do painel Ligações. Em seguida, você 
pode inserir a fonte de conteúdo na página selecionada atualmente. 


E E Para o início 
Sobre conjuntos de registros 
As páginas da Web não podem acessar diretamente os dados armazenados em um banco de dados. Na verdade, elas interagem com um 
conjunto de registros. Um conjunto de registros é um subconjunto das informações (registros), extraídas do banco de dados usando uma consulta 
do banco de dados. Uma consulta é uma instrução de pesquisa projetada para localizar e extrair informações específicas em um banco de 
dados. 


Ao usar um banco de dados como uma fonte de conteúdo para uma página da Web dinâmica, você deve criar inicialmente um conjunto de 
registros no qual armazena os dados recuperados. Os conjuntos de registros funcionam como um intermediário entre o banco de dados que 
armazena o conteúdo e o servidor de aplicativo que gera a página. Conjuntos de registros são armazenados temporariamente na memória do 
servidor do aplicativo para recuperação de dados mais rápida. O servidor descarta o conjunto de registros quando não for mais necessário. 


Uma consulta pode produzir um conjunto de registros que inclui apenas determinadas colunas, certos registros ou combinações de ambos. Um 
conjunto de registros também pode incluir todos os registros e colunas de uma tabela de banco de dados. No entanto, como os aplicativos 
raramente precisam usar todos os dados de um banco de dados, você deve procurar criar conjuntos de registros com o menor tamanho possível. 
Como o servidor Web mantém temporariamente o conjunto de registros na memória, o uso de um conjunto de registros menor requer menos 
memória e pode melhorar o desempenho do servidor. 


As consultas de banco de dados são escritas em SQL (linguagem de consulta estruturada), uma linguagem simples que permite recuperar, 
adicionar e excluir dados em um banco de dados. O construtor SQL incluído no Dreamweaver permite criar consultas simples sem que você 
precise compreender SQL. Entretanto, se você quiser criar consultas complexas em SQL, um conhecimento básico dessa linguagem permite criar 
consultas mais avançadas, além de proporcionar mais flexibilidade na criação de páginas dinâmicas. 


Antes de definir um conjunto de registros com o Dreamweaver, você deve criar uma conexão com um banco de dados e — caso não haja nenhum 
dado — inserir dados no banco de dados. Caso você ainda não tenha definido uma conexão de banco de dados para o site, consulte o capítulo 
sobre a conexão de banco de dados referente à tecnologia de servidor para a qual está desenvolvendo e siga as instruções sobre a criação de 
uma conexão de banco de dados. 


A A P iníci 
Sobre os parâmetros de URL e de formulário hifas 
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Os parâmetros de URL armazenam informações recuperadas de entradas dos usuários. Para definir um parâmetro de URL você cria um 
formulário ou link de hipertexto que usa o método OBTER para enviar dados. As informações são acrescentadas ao URL da página solicitada e 
comunicadas ao servidor. Durante o uso de variáveis de URL, a sequência de caracteres de consulta contém um ou mais pares nome/valor 
associados aos campos de formulário. Esses pares nome/valor são acrescentados ao URL. 


Os parâmetros de formulário armazenam informações recuperadas incluídas na solicitação HTTP de uma página da Web. Caso você crie um 
formulário que usa o método POSTAR, os dados enviados pelo formulário são passados para o servidor. Antes de começar, verifique se você 
passou um parâmetro de formulário ao servidor. 


ade = Para o início 
Sobre as variáveis de sessão 
As variáveis de sessão permitem armazenar e exibir informações mantidas durante a visita de um usuário (ou sessão). O servidor cria um objeto 
de sessão diferente para cada usuário e o mantém durante um período estabelecido ou até que o objeto seja encerrado explicitamente. 


Como as variáveis de sessão duram em toda a sessão do usuário e se mantêm quando o usuário deixa uma página para outra dentro do site, 
elas são ideais para o armazenamento de referências do usuário. As variáveis de sessão também podem ser usadas na inserção de um valor no 
código HTML da página, na atribuição de um valor a uma variável local ou no fornecimento de um valor para avaliar uma expressão condicional. 


Antes de definir variáveis de sessão para uma página, você deve criá-las no código-fonte. Depois de criar uma variável de sessão no código- 
fonte do aplicativo da Web, você pode usar o Dreamweaver para recuperar seu valor e usá-lo em uma página da Web. 


Como funcionam as variáveis de sessão 


As variáveis de sessão armazenam informações (normalmente parâmetros de formulário ou de URL enviados por usuários) e as disponibilizam a 
todas as páginas de um aplicativo da Web durante a visita do usuário. Por exemplo, quando os usuários fazem logon em um portal da Web que 
fornece acesso a emails, cotações, previsões do tempo e notícias diárias, o aplicativo da Web armazena as informações de logon em uma 
variável de sessão que identifica o usuário em todas as páginas do site. Isso permite que o usuário veja apenas os tipos de conteúdo que 
selecionou enquanto navega no site. As variáveis de sessão também podem fornecer um mecanismo de segurança ao encerrar a sessão do 
usuário caso a conta permaneça inativa durante um determinado período. Isso também libera memória do servidor e recursos de processamento 
caso o usuário se esqueça de fazer logoff em um site. 


As variáveis de sessão armazenam informações durante a vida da sessão de uso. A sessão começa quando o usuário abre uma página dentro 
do aplicativo e encerra quando ele não abre outra página do aplicativo durante um determinado período ou quando encerra explicitamente a 
sessão (normalmente clicando em um link “fazer logoff”). Enquanto existir, a sessão será específica de um usuário individual, e todos os usuários 
têm uma sessão separada. 


Use variáveis de sessão para armazenar informações que qualquer página de um aplicativo da Web possa acessar. As informações podem ser 
tão diversificadas quanto o nome de usuário, o tamanho da fonte preferencial ou o sinalizador que indica se o usuário fez o logon com êxito. 
Outro uso comum das variáveis de sessão é manter um valor em execução como, por exemplo, o número de perguntas respondidas 
corretamente até então em um quiz on-line ou os produtos que o usuário selecionou de um catálogo on-line. 


As variáveis de sessão só podem funcionar caso o navegador do usuário esteja configurado para aceitar cookies. O servidor cria um número de 
ID da sessão que identifica com exclusividade o usuário quando a sessão é iniciada pela primeira vez e, em seguida, envia um cookie que 
contém o número de ID para o navegador do usuário. Quando o usuário solicita outra página do servidor, este lê o cookie no navegador para 
identificar o usuário e recuperar as variáveis de sessão do usuário armazenadas na memória do servidor. 


Coleta, armazenamento e recuperação de informações em variáveis de sessão 

Antes de criar uma variável de sessão, você deve inicialmente obter as informações que deseja armazenar e, em seguida, enviá-las ao servidor 
para armazenamento. Você pode coletar e enviar informações para o servidor usando formulários em HTML ou links de hipertexto que 
contenham parâmetros de URL. Você também pode obter informações de cookies armazenados no computador do usuário, dos cabeçalhos HTTP 
enviados pelo navegador do usuário com uma solicitação de página ou de um banco de dados. 


Um exemplo típico de armazenamento de parâmetros de URL em variáveis de sessão é um catálogo de produtos que usa parâmetros de URL 
codificados criados com o uso de um link para enviar informações de produto novamente para o servidor a serem armazenadas em uma variável 
de sessão. Quando um usuário clica no link “Adicionar ao carro de compras”, a ID do produto é armazenada em uma variável de sessão 
enquanto o usuário continua comprando. Quando o usuário prossegue na direção da página de retirada, a ID do produto armazenada na variável 
de sessão é recuperada. 


Uma pesquisa baseada em formulário é um exemplo típico de uma página que armazena parâmetros de formulário em variáveis de sessão. O 
formulário envia as informações selecionadas novamente para o servidor, onde uma página de aplicativo computa a pesquisa e armazena a 
resposta em uma variável de sessão a ser passada para um aplicativo que pode agrupar as respostas coletadas da população pesquisada. Ou as 
informações podem ser armazenadas em um banco de dados para serem usadas mais tarde. 


Depois que as informações são enviadas para o servidor, você armazena as informações em variáveis de sessão adicionando o código 
apropriado do modelo de servidor à página especificada pelo parâmetro de URL ou de formulário. Conhecida como página de destino, ela é 
especificada no atributo action do formulário em HTML ou no atributo href do link de hipertexto na página inicial. 


Depois de armazenar um valor em uma variável de sessão, você pode usar o Dreamweaver para recuperar o valor das variáveis de sessão e 
usá-lo em um aplicativo da Web. Depois de definir a variável de sessão no Dreamweaver, você pode inserir o valor em uma página. 


A sintaxe do HTML de cada uma é exibida da seguinte forma: 
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<form action="destination.html" method="get" name="myform"> </form> 
<param name="href"value="destination.html"> 


Tanto a tecnologia de servidor usada quanto o método que você usa para obter as informações determinam o código usado para armazenar as 
informações em uma variável de sessão. A sintaxe básica de cada tecnologia de servidor é a seguinte: 


ColdFusion 


<CFSET session.variable name = value> 


ASP 


<% Session("variable name") = value %> 


A expressão value costuma ser uma expressão de servidor como, por exemplo, Request.Form("lastname"). Por exemplo, caso você use um 
parâmetro de URL chamado product (ou um formulário em HTML com o método OBTER e um campo de texto chamado product) para coletar 
informações, as seguintes instruções armazenam as informações em uma variável de sessão chamada prodiD: 


ColdFusion 


<CFSET session.prodID = url.product> 


ASP 


<% Session("prodID") = Request.QueryString("product") %> 


Caso você use um formulário em HTML com o método postar e um campo de texto chamado txtProduct para coletar as informações, as 
seguintes instruções armazenam as informações na variável de sessão: 


ColdFusion 


<CFSET session.prodID = form.txtProduct> 


ASP 


<% Session("prodID") = Request.Form("txtProduct") %> 


Exemplo de informações armazenadas em variáveis de sessão 

Você está trabalhando em um site com um grande público de cidadãos mais velhos. No Dreamweaver, adicione dois links à página Bem-vindo 
que permitem aos usuários personalizar o tamanho do texto do site. Para um texto maior, fácil de ler, o usuário clica em um link e, para um texto 
de tamanho regular, o usuário clica em outro link. 


à Text size preferences - Microsoft Internet Explorer 


Arquivo Editar Exibir Favoritos Ferramentas Ajuda 


oo nao P%ola-s 


Endereço 8 http:/Hocalhost/TestASP/TMP3q0u7tkZko, asp 


Select your preferred text-size: 


Larger text 


Normal text 


Todos os links têm um parâmetro de URL chamado fontsize que envia a preferência de texto do usuário para o servidor, como mostra o seguinte 
exemplo do Adobe ColdFusionO: 


<a href="resort.cfm?fontsize=large">Larger Text</a><br> 
<a href="resort.cfm?fontsize=small">Normal Text</a> 


Armazene a preferência de texto do usuário em uma variável de sessão e use-a para definir o tamanho da fonte em todas as páginas que o 
usuário solicita. 


Próxima à parte superior da página de destino, digite o seguinte código para criar uma sessão chamada font pref que armazena a preferência de 
tamanho da fonte do usuário. 
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ColdFusion 


<CFSET session.font pref = url.fontsize> 


ASP 


<% Session("font pref") = Request.QueryString("fontsize") %> 


Quando o usuário clica no link de hipertexto, a página envia a preferência de texto do usuário em um parâmetro de URL para a página de 
destino. O código na página de destino armazena o parâmetro de URL na variável de sessão font pref. Durante a sessão do usuário, todas as 
páginas do aplicativo recuperam esse valor e exibem o tamanho de fonte selecionado. 


Variáveis de aplicativo do ASP e do ColdFusion RETA 


No ASP e no ColdFusion, você pode usar variáveis de aplicativo para armazenar e exibir informações mantidas durante a vida útil do aplicativo e 
que se mantêm de usuário para usuário. A vida útil do aplicativo se estende do tempo em que o usuário inicialmente solicita uma página no 
aplicativo até o momento em que o servidor Web é parado. (Um aplicativo é definido como se todos os arquivos estivessem em um diretório 
virtual e em seus subdiretórios.) 


Como as variáveis de aplicativo se estendem pela vida útil do aplicativo e permanecem de usuário para usuário, elas são ideais para o 
armazenamento das informações que devem existir para todos os usuários como, por exemplo, a hora e a data atuais. O valor da variável de 
aplicativo é definido no código do aplicativo. 


Ea . RR 
Variáveis de servidor do ASP APNR TENRE 


Você pode definir as seguintes variáveis de servidor do ASP como fontes de conteúdo dinâmico: Request.Cookie, Request.QueryString, 
Request.Form, Request.ServerVariables e Request.ClientCertificates. 


Ee a E E Para o início 
Variáveis de servidor do ColdFusion gi 


Você pode definir as seguintes variáveis de servidor do ColdFusion: 


Variáveis de cliente Associe dados a um cliente específico. As variáveis de cliente mantêm o estado do aplicativo enquanto o usuário se move 
uma página para outra no aplicativo, bem como de uma sessão para outra. A “manutenção de estado” significa preservar as informações de uma 
página (ou sessão) para a próxima de forma que o aplicativo se lembre do usuário, além das opções e das preferências anteriores do usuário. 
Variáveis de cookie Acesse cookies passados para o servidor pelo navegador. 

Variáveis CGI Forneça informações sobre o servidor com o ColdFusion em execução, o navegador que solicita uma página e demais 
informações sobre o ambiente de processamento. 

Variáveis de servidor Elas podem ser acessadas por todos os clientes e aplicativos do servidor. Elas persistem até a parada do servidor. 
Variáveis locais Elas são criadas com a tag CFSET ou a tag CFPARAM dentro de uma página do ColdFusion. 

Mais tópicos da Ajuda 


(9) ex-nc-sa ] 
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Painéis de conteúdo dinâmico 


Painel Ligações 

Painel Comportamentos de servidor 
Painel Bancos de dados 

Painel Componentes 


. E = ” a 
Painel Ligações ara o início 


Use o painel Ligações para definir e editar fontes de conteúdo dinâmico, adicionar conteúdo dinâmico a uma página e aplicar formatos de dados 
a texto dinâmico. 


Você pode realizar as seguintes tarefas com esse painel: 
e Definição de origens de conteúdo dinâmico 
e Adição de conteúdo dinâmico a páginas 
e Alterar ou excluir fontes de conteúdo 
e Usar formatos de dados predefinidos 
e Anexar fontes de dados XML 
e Exibir dados XML em páginas XSLT 
e Parâmetros de URL 
e Definir variáveis de sessão 
e Definir variáveis de aplicativo para o ASP e o ColdFusion 
e Definir variáveis de servidor 
e Colocar em cache fontes de conteúdo 
e Copiar um conjunto de registros de uma página para outra 


e Tornar os atributos de HTML dinâmicos 


» é Para o início 
Painel Comportamentos de servidor 


Use o painel Comportamentos de servidor para adicionar os comportamentos de servidor do Dreamweaver a uma página, editar outros e criá-los. 
Você pode realizar as seguintes tarefas com esse painel: 

e Exibição de registros de banco de dados 

e Definição de origens de conteúdo dinâmico 

e Criar páginas mestre e detalhadas em uma operação 

e Criação de páginas de pesquisa e de resultados 

e Criação de páginas para inserção de registro (CS6) 

e Criação de uma página de registro de atualização (CS6) 

e Criação de uma página de registro de exclusão 

e Criação de uma página que apenas usuários autorizados podem acessar 

e Criação de uma página de registro 

e Criação de uma página de logon 

e Criação de uma página que apenas usuários autorizados podem acessar 

e Adicionar um procedimento armazenado (ColdFusion) (CS6) 

e Excluir conteúdo dinâmico 


e Adição de comportamentos de servidor personalizados 
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: E Em 
Painel Bancos de dados ara o início 


Use o painel Bancos de dados para criar conexões de banco de dados, inspecionar bancos de dados e inserir código relacionado a banco de 
dados nas páginas. 


Você pode exibir e se conectar ao banco de dados com esse painel: 
e Exibir o banco de dados dentro do Dreamweaver 
e Conexões de banco de dados para desenvolvedores do ColdFusion (CS6) 
* Conexões de banco de dados para desenvolvedores do ASP (CS6) 


* Conexões de banco de dados para desenvolvedores do PHP 


E E = 
Painel Componentes ara o início 


Use o painel Componentes para criar e inspecionar componentes, além de inserir código de componente nas páginas. 


Nota: O painel não funciona na Visualização de design. 
Você pode realizar as seguintes tarefas com esse painel: 


*& Uso de componentes do ColdFusion 


(63) e-nc-sa ) 
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Exibição de registros de banco de dados 


Sobre os registros do banco de dados 

Comportamentos de servidor e elementos de formatação 

Aplicação de elementos tipográficos e de layout de página a dados dinâmicos 
Navegação em resultados do conjunto de recursos do banco de dados 
Criar uma barra de navegação do conjunto de registros 

Barras de navegação do conjunto de registros personalizadas 

Tarefas de design da barra de navegação 

Exibir e ocultar regiões com base nos resultados do conjunto de registros 
Exibir vários resultados do conjunto de registros 

Criar uma tabela dinâmica 

Criar contadores de registros 

Usar formatos de dados predefinidos 


E Para o início 
Sobre os registros do banco de dados 
A exibição de registros do banco de dados envolve a recuperação de informações armazenadas em um banco de dados ou em outra fonte de 
conteúdo, além do processamento dessas informações em uma página da Web. O Dreamweaver fornece vários métodos de exibição de 
conteúdo dinâmico, além de muitos comportamentos de servidor incorporados que permitem aprimorar a apresentação de conteúdo dinâmico e 
possibilitam aos usuários percorrer e navegar nas informações retornadas de um banco de dados com mais facilidade. 


Os bancos de dados e as demais fontes de conteúdo dinâmico oferecem mais eficiência e flexibilidade na pesquisa, na classificação e na 
visualização de grandes armazenamentos de informações. O uso de um banco de dados para armazenar conteúdo de sites se justifica quando 
você precisa armazenar grandes quantidades de informações e, em seguida, recuperar e exibir essas informações de maneira significativa. O 
Dreamweaver oferece várias ferramentas e comportamentos predefinidos para ajudá-lo a recuperar e a exibir as informações armazenadas em 
um banco de dados de maneira eficiente. 


E Es P, iníci 
Comportamentos de servidor e elementos de formatação REA 


O Dreamweaver fornece os seguintes comportamentos de servidor e elementos de formatação para permitir a exibição de dados dinâmicos: 


Formatos Permitem que você aplique tipos diferentes de valores numéricos, monetários, de data/hora e porcentagem a textos dinâmicos. 

Por exemplo, caso o preço de um item em um conjunto de registros seja 10.989, você pode exibir o preço na página como US$ 10.99 
selecionando o formato “Moeda - 2 casas decimais” do Dreamweaver. Esse formato exibe um número usando duas casas decimais. Caso o 
número tenha mais de duas casas decimais, o formato de dados arredonda o número para o decimal mais próximo. Caso o número não tenha 
casas decimais, o formato de dados adiciona uma casa decimal e dois zeros. 


Região repetitiva Comportamentos de servidor permitem exibir vários itens retornados de uma consulta de banco de dados e especificar o 
número de registros a ser exibido por página. 

Navegação do conjunto de registros Comportamentos de servidor permitem inserir elementos de navegação que permitem aos usuários passar 
ao grupo de conjuntos de registros anteriores ou posteriores retornados pelo conjunto de registros. Por exemplo, caso opte por exibir 10 registros 
por página usando o objeto de servidor Região repetitiva e o conjunto retorne 40 registros, você pode navegar em 10 registros por vez. 

Barra de status Conjunto de registros Comportamentos de servidor permitem incluir um contador que mostra aos usuários onde eles estão 
dentro de um conjunto de registros em relação ao número total de registros retornados. 

Mostrar região Comportamentos de servidor permitem optar por mostrar ou ocultar itens na página com base na relevância dos registros 
exibidos no momento. Por exemplo, caso um usuário tenha navegado até o último registro de um conjunto, você pode ocultar o link Próximo e 
exibir apenas o link Anterior. 


: Ba , E vs Ea 2 ALAS Para o início 
Aplicação de elementos tipográficos e de layout de página a dados dinâmicos 
Um recurso eficiente do Dreamweaver é a possibilidade de apresentar dados dinâmicos dentro de uma página estruturada e de aplicar 
formatação tipográfica usando HTML e CSS. Para aplicar formatos a dados dinâmicos no Dreamweaver, formate as tabelas e os alocadores de 
espaço para os dados dinâmicos usando as ferramentas de formatação do Dreamweaver. Quando são inseridos usando a fonte de dados, os 
dados adotam automaticamente a formatação da fonte, do parágrafo e da tabela especificada por você. 


as . P, iníci 
Navegação em resultados do conjunto de recursos do banco de dados di 
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Os links para navegação no conjunto de registros permitem aos usuários mover de um registro para o próximo ou de um conjunto de registros 
para o próximo. Por exemplo, depois de criar uma página para exibir cinco registros por vez, você talvez queira adicionar links como, por 
exemplo, Próximo ou Anterior que permitem aos usuários exibir os cinco registros próximos ou anteriores. 


Você pode criar quatro tipos de links de navegação para percorrer um conjunto de registros: Primeiro, Anterior, Próximo e Último. Uma única 
página pode conter qualquer número desses links, desde que todos funcionem em um único conjunto de registros. Você não pode adicionar links 
para percorrer um segundo conjunto de registros na mesma página. 


Os links para navegação no conjunto de registros exigem os seguintes elementos dinâmicos: 
* Um conjunto de registros para navegação 
e Conteúdo dinâmico na página para exibir o(s) registro(s) 
e Texto ou imagens na página para funcionar como uma barra de navegação clicável 
* Um conjunto Mover para registro dos comportamentos de servidor para navegar no conjunto de registros 


Você pode adicionar os dois últimos elementos usando o objeto de servidor Barras para navegação em registros ou adicioná-los 
separadamente usando as ferramentas de design e o painel Comportamentos de servidor. 


: a . ] PRERERA 
Criar uma barra de navegação do conjunto de registros E 


Você pode criar uma barra de navegação do conjunto de registros em uma única operação usando o comportamento de servidor Barra de 
navegação do conjunto de registros. O objeto de servidor adiciona os seguintes blocos de criação à página: 


e Uma tabela em HTML com links de texto ou imagem 
* Um conjunto de comportamentos de servidor Mover para 


* Um conjunto de comportamentos de servidor Mostrar região 


A versão em texto de Barra de navegação do conjunto de registros é semelhante a: 


Antes de colocar a barra de navegação na página, verifique se a página contém um conjunto de registros para navegação e um layout de 
página no qual exibir os registros. 


Depois de colocar a barra de navegação na página, você pode usar as ferramentas de design para personalizar a barra. Você também pode 
editar os comportamentos de servidor Mover para e Mostrar região clicando duas vezes neles no painel Comportamentos de servidor. 


O Dreamweaver cria uma tabela que contém links de texto ou de imagem que permitem ao usuário navegar no conjunto de registros 
selecionado quando clicado. Quando o primeiro registro do conjunto é exibido, os links Primeiro e Anterior ou as imagens permanecem 
ocultos. Quando o último registro do conjunto é exibido, os links Próximo e Último ou as imagens permanecem ocultos. 


Você pode personalizar o layout da barra de navegação usando as ferramentas de design e o painel Comportamentos de servidor. 


1. Na Visualização de design, coloque o ponto de inserção no local da página onde você deseja que a barra de navegação seja exibida. 


2. Exiba a caixa de diálogo Barra de navegação do conjunto de registros (Inserir > Objetos de dados > Paginação do conjunto de registros > 
Barra de navegação do conjunto de registros). 


3. Selecione o conjunto de registros em que você deseja navegar no menu pop-up Conjunto de registros. 


4. Na seção Exibir usando, selecione o formato para exibir os links de navegação na página e clique em OK. 
Texto Coloca links de texto na página. 


Imagens Inclui imagens gráficas como links. O Dreamweaver usa arquivos de imagem próprios. Você pode substituir essas imagens por 
arquivos de imagem próprios depois de colocar a barra na página. 


ra a É ã P iníci 
Barras de navegação do conjunto de registros personalizadas RR 


Você pode criar sua própria barra de navegação do conjunto de registros que usa layout e estilos de formatação mais complexos do que os da 
tabela simples criada pelo objeto de servidor Barra de navegação do conjunto de registros. 


Para criar sua própria barra de navegação do conjunto de registros, você deve: 
e Criar links de navegação em texto ou imagens 


e Colocar os links na página usando a Visualização de design 
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e Atribuir comportamentos de servidor individuais a cada link de navegação 


Esta seção descreve como atribuir comportamentos de servidor individuais aos links de navegação. 


Criar e atribuir comportamentos de servidor a um link de navegação 
1. Na Visualização de design, selecione a sequência de caracteres de texto ou a imagem que você deseja usar como link para navegação em 
registros. 
2. Abra o painel Comportamentos do servidor (Janela > Comportamentos do servidor) e clique no botão de adição (+). 
3. Selecione Paginação do conjunto de registros no menu pop-up e, depois, selecione um comportamento de servidor apropriado no link dos 
comportamentos de servidor listados. 


Caso o conjunto contenha vários registros, o comportamento de servidor Mover para último registro pode demorar muito para ser executado 
quando o usuário clica no link. 


4. No menu pop-up Conjunto de registros, selecione o conjunto que contém os registros e clique em OK. 


O comportamento de servidor é atribuído ao link de navegação. 


Definir as opções da caixa de diálogo Mover para (comportamento de servidor) 
Adicione links que permitam ao usuário navegar nos registros de um conjunto. 


1. Caso você não tenha selecionado nada na página, selecione um link no menu pop-up. 


2. Selecione o conjunto que contém os registros a serem percorridos e clique em OK. 
Nota: Caso o conjunto contenha vários registros, o comportamento de servidor Mover para último registro pode demorar muito para ser 
executado quando o usuário clica no link. 


, as Para o início 
Tarefas de design da barra de navegação 
Ao criar uma barra de navegação personalizada, comece criando sua representação visual usando as ferramentas de design de página do 
Dreamweaver. Você não precisa criar um link para a sequência de caracteres de texto ou a imagem; o Dreamweaver cria um para você. 


A página para a qual a barra de navegação foi criada deve conter um conjunto de registros para navegar. Uma barra de navegação do conjunto 
de registros simples pode ser semelhante a esta com botões de link criados fora das imagens ou outros elementos de conteúdo: 


Depois de adicionar um conjunto de registros a uma página e criar uma barra de navegação, você deve aplicar comportamentos de servidor a 
cada elemento de navegação. Por exemplo, uma barra de navegação do conjunto de registros típica contém representações dos seguintes links 
correspondentes ao comportamento apropriado: 


Link de navegação Comportamento de servidor 
Ir para primeira página Mover para primeira página 

Ir para página anterior Mover para página anterior 

Ir para próxima página Mover para próxima página 

Ir para última página Mover para última página 


a2cê a q a P. iníci 
Exibir e ocultar regiões com base nos resultados do conjunto de registros int 


Você também pode especificar que uma região seja exibida ou ocultada com base no preenchimento do conjunto de registros. Caso um conjunto 
de registros esteja vazio (por exemplo, nenhum registro foi encontrado correspondente à consulta), você pode exibir uma mensagem informando 
o usuário de que nenhum registro retornou. Isso é especialmente útil quando se criam páginas de pesquisa que dependam dos termos de 
pesquisa de entrada para executar consultas. Da mesma forma, você pode exibir uma mensagem de erro caso haja um problema na conexão 
com um banco de dados ou caso o nome de usuário e a senha de um usuário não correspondam aos reconhecidos pelo servidor. 


Os comportamentos de servidor Mostrar região são: 
e Mostrar se conjunto de registros estiver vazio 
e Mostrar se conjunto de registros não estiver vazio 
e Mostrar se for primeira página 
e Mostrar se não for primeira página 


e Mostrar se for última página 
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e Mostrar se não for última página 


1. Na Visualização de design, selecione a região na página a ser mostrada ou ocultada. 
2. No painel Comportamentos do servidor (Janela > Comportamentos do servidor), clique no botão de adição (+). 


3. Selecione Mostrar região no menu pop-up, selecione um dos comportamentos de servidor listados e clique em OK. 


ab E E E Para o início 
Exibir vários resultados do conjunto de registros 


O comportamento de servidor Região repetitiva permite exibir vários registros de um conjunto dentro de uma página. Qualquer seleção de dados 
dinâmicos pode ser transformada em uma região repetitiva. No entanto, as regiões mais comuns são tabelas, linhas de tabelas ou uma série de 
linhas de tabelas. 


1. Na Visualização de design, selecione uma região que apresente conteúdo dinâmico. 
A seleção pode ser qualquer item, incluindo uma tabela, uma linha de tabela ou mesmo um parágrafo do texto. 


Para selecionar uma região na página com precisão, você pode usar o seletor de tags no canto esquerdo da janela do documento. Por 
exemplo, caso a região seja uma linha de tabela, clique dentro da linha na página e, depois, clique na tag <tr> à direita no seletor para 
selecionar a linha da tabela. 

Selecione Janela > Comportamentos de servidor para exibir o painel Comportamentos de servidor. 

Clique no botão de adição (+) e selecione Região repetitiva. 


Selecione o nome do conjunto de registros a ser usado no menu pop-up. 


rw 


Selecione o número de registros a serem exibidos por página e clique em OK. 


Na janela Documento, um fino contorno cinza com abas é exibido em torno da região repetitiva. 


Modificar regiões repetitivas no Inspetor de propriedades 
*& Modifique a região repetitiva selecionada alterando qualquer uma das seguintes opções: 


e O nome da região repetitiva. 
e O conjunto que fornece os registros à região repetitiva. 
* O número de registros exibidos 


Quando você seleciona uma nova opção, o Dreamweaver atualiza a página. 


Reutilizar conjuntos de registros PHP 
Para obter um tutorial sobre como reutilizar os conjuntos de registros PHP, consulte o tutorial de David Powers, Como reutilizar um Conjunto de 
dados PHP em mais de uma região de repetição? 


a EA E P iníci 
Criar uma tabela dinâmica a fdicês 


O seguinte exemplo ilustra como o comportamento Região repetitiva é aplicado à linha de uma tabela e especifica que são exibidos nove 
registros por página. A própria linha exibe quatro registros diferentes: cidade, estado, endereço e CEP. 
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Para criar uma tabela como, por exemplo, a do exemplo anterior, você deve criar uma tabela que tenha conteúdo dinâmico e aplicar o 
comportamento de servidor Região repetitiva à linha da tabela com o conteúdo dinâmico. Quando a página é processada pelo servidor de 
aplicativo, a linha é repetida o número de vezes especificado no objeto de servidor Região repetitiva com um registro diferente inserido em cada 
linha nova. 


1. Escolha uma destas opções para inserir uma tabela dinâmica: 
* Selecione Inserir > Objetos de dados > Dados dinâmicos > Tabela dinâmica para exibir a caixa de diálogo Tabela dinâmica. 
e Na categoria Dados do painel Inserir, clique no botão Dados dinâmicos e selecione o ícone Tabela dinâmica no menu pop-up. 


2. Selecione o conjunto de registros no menu pop-up Conjunto de registros. 
3. Selecione o número de registros a serem exibidos por página. 
4. (Opcional) Insira os valores da borda da tabela, do preenchimento da célula e do espaçamento da célula. 


A caixa de diálogo Tabela dinâmica mantém os valores que você insere para bordas da tabela, preenchimento da célula e espaçamento da 
célula. 


Nota: Caso você esteja trabalhando em um projeto que exija várias tabelas dinâmicas com a mesma aparência, insira os valores de layout 
da tabela, o que simplifica ainda mais o desenvolvimento da página. Você pode ajustar esses valores depois de inserir a tabela usando o 
Inspetor de propriedades da tabela. 


5. Clique em OK. 


Uma tabela e os alocadores de espaço do conteúdo dinâmico definido no conjunto de registros associado são inseridos na página. 


q ==) Dividir LE Design | || Visualização dinâmica |. Titulo; Documento sem titulo Mu 
ES UERR ERP ERRAR ES PRN Ci RARA 5: PRA ERRA ERRAR 6 PRA 6 PRA CPR Cie PRRRA E PRA si À 


T 
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Nesse exemplo, o conjunto de registros contém quatro colunas: AUTHORID, FIRSTNAME, LASTNAME e BIO. A linha de cabeçalho da 
tabela é preenchida com os nomes de cada coluna. Você pode editar os cabeçalhos usando qualquer texto descritivo ou substituí-los por 
imagens representativas. 


RID (Nome [Sobrenome BIO 
(rsBooks. AUTHORID) [(1sBooks Nome) ((rsBooks. Sobrenome) (rsBooks BIO) 


Para o início 


Criar contadores de registros 


Os contadores de registros dão aos usuários um ponto de referência ao navegarem em um conjunto de registros. Normalmente, eles exibem o 
número total de registros retornados e os registros visualizados no momento. Por exemplo, se um conjunto retornasse 40 registros individuais e 8 
fossem exibidos por página, o contador de registros na primeira página indicaria “Exibindo registros 1-8 de 40”. 


Para criar um contador de registros em uma página, você deve criar um conjunto de registros para a página, um layout de página apropriado ao 
conteúdo dinâmico e, em seguida, uma barra de navegação do conjunto de registros. 


Criar contadores de registros simples 
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Os contadores de registros permitem aos usuários saber onde estão em um determinado conjunto de registros em relação ao número total de 
registros retornados. Por essa razão, os contadores de registros são um comportamento útil capaz de agregar à usabilidade de uma página da 
Web de maneira significativa. 


Crie um contador de registros simples usando o objeto de servidor Status de navegação do conjunto de registros. Esse objeto de servidor cria 
uma entrada de texto na página para exibir o status de registro atual. Você pode personalizar o contador de registros usando as ferramentas de 
design de página do Dreamweaver. 


1. Coloque o ponto de inserção onde você deseja inserir um contador de registros. 


2. Selecione Inserir > Objetos de dados > Exibir contagem de registros > Status de navegação do conjunto de registros e, depois, selecione o 
conjunto de registros no menu pop-up Conjunto de registros e, em seguida, clique em OK. 


O objeto de servidor Status de navegação do conjunto de registros insere um contador de registros de texto semelhante ao seguinte 
exemplo: 


Records (Employees first) a (Employees last) de (Employees total) 


Quando exibido na Visualização dinâmica, o contador exibido é semelhante ao seguinte exemplo: 
Records 1 a 1de22 


Criar e adicionar o contador de registros na página 
“& Na caixa de diálogo Status de navegação do conjunto de registros, selecione o conjunto de registros a ser controlado e clique em OK. 


Criar contadores de registros personalizados 

Você usa comportamentos de contagem de registros para criar contadores de registros personalizados. A criação de um contador de registros 
personalizado permite criar um contador de registros que vai além da tabela simples, de linha única, inserida pelo objeto de servidor Status de 
navegação do conjunto de registros. Você pode organizar elementos de design de várias formas criativas e aplicar um comportamento de servidor 
apropriado a cada elemento. 


Os comportamentos de servidor Contagem de registros são: 
e Exibir número de registro inicial 
e Exibir número de registro final 
e Exibir total de registros 


Para criar um contador de registros personalizado em uma página, você deve criar inicialmente um conjunto de registros para a página, um layout 
de página apropriado ao conteúdo dinâmico e, em seguida, uma barra de navegação do conjunto de registros. 


Este exemplo cria um contador de registros semelhante ao do exemplo em “Contadores de registros simples”. Nesse exemplo, o texto na fonte 
sans-serif representa os alocadores de espaço da contagem de registros que serão inseridos na página. O contador de registros do exemplo é 
exibido da seguinte forma: 


Exibindo registros de StartRow a EndRow de RecordSet.RecordCount. 


1. Na Visualização de design, digite o texto do contador na página. O texto pode ser o que você quiser, por exemplo: 
Displaying records thru of 
2. Coloque o ponto de inserção ao final da sequência de caracteres de texto. 


3. Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor). 


4. Clique no botão de adição (+) no canto superior esquerdo e, depois, clique em Exibir contagem de registros. Nesse submenu, selecione 
Exibir total de registros. O comportamento Exibir total de registros é inserido na página, e um alocador de espaço é inserido onde estava o 
ponto de inserção. A sequência de caracteres de texto é exibida da seguinte forma: 


Displaying records thru of (Recordset1.RecordCount+. 


5. Coloque o ponto de inserção depois da palavra records e selecione Exibir número de registro inicial no painel Comportamentos de 
servidor > botão de adição (+) > Contagem de registros. A sequência de caracteres de texto é exibida da seguinte forma: 


Displaying records fStartRow Recordset1) thru of (Recordset1.RecordCount+. 


6. Agora coloque o ponto de inserção entre as palavras thru e of e selecione Exibir número de registro inicial no painel Comportamentos de 
servidor > botão de adição (+) > Contagem de registros. A sequência de caracteres de texto é exibida da seguinte forma: 


Displaying records (StartRow Recordset1) thru (EndRow Recordset1) of(Recordset1.RecordCount+. 


7. Confirme se o contador está funcionando corretamente exibindo a página na Visualização dinâmica; o contador é semelhante ao do 
seguinte exemplo: 


Displaying records 1 thru 8 of 40. 
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Caso a página de resultados tenha um link de navegação para se mover para o próximo conjunto de registros, o clique no link atualiza o 
contador de registros para que ele exiba o seguinte: 


Showing records 9 thru 16 of 40. 


Para o início 


Usar formatos de dados predefinidos 


O Dreamweaver inclui vários formatos de dados predefinidos que você pode aplicar a elementos de dados dinâmicos. Entre os estilos de formato 
de dados estão data e hora, moeda e formatos numérico e percentuais. 


Aplicar formatos de dados a conteúdo dinâmico 


1. 
2: 
3. 


Na janela Documento, selecione o alocador de espaço do conteúdo dinâmico. 
Selecione Janela > Ligações para exibir o painel Ligações. 
Clique no botão de seta para baixo na coluna Formato. 


Caso a seta para baixo não esteja visível, expanda o painel. 


. No menu pop-up Formato, selecione a categoria do formato de dados que você deseja. 


Verifique se o formato de dados é apropriado ao tipo de dado que você está formatando. Por exemplo, os formatos Moeda só funcionam 
caso os dados dinâmicos consistam em dados numéricos. Observe que você não pode aplicar mais de um formato aos mesmos dados. 


. Verifique se o formato foi aplicado corretamente ao visualizar a página na Visualização dinâmica. 


Personalizar um formato de dados 


d: 
2: 


Abra uma página que contenha dados dinâmicos na Visualização de design. 
Selecione os dados dinâmicos cujo formato você deseja personalizar. 


O item de dados ligado cujo texto dinâmico você selecionou é realçado no painel Ligações (Janela > Ligações). O painel exibe duas 
colunas para o item selecionado — Ligação e Formato. Caso a coluna Formato não esteja visível, alargue o painel Ligações para mostrá-la. 


. No painel Ligações, clique na seta para baixo na coluna Formato para expandir o menu pop-up dos formatos de dados disponíveis. 


Caso a seta para baixo não esteja visível, alargue ainda mais o painel Ligações. 


4. Selecione Editar lista de formatos no menu pop-up. 


. Complete a caixa de diálogo e clique em OK. 


a. Selecione o formato na lista e clique em Editar. 
b. Altere qualquer um dos seguintes parâmetros nas caixas Moeda, Número ou Porcentagem e clique em OK. 


e O número de dígitos a serem exibidos após a casa decimal 

e Se um zero deve ser colocado antes das frações 

e Se os parênteses ou um sinal de subtração devem ser usados em valores negativos 
* Se os dígitos devem ser agrupados 


c. Para excluir um formato de dados, clique no formato na lista e clique no botão de subtração (-). 


Criar um formato de dados (apenas ASP) 


1. 


No an 


Abra uma página que contenha dados dinâmicos na Visualização de design. 

Selecione os dados dinâmicos para os quais você deseja criar um formato personalizado. 

Selecione Janela > Ligações para exibir o painel Ligações e clique na seta para baixo na coluna Formato. Caso a seta para baixo não 
esteja visível, expanda o painel. 

Selecione Editar lista de formatos no menu pop-up. 

Clique no botão de adição (+) e selecione um tipo de formato. 

Defina o formato e clique em OK. 

Digite um nome para o novo formato na coluna Nome e clique em OK. 

Nota: Embora o Dreamweaver suporte somente a criação de formatos de dados para páginas em ASP, os usuários do ColdFusion e do 
PHO podem baixar formatos que outros desenvolvedores criaram ou criar formatos de servidor e postá-los no Dreamweaver Exchange. 
Para obter mais informações sobre a API Formato de servidor, consulte Extensão do Dreamweaver(Ajuda > Extensão do Dreamweaver > 
Formatos de servidor). 


Mais tópicos da Ajuda 
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Criação de páginas dinâmicas 
Dreamweaver e design de página dinâmica 


- Dea EO Para o início 
Dreamweaver e design de página dinâmica 


Siga estas etapas gerais para projetar e criar com êxito um site dinâmico. 
1. Criar a página. 


Uma das etapas principais da criação de qualquer site — seja estático ou dinâmico — é o design visual da página. Durante a adição de 
elementos dinâmicos a uma página da Web, o design da página se torna essencial à usabilidade. Você deve pensar bem em como os 
usuários irão interagir com as páginas individuais e os sites como um todo. 


Um método comum de incorporação de conteúdo dinâmico a uma página da Web é criar uma tabela para apresentar conteúdo e importar 
conteúdo dinâmico para uma ou mais células da tabela. Usando esse método, você pode apresentar informações de vários tipos em um 
formato estruturado. 


2. Crie uma fonte de conteúdo dinâmico. 


Os sites dinâmicos precisam de uma fonte de conteúdo da qual extraem dados para que possam exibi-los em uma página da Web. Para 
poder usar fontes de conteúdo em uma página da Web, você deve fazer o seguinte: 


e Crie uma conexão com a fonte de conteúdo dinâmico (como, por exemplo, um banco de dados) e o servidor de aplicativo que processa 
a página. Crie a fonte de dados usando o painel Ligações; em seguida, você pode selecionar e inserir a fonte de dados na página. 


e Especifique quais informações no banco de dados você deseja exibir ou quais variáveis deve incluir na página criando um conjunto de 
registros. Você também pode testar a consulta na caixa de diálogo Conjunto de registros e fazer todos os ajustes necessários antes de 
adicioná-los ao painel Ligações. 


* Selecione e insira elementos de conteúdo dinâmico na página selecionada. 
3. Adicione conteúdo dinâmico à página da Web. 


Depois de definir um conjunto de registros ou outra fonte de dados e adicioná-lo ao painel Ligações, você pode inserir o conteúdo dinâmico 
que o conjunto de registros representa na página. A interface controlada por menu do Dreamweaver simplifica a adição de elementos de 
conteúdo dinâmico tanto quanto a seleção de uma fonte de conteúdo dinâmico no painel Ligações, além de sua inserção em texto, imagem 
ou objeto de formulário dentro da página atual. 


Quando você insere um elemento de conteúdo dinâmico ou outro comportamento em uma página, o Dreamweaver insere um script do 
servidor no código-fonte da página. Esse script instrui o servidor a recuperar dados da fonte definida e processá-los dentro da página da 
Web. Para colocar conteúdo dinâmico em uma página da Web, você pode seguir um dos seguintes procedimentos: 


e Coloque-o no ponto de inserção na Visualização de código ou de design. 
e Substitua uma sequência de caracteres de texto ou outro alocador de espaço. 


Insira-o em um atributo HTML. Por exemplo, o conteúdo dinâmico pode definir o atributo src de uma imagem ou o atributo value de um 
campo de formulário. 


4. Adicione comportamentos de servidor a uma página. 


Além de adicionar conteúdo dinâmico, você pode incorporar uma lógica de aplicativo complexa a páginas da Web usando comportamentos 
de servidor. Comportamentos de servidor são partes predefinidas de código do servidor que adicionam lógica de aplicativo a páginas da 
Web, proporcionando maior interação e funcionalidade. 


Os comportamentos de servidor do Dreamweaver permitem adicionar lógica de aplicativo a um site sem a necessidade de que você 
escreva o código. Os comportamentos de servidor fornecidos com o Dreamweaver dão suporte a tipos de documento do ColdFusion, ASP, 
e PHP. Os comportamentos de servidor são escritos e testados para que sejam rápidos, seguros e eficientes. Os comportamentos de 
servidor incorporados dão suporte a páginas da Web em várias plataformas para todos os navegadores. 


O Dreamweaver fornece uma interface apontar e clicar que torna a aplicação de conteúdo dinâmico e de comportamentos complexos a uma 
página tão fácil quanto a inserção de elementos de texto e design. Os seguintes comportamentos de servidor estão disponíveis: 


e Defina um conjunto de registros de um banco de dados existente. Em seguida, o conjunto de registros que você define é armazenado 
no painel Ligações. 


e Exiba vários registros em uma única página. Você seleciona uma tabela inteira ou células individuais ou linhas com conteúdo dinâmico 
e especifica o número de registros a serem exibidos em cada visualização de página. 
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e Crie e insira uma tabela dinâmica em uma página e associe a tabela a um conjunto de registros. Você pode modificar posteriormente a 
aparência da tabela e a região repetitiva usando o Inspetor de propriedades e o comportamento de servidor Região repetitiva, 
respectivamente. 


e Insira um objeto de texto dinâmico em uma página. O objeto de texto que você insere é um item de um conjunto de registros 
predefinido ao qual é possível aplicar qualquer um dos formatos de dados. 


* Crie controles de navegação em registros e de status, páginas mestre/detalhadas e formulários para a atualização das informações em 
um banco de dados. 


e Exiba mais de um registro de um banco de dados. 


e Crie links para navegação no conjunto de registros que permitam aos usuários exibir os registros anterior ou seguinte de um banco de 
dados. 


* Adicione um contador de registros para ajudar os usuários a controlar quantos registros retornaram e onde eles se encontram no 
resultado retornado. 


Você também pode estender os comportamentos de servidor do Dreamweaver escrevendo comportamentos de servidor próprios ou 
instalando de outros fabricantes. 


5. Teste e depure a página. 


Antes de criar uma página dinâmica — ou um site inteiro — disponível na Web, você deve testar sua funcionalidade. Você também deve 
considerar como a funcionalidade do aplicativo pode afetar pessoas com deficiências. 


Mais tópicos da Ajuda 
Adição e modificação de imagens 
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Definição de origens de conteúdo dinâmico 


Definir um conjunto de registros sem escrever em SQL 

Definir um conjunto de registros avançado escrevendo em SQL 
Criar consultas SQL usando a árvore Itens do banco de dados 
Definir parâmetros de URL 

Definir parâmetros de formulário 

Definir variáveis de sessão 

Definir variáveis de aplicativo para o ASP e o ColdFusion 

Usar uma variável como fonte de dados para um conjunto de registros do ColdFusion 
Definir variáveis de servidor 

Colocar em cache fontes de conteúdo 

Alterar ou excluir fontes de conteúdo 

Copiar um conjunto de registros de uma página para outra 


nd E « P. iníci 
Definir um conjunto de registros sem escrever em SQL PRE RRAS 


Você pode criar um conjunto de registros sem inserir manualmente instruções SQL. 


1. Najanela Documento, abra a página que usará o conjunto de registros. 
2. Selecione Janelas > Ligações para exibir o painel Ligações. 
3. No painel Ligações, clique no botão de adição (+) e selecione Conjunto de registros (consulta) no menu pop-up. 


A caixa de diálogo simples Conjunto de registros é exibida. Caso você esteja desenvolvendo um site em ColdFusion, a caixa de diálogo 
Conjunto de registros muda um pouco. (Caso a caixa de diálogo avançada Conjunto de registros seja exibida em seu lugar, clique no botão 
Simples a fim de alternar para a caixa de diálogo Conjunto de registros simples.) 


4. Complete a caixa de diálogo Conjunto de registros referente ao tipo de documento. 
Para obter instruções, consulte os tópicos abaixo. 
5. Clique no botão Testar para executar a consulta e verificar se ela recupera as informações que você deseja. 


Caso você tenha definido um filtro que usa parâmetros inseridos por usuários, insira um valor na caixa Valor de teste e clique em OK. Caso 
uma ocorrência do conjunto de registros seja criada com êxito, uma tabela é exibida com os dados extraídos do conjunto. 


6. Clique em OK para adicionar o conjunto de registros à lista de fontes de conteúdo disponíveis no painel Ligações. 


Opções da caixa de diálogo simples Conjunto de registros (PHP, ASP) 
1. Na caixa Nome, digite um nome para o conjunto de registros. 


Uma prática comum é adicionar o prefixo rs a nomes do conjunto de registros para diferenciá-los dos demais nomes de objeto no código, 
por exemplo: rsPressReleases. 


Os nomes do conjunto de registros só podem conter letras, números e o caractere de sublinhado ( ). Você não pode usar caracteres 
especiais ou espaços. 


2. Selecione uma conexão no menu pop-up Conexão. 
Caso nenhuma conexão seja exibida na lista, clique em Definir para criar uma. 

3. No menu pop-up Tabela, selecione a tabela do banco de dados que fornecerá dados ao conjunto de registros. 
O menu pop-up exibe todas as tabelas no banco de dados específico. 


4. Para incluir um subconjunto das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as colunas desejadas 
clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista. 


5. Para limitar ainda mais os registros que a tabela retorna, complete a seção Filtro: 


* No primeiro menu pop-up, selecione uma coluna da tabela do banco de dados a ser comparada com um valor de teste que você 
define. 


e No segundo menu pop-up, selecione uma expressão condicional para comparar o valor selecionado em cada registro com o valor de 
teste. 


* No terceiro menu pop-up, selecione Valor digitado. 
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6. 


Fe 


8. 


e Na caixa, digite o valor de teste. 
Caso o valor especificado em um registro atenda à condição de filtragem, o registro é incluído no conjunto de registros. 


(Opcional) Para classificar os registros, selecione uma coluna para classificar e, em seguida, especifique se os registros devem ser 
classificados em ordem crescente (1, 2,3... ou A, B, C...) ou em ordem decrescente. 


Clique em Testar para se conectar ao banco de dados e criar uma ocorrência da fonte de dados, e clique em OK para fechar a fonte de 
dados. 


Uma tabela é exibida com os dados retornados. Cada linha contém um registro e cada coluna representa um campo nesse registro. 


Clique em OK. O conjunto de registros recém-definido é exibido no painel Ligações. 


Opções da caixa de diálogo simples Conjunto de registros (ColdFusion) 
Defina um conjunto de registros para tipos de documento do ColdFusion como fonte de conteúdo dinâmico sem precisar codificar manualmente 
instruções SQL. 


1. 


10. 


Definir um conjunto de registros avançado escrevendo em SQL 


Na caixa Nome, digite um nome para o conjunto de registros. 


Uma prática comum é adicionar o prefixo rs a nomes do conjunto de registros para diferenciá-los dos demais nomes de objeto no código. 
Por exemplo: rsPressReleases 


Os nomes do conjunto de registros só podem conter letras, números e o caractere de sublinhado ( ). Você não pode usar caracteres 
especiais ou espaços. 


. Caso você esteja definindo um conjunto de registros para um componente do ColdFusion (ou seja, caso um arquivo CFC esteja aberto no 


momento Dreamweaver), selecione uma função CFC existente no menu pop-up Função ou clique no botão Nova função para criar uma 
nova função. 


Nota: O menu pop-up Função só está disponível caso um arquivo CFC seja o documento atual e você tenha acesso a um computador 
com o ColdFusion MX 7 ou melhor em execução. 


O conjunto de registros é definido na função. 


. Selecione uma fonte de dados no menu pop-up Fonte de dados. 


Caso não haja nenhuma fonte de dados no menu pop-up, você cria uma fonte de dados do ColdFusion. 


. Nas caixas Nome de usuário e Senha, digite o nome de usuário e a senha do servidor de aplicativo do ColdFusion, caso necessário. 


As fontes de dados do ColdFusion podem exigir um nome de usuário e senha no acesso. Caso você não tenha o nome de usuário e a 
senha para acessar uma fonte de dados no ColdFusion, entre em contato com o administrador do ColdFusion na organização. 


. No menu pop-up Tabela, selecione a tabela do banco de dados que fornecerá dados ao conjunto de registros. 


O menu pop-up Tabela exibe todas as tabelas no banco de dados específico. 


. Para incluir um subconjunto das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as colunas desejadas 


clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista. 


. Para limitar ainda mais os registros que a tabela retorna, complete a seção Filtro: 


* No primeiro menu pop-up, selecione uma coluna da tabela do banco de dados a ser comparada com um valor de teste que você 
define. 


e No segundo menu pop-up, selecione uma expressão condicional para comparar o valor selecionado em cada registro com o valor de 
teste. 


e No terceiro menu pop-up, selecione Valor digitado. 
e Na caixa, digite o valor de teste. 


Caso o valor especificado em um registro atenda à condição de filtragem, o registro é incluído no conjunto de registros. 


. (Opcional) Para classificar os registros, selecione uma coluna para classificar e, em seguida, especifique se os registros devem ser 


classificados em ordem crescente (1, 2,3... ou A, B, C...) ou decrescente. 


. Clique em Testar para se conectar ao banco de dados e criar uma ocorrência da fonte de dados. 


Uma tabela é exibida com os dados retornados. Cada linha contém um registro e cada coluna representa um campo nesse registro. Clique 
em OK para fechar o conjunto de registros de teste. 


Clique em OK. O conjunto de registros do ColdFusion recém-definido é exibido no painel Ligações. 


Para o início 


Escreva instruções SQL próprias usando a caixa de diálogo avançada Conjunto de registros ou crie uma instrução SQL usando a árvore gráfica 
Itens do banco de dados. 
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1. Najanela Documento, abra a página que usará o conjunto de registros. 
2. Selecione Janelas > Ligações para exibir o painel Ligações. 
3. No painel Ligações, clique no botão de adição (+) e selecione Conjunto de registros (consulta) no menu pop-up. 


A caixa de diálogo avançada Conjunto de registros é exibida. Caso você esteja desenvolvendo um site em ColdFusion, a caixa de diálogo 
Conjunto de registros muda um pouco. (Mas caso seja exibida a caixa de diálogo simples Conjunto de registros, alterne para a caixa de 
diálogo avançada Conjunto de registros clicando no botão Avançado.) 


4. Complete a caixa de diálogo avançada Conjunto de registros. 
Para obter instruções, consulte os tópicos abaixo. 
5. Clique no botão Testar para executar a consulta e verificar se ela recupera as informações que você deseja. 


Caso você tenha definido um filtro que use parâmetros inseridos pelos usuários, o botão Testar exibe a caixa de diálogo Valor de teste. 
Insira um valor na caixa Valor de teste e clique em OK. Caso uma ocorrência do conjunto de registros seja criada com êxito, uma tabela é 
exibida com os dados do conjunto. 


6. Clique em OK para adicionar o conjunto de registros à lista de fontes de conteúdo disponíveis no painel Ligações. 


Opções da caixa de diálogo avançada Conjunto de registros (PHP, ASP) 
Defina um conjunto de registros como fonte de conteúdo dinâmico escrevendo uma instrução SQL personalizada ou criando uma instrução SQL 
usando a árvore gráfica Itens do banco de dados. 


1. Na caixa Nome, digite um nome para o conjunto de registros. 


Uma prática comum é adicionar o prefixo rs a nomes do conjunto de registros para diferenciá-los dos demais nomes de objeto no código. 
Por exemplo: rsPressRelease 


Os nomes do conjunto de registros só podem conter letras, números e o caractere de sublinhado ( ). Você não pode usar caracteres 
especiais ou espaços. 


2. Selecione uma conexão no menu pop-up Conexão. 


3. Insira uma instrução SQL na área de texto SQL ou use a árvore gráfica Itens do banco de dados na parte inferior da caixa de diálogo para 
criar uma instrução SQL usando o conjunto de registros escolhido. 


Faça o seguinte para usar a árvore Itens do banco de dados e criar a instrução SQL: 
* Verifique se a área de texto SQL está em branco. 


e Expanda as ramificações da árvore até localizar o objeto de banco de dados de que você precisa — uma coluna em uma tabela, por 
exemplo, ou um procedimento armazenado no banco de dados. 


e Selecione o objeto de banco de dados e clique em um dos botões no lado direito da árvore. 


Por exemplo, caso você selecione uma coluna da tabela, os botões disponíveis são SELECT, WHERE e ORDER ByY. Clique em um 
dos botões para adicionar a cláusula associada à instrução SQL. 


Você também pode usar uma instrução SQL predefinida em um procedimento armazenado selecionando o procedimento armazenado 
na árvore Itens do banco de dados e clicando no botão Procedimento. O Dreamweaver preenche automaticamente as áreas SQL e 
Variável. 


4. Caso a instrução SQL contenha variáveis, defina os valores na área Variáveis clicando no botão de adição (+) e digitando o nome da 
variável, o tipo (inteira, texto, data ou número de ponto flutuante) o nome padrão (o valor que a variável deve usar caso nenhum valor de 
runtime retorne) e o valor de runtime. 

Nota: Quando usar variáveis em uma instrução SQL em PHP, o Dreamweaver adicionará automaticamente um símbolo de dólar ao nome 
da variável, portanto você deve omitir o sinal de dólar (por exemplo, colname, em vez de $colname). 


Caso a instrução SQL contenha variáveis, verifique se a coluna Valor padrão da caixa Variáveis contém valores de teste válidos. 
O valor de runtime costuma ser um parâmetro de URL ou de formulário inserido por um usuário em um campo de formulário em HTML. 


Parâmetros de URL na coluna Valor de runtime: 


Modelo do servidor Expressão do valor de runtime para o parâmetro de URL 
ASP Request.QueryString(“formFieldName”) 
PHP & GET[formFieldName” 


Parâmetros de formulário na coluna Valor de runtime: 
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Modelo do servidor Expressão do valor de runtime para o parâmetro de 


formulário 
ASP Request.Form(“formFieldName”) 
PHP $ POST[formFieldNameY 


5. Clique em Testar para se conectar ao banco de dados e criar uma ocorrência do conjunto de registros. 


Caso a instrução SQL contenha variáveis, verifique se a coluna Valor padrão da caixa Variáveis contém valores de teste válidos antes de 
clicar em Testar. 


Caso haja êxito, uma tabela é exibida com os dados do conjunto de registros. Cada linha contém um registro e cada coluna representa um 
campo nesse registro. Clique em OK para limpar o conjunto de registros. 


6. Caso esteja satisfeito com o trabalho, clique em OK. 


Opções da caixa de diálogo avançada Conjunto de registros (ColdFusion) 


Use a caixa de diálogo avançada Conjunto de registros para escrever consultas SQL personalizadas ou use a árvore Itens do banco de dados 
para criar consultas SQL usando uma interface apontar e clicar. 


1. Na caixa Nome, digite um nome para o conjunto de registros. 


Uma prática comum é adicionar o prefixo rs a nomes do conjunto de registros para diferenciá-los dos demais nomes de objeto no código. 
Por exemplo: rsPressReleases 


Os nomes do conjunto de registros só podem conter letras, números e o caractere de sublinhado ( ). Você não pode usar caracteres 
especiais ou espaços. 


Caso você esteja definindo um conjunto de registros para um componente do ColdFusion (ou seja, caso um arquivo CFC esteja aberto no 
momento Dreamweaver), selecione uma função CFC existente no menu pop-up Função ou clique no botão Nova função para criar uma 
nova função. 


Nota: O menu pop-up Função só está disponível caso um arquivo CFC seja o documento atual e você tenha acesso a um computador 
com o ColdFusion MX 7 ou melhor em execução. 


O conjunto de registros é definido na função. 
2. Selecione uma fonte de dados no menu pop-up Fonte de dados. 

Se não houver nenhuma fonte de dados na lista do menu pop-up, você primeiramente precisará criar uma fonte de dados do ColdFusion. 
3. Nas caixas Nome de usuário e Senha, digite o nome de usuário e a senha do servidor de aplicativo do ColdFusion, caso necessário. 


As fontes de dados do ColdFusion podem exigir um nome de usuário e senha no acesso. Caso você não tenha o nome de usuário e a 
senha para acessar uma fonte de dados no ColdFusion, entre em contato com o administrador do ColdFusion na organização. 


4. Insira uma instrução SQL na área de texto SQL ou use a árvore gráfica Itens do banco de dados na parte inferior da caixa de diálogo para 
criar uma instrução SQL usando o conjunto de registros escolhido. 


5. (Opcional) Faça o seguinte para usar a árvore Itens do banco de dados e criar a instrução SQL: 
e Verifique se a área de texto SQL está em branco. 


e Expanda as ramificações da árvore até localizar o objeto de banco de dados de que você precisa — por exemplo, uma coluna de uma 
tabela. 


e Selecione o objeto de banco de dados e clique em um dos botões no lado direito da árvore. 


Por exemplo, caso você selecione uma coluna da tabela, os botões disponíveis são SELECT, WHERE e ORDER BY. Clique em um dos 
botões para adicionar a cláusula associada à instrução SQL. 


Caso a instrução SQL contenha parâmetros, defina os valores na área Parâmetros clicando no botão de adição (+) e digitando o nome do 
parâmetro e o nome padrão (o valor que o parâmetro deve usar caso nenhum valor de runtime retorne). 


Caso a instrução SQL contenha parâmetros, verifique se a coluna Valor padrão da caixa Parâmetros contém valores de teste válidos. 


Parâmetros de página permitem fornecer valores padrão para referências de valor de runtime no SQL que você escreve. Por exemplo, a 
seguinte instrução SQL seleciona um registro de funcionário com base no valor da ID do funcionário. Você pode atribuir um valor padrão ao 
parâmetro, verificando se um valor de runtime sempre retorna. Nesse exemplo, FormFieldName se refere a um campo de formulário em 
que o usuário insere a ID de um funcionário: 


SELECT * FROM Employees WHERE EmpID = + (Request.Form(&4FormFieldName&) ) 


A caixa de diálogo Adicionar parâmetros de página teria um par nome/valor semelhante a: 
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Nome Valores padrão 


FormFieldName 0001 


O valor de runtime costuma ser um parâmetro de URL ou de formulário inserido por um usuário em um campo de formulário em HTML. 
6. Clique em Testar para se conectar ao banco de dados e criar uma ocorrência do conjunto de registros. 


Caso a instrução SQL contenha referências de runtime, verifique se a coluna Valor padrão do campo Parâmetros de página contém valores 
de teste válidos antes de clicar em Testar. 


Caso haja êxito, uma tabela é exibida com os dados do conjunto de registros. Cada linha contém um registro e cada coluna representa um 
campo nesse registro. Clique em OK para limpar o conjunto de registros. 


7. Caso esteja satisfeito com o trabalho, clique em OK. 


Definir parâmetros em uma instrução SQL (ColdFusion) 

Defina parâmetros em uma instrução SQL; o valor padrão é o valor que o parâmetro deve usar caso não retorne nenhum valor de runtime. 
1. Selecione um nome de parâmetro no menu pop-up Nome. 
2. Insira um valor padrão para o parâmetro na caixa Parâmetro padrão e clique em OK. 


Definir parâmetros em uma instrução SQL (PHP) 

Defina parâmetros em uma instrução SQL; o valor padrão é o valor que o parâmetro deve usar caso não retorne nenhum valor de runtime. 
1. Digite o nome de um parâmetro na caixa Nome. 
2. Insira um valor padrão para o parâmetro na caixa Parâmetro padrão. 
3. Insira um valor de runtime para um parâmetro na caixa Valor de runtime e clique em OK. 


: ER 
Criar consultas SQL usando a árvore Itens do banco de dados ii nina 


Em vez de digitar manualmente as instruções SQL na caixa SQL, você pode usar a interface apontar e clicar de Itens do banco de dados para 
criar consultas SQL complexas. A árvore Itens do banco de dados permite selecionar objetos de banco de dados e vinculá-los usando cláusulas 
SQL SELECT, WHERE e ORDER BY. Depois de criar uma consulta SQL, você pode definir qualquer variável usando a área Variáveis da caixa 
de diálogo. 


Os próximos dois exemplos descrevem duas instruções SQL e as etapas para criá-las usando a árvore Itens do banco de dados da caixa de 
diálogo avançada Conjunto de registros. 


Exemplo: seleção de uma tabela 
Este exemplo seleciona todo o conteúdo da tabela Funcionários. A instrução SQL que define a consulta é exibida da seguinte forma: 


SELECT * FROM Employees 


Para criar essa consulta, siga estas etapas. 


1. Expanda a ramificação Tabelas para exibir todas as tabelas no banco de dados selecionado. 
2. Selecione a tabela Funcionários. 

3. Clique no botão Selecionar. 

4. Clique em OK para adicionar o conjunto de registros ao painel Ligações. 


Exemplo: seleção de linhas específicas de uma tabela e ordenação dos resultados 
O seguinte exemplo seleciona duas linhas da tabela Funcionários e, depois, seleciona o tipo de trabalho usando uma variável que você deve 
definir. Em seguida, os resultados são ordenados pelo nome de funcionário. 


SELECT emplNo, emplName 
FROM Employees 

WHERE emplJob = 'varJob' 
ORDER BY emplName 


1. Expanda a ramificação Tabelas para exibir todas as tabelas no banco de dados selecionado e, depois, expanda a tabela Funcionários para 
exibir as linhas da tabela individual. 


2. Crie a instrução SQL da seguinte forma: 


568 


Selecione emplNo e clique no botão Selecionar. 
* Selecione emplName e clique no botão Selecionar. 
e Selecione emplJob e clique no botão Onde. 
e Selecione emplName e clique no botão Ordenar por. 


3. Coloque o ponto de inserção depois de WHERE emplJob na área de texto SQL e digite ='varJob' (inclua o sinal de igual). 


4. Defina a variável 'varJob' clicando no botão de adição (+) da área Variáveis e inserindo os valores nas colunas Nome, Valor padrão e Valor 
de runtime: varJob, CLERK, Request("job”). 


5. Clique em OK para adicionar o conjunto de registros ao painel Ligações. 


Definir parâmetros de URL Para o início 


Os parâmetros de URL armazenam informações recuperadas de entradas dos usuários. Antes de começar, verifique se você passou um 
parâmetro de formulário ou de URL ao servidor. Depois de definir a variável de URL, você pode usar seu valor na página selecionada no 
momento. 

1. Najanela Documento, abra a página que usará a variável. 

2. Selecione Janelas > Ligações para exibir o painel Ligações. 

3. No painel Ligações, clique no botão de adição (+) e selecione uma das seguintes opções no menu pop-up: 


Tipos de documento Item de menu no painel Ligações da variável de URL 
ASP Variável de solicitação > Request.QueryString 
ColdFusion Variável de URL 

PHP Variável de URL 


4. Na caixa de diálogo Variável de URL, digite o nome da variável de URL na caixa e clique em OK. 
O nome da variável de URL costuma ser o nome do campo de formulário em HTML ou do objeto usado para obter o valor. 


5. A variável de URL é exibida no painel Ligações. 


or A Doi P iníci 
Definir parâmetros de formulário UR 


Os parâmetros de formulário armazenam informações recuperadas incluídas na solicitação HTTP de uma página da Web. Caso você crie um 
formulário que usa o método POSTAR, os dados enviados pelo formulário são passados para o servidor. Antes de começar, verifique se você 
passou um parâmetro de formulário ao servidor. Depois de definir o parâmetro de formulário como fonte de conteúdo, você pode usar o valor na 
página. 

1. Najanela Documento, abra a página que usará a variável. 

2. Selecione Janelas > Ligações para exibir o painel Ligações. 

3. No painel Ligações, clique no botão de adição (+) e selecione uma das seguintes opções no menu pop-up: 


Tipos de documento Item de menu no painel Ligações da variável de 
formulário 

ASP Variável de solicitação > Request.Form 

ColdFusion Variável de formulário 

PHP Variável de formulário 


4. Na caixa de diálogo Variável de formulário, digite o nome da variável de formulário e clique em OK. O nome do parâmetro de formulário 
costuma ser o nome do campo de formulário em HTML ou do objeto usado para obter o valor. 


O parâmetro de formulário é exibido no painel Ligações. 


569 


4) — Tipo de documento:ColdFusion O 


3a Form 
4 Formvar 


4 Formvarz 
4 Formvar3 
ay URL 


E e E =” Para o início 
Definir variáveis de sessão 


Você pode usar variáveis de sessão para armazenar e exibir informações mantidas durante a visita de um usuário (ou sessão). O servidor cria um 
objeto de sessão diferente para cada usuário e o mantém durante um período estabelecido ou até que o objeto seja encerrado explicitamente. 


Antes de definir variáveis de sessão para uma página, você deve criá-las no código-fonte. Depois de criar uma variável de sessão no código- 
fonte do aplicativo da Web, você pode usar o Dreamweaver para recuperar seu valor e usá-lo em uma página da Web. 


1. Crie uma variável de sessão no código-fonte e atribua um valor a ela. 


Por exemplo, esse modelo do ColdFusion instancia uma sessão chamada username e atribui a ela o valor Cornelius: 


<CFSET session. username = Cornelius> 


2. Selecione Janela > Ligações para exibir o painel Ligações. 
3. Clique no botão de adição (+) e selecione Variável de sessão no menu pop-up. 
4. Digite o nome da variável que você definiu no código-fonte do aplicativo e clique em OK. 


Para o início 


Definir variáveis de aplicativo para o ASP e o ColdFusion 


No ASP e no ColdFusion, você pode usar variáveis de aplicativo para armazenar e exibir informações mantidas durante a vida útil do aplicativo e 
que se mantêm de usuário para usuário. Depois de definir a variável de aplicativo, você pode usar o valor em uma página. 


Nota: Não há objetos de variável de aplicativo em PHP. 
1. Abra um tipo de documento dinâmico na janela Documento. 


2. Selecione Janela > Ligações para exibir o painel Ligações. 
3. Clique no botão de adição (+) e selecione Variável de aplicativo no menu pop-up. 
4. Digite o nome da variável como você o definiu no código-fonte do aplicativo e clique em OK. 


A variável de aplicativo é exibida no painel Ligações, no ícone Aplicativo. 


| — Tipo de documento:ColdFusion O 
3» Form 
4 Formvar 
4 Formvarz 
4 Formvar3 
aa URL 
:f Session 
Es Application 
4 appvar 
4 appVarZ 
4 appvar3 


sie a é : P iníci 
Usar uma variável como fonte de dados para um conjunto de registros do ColdFusion fica 


Quando você define um conjunto de registros no painel Ligações, o Dreamweaver informa o nome da fonte de dados do ColdFusion na tag 
cfquery da página. Para obter mais flexibilidade, você pode armazenar um nome de fonte de dados em uma variável e usar a variável na tag 
cfquery. O Dreamweaver fornece um método visual de especificação dessa variável nos conjuntos de registros. 


1. Verifique se uma página do ColdFusion está ativa na janela Documento. 
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2. No painel Ligações, clique no botão de adição (+) e selecione Variável de nome da fonte de dados no menu pop-up. 
A caixa de diálogo Variável de nome da fonte de dados é exibida. 


3. Defina uma variável e clique em OK. 

4. Ao definir o conjunto de registros, selecione a variável como fonte de dados do conjunto de registros. 
Na caixa de diálogo Conjunto de registros, a variável é exibida no menu pop-up Fonte de dados com as fontes de dados do ColdFusion no 
servidor. 

5. Complete a caixa de diálogo Conjunto de registros e clique em OK. 

6. Inicialize a variável. 


O Dreamweaver não inicializa a variável para que você possa inicializá-la como e onde desejar. Você pode inicializar a variável no código 
da página (antes da tag cfquery), em um arquivo de inclusão ou em algum outro arquivo como uma variável de sessão ou de aplicativo. 


Eta Eos E : Para o início 
Definir variáveis de servidor 


Você define variáveis de servidor como fontes de conteúdo dinâmico a serem usadas dentro de um aplicativo da Web. As variáveis de servidor 
variam de acordo com o tipo de documento e entre elas estão variáveis de formulário, de URL, de sessão e de aplicativo. 


As variáveis de servidor podem ser acessadas por todos os clientes que acessam o servidor e por qualquer aplicativo em execução no servidor. 
As variáveis persistem até a parada do servidor. 


Definir variáveis de servidor do ColdFusion 
1. Abra o painel Ligações (Janela > Ligações). Na caixa de diálogo Variável de servidor, digite o nome da variável de servidor e clique em OK. 


2. Clique no botão de adição (+) e selecione a variável de sessão no menu pop-up. 


3. Digite o nome da variável e clique em OK. A variável de servidor do ColdFusion é exibida no painel Ligações. 


A seguinte tabela lista as variáveis de servidor do ColdFusion incorporadas: 


Variável Descrição 

Server.ColdFusion.ProductName Nome de produto do ColdFusion. 
Server.ColdFusion.ProductVersion Número da versão do ColdFusion. 
Server.ColdFusion.ProductLevel Edição do ColdFusion (Enterprise, Professional). 
Server.ColdFusion.SerialNumber Número de série da versão atualmente instalada do ColdFusion. 
Server.0OS.Name Nome do sistema operacional em execução no servidor 


(Windows XP, Windows 2000, Linux). 


Server.0S.Additionallnformation Informações adicionais sobre o sistema operacional instalado 
(service packs, atualizações). 


Server.OS.Version Versão do sistema operacional instalado. 


Server.OS.BuildNumber Versão da compilação do sistema operacional instalado. 


Definir uma variável local do ColdFusion 
Variáveis locais são variáveis criadas com a tag CFSET ou CFPARAM dentro de uma página do ColdFusion. A variável local definida é exibida no 
painel Ligações. 


“& Na caixa de diálogo Variável local, digite o nome da variável local e clique em OK. 


Definir variáveis de servidor do ASP 
Você pode definir as seguintes variáveis de servidor do ASP como fontes de conteúdo dinâmico: Request.Cookie, Request.QueryString, 
Request.Form, Request.ServerVariables e Request.ClientCertificates. 


1. Abra o painel Ligações (Janela > Ligações). 
2. Clique no botão de adição (+) e selecione Variável de solicitação no menu pop-up. 


3. Na caixa de diálogo Variável de solicitação, selecione um dos seguintes conjuntos de solicitação no menu pop-up Tipo: 
O conjunto QueryString Recupera informações acrescentadas ao URL da página de envio como, por exemplo, quando a página tem um 
formulário em HTML usando o método OBTER. A sequência de caracteres de consulta consiste em um ou mais pares nome/valor (por 
exemplo, last=Smith, first=Winston) acrescentados ao URL com um ponto de interrogação (?). Caso a sequência de caracteres de consulta 
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tenha mais de um par nome/valor, são inseridos sinais de e comercial (&). 


O conjunto Form Recupera informações de formulário incluídas no corpo da solicitação HTTP por formulário HTTP usando o método 
POSTAR. 


O conjunto ServerVariables Recupera os valores de variáveis de ambiente predefinidas. O conjunto tem uma lista de variáveis longa, 
inclusive CONTENT LENGTH (o comprimento do conteúdo enviado na solicitação HTTP, que você pode usar para ver se um formulário 
está vazio) e HTTP USER AGENT (fornece informações sobre o navegador do usuário). 


Por exemplo, Request.ServerVariables("HTTP USER AGENT") contém informações sobre o navegador responsável pela solicitação como, 
por exemplo, Mozilla/4.07 [en] (WinNT; |), que indica um navegador Netscape Navigator 4.07. 


Para obter uma lista completa das variáveis de ambiente do servidor do ASP, consulte a documentação on-line instalada com o Microsoft 
Personal Web Server (PWS) ou o Internet Information Server (IIS). 


O conjunto Cookies Recupera os valores dos cookies enviados em uma solicitação HTTP. Por exemplo, suponhamos que na página haja 
um cookie chamado "readMe" no sistema do usuário. No servidor, os valores do cookie são armazenados na variável 
Request.Cookies("readMe"). 


O conjunto ClientCertificate Recupera os campos de certificação da solicitação HTTP enviada pelo navegador. Os campos de certificação 
são especificados no padrão X.509. 


4. Especifique a variável no conjunto que você deseja acessar e clique em OK. 


Por exemplo, caso você acesse as informações na variável Request.ServerVariables("HTTP USER AGENT, insira o argumento 
HTTP USER AGENT. Caso você queira acessar as informações na variável Request.Form("lastname”), insira o argumento lastname. 


A variável de solicitação é exibida no painel Ligações. 


Definir variáveis de servidor PHP 
Defina as variáveis de servidor como uma fonte de conteúdo dinâmico para páginas em PHP. As variáveis de servidor do PHP são exibidas no 
painel Ligações. 

1. Abra o painel Ligações (Janela > Ligações). 

2. Clique no botão de adição (+) e selecione a variável no menu pop-up. 


3. Na caixa de diálogo Variável de solicitação, digite o nome da variável (por exemplo, REQUEST METHOD) e clique em OK. 


Para obter mais informações, procure pela palavra-chave $ SERVER na documentação do PHP. 


Definir uma variável de cliente do ColdFusion 

Defina uma variável de cliente do ColdFusion como uma fonte de conteúdo dinâmico para a página. As variáveis de cliente do ColdFusion recém- 
definidas são exibidas no painel Ligações. 

“ Na caixa de diálogo Variável de cliente, digite o nome da variável e clique em OK. 

Por exemplo, para acessar as informações na variável Client.LastVisit do ColdFusion, insira LastVisit. 


Variáveis de cliente são variáveis criadas no código para associar dados a um cliente específico. As variáveis de cliente mantêm o estado do 
aplicativo enquanto o usuário se move uma página para outra no aplicativo, bem como de uma sessão para outra. 


As variáveis de cliente podem ser definidas pelo usuário ou incorporadas. A seguinte tabela lista as variáveis de cliente do ColdFusion 
incorporadas: 


Variável Descrição 
Client.CFID Outra ID para cada cliente que se conecta ao servidor. 
Client.CFTOKEN Um número gerado aleatoriamente usado exclusivamente para 


identificar um cliente em especial. 


Client.URLToken Uma combinação entre CFID e CFTOKEN a ser passada entre os 
modelos quando os cookies não forem usados. 


Client.LastVisit Registra o carimbo de data/hora da última visita que um cliente 
fez. 
Client.HitCount O número de solicitações de página vinculadas a um único 


cliente (controlado por CFID e CFTOKEN). 


Client.TimeCreated Registra o carimbo de data/hora quando CFID e CFTOKEN foram 
criados inicialmente para um determinado cliente. 
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Definir uma variável de cookie do ColdFusion 
As variáveis de cookie são criadas no código e acessam informações contidas em cookies passadas para o servidor por um navegador. A 
variável de cookie definida é exibida no painel Ligações. 


« Na caixa de diálogo Variável de cookie, digite o nome da variável de cookie e clique em OK. 


Definir uma variável CGI do ColdFusion 
A variável CGI definida é exibida no painel Ligações. 


*& Na caixa de diálogo Variável CGI, digite o nome da variável e clique em OK. 
Por exemplo, caso você acesse as informações na variável CGI.HTTP REFERER, insira HTTP REFERER. 


A seguinte tabela lista as variáveis CGI do ColdFusion mais comuns criadas no servidor: 


Variável Descrição 


SERVER SOFTWARE O nome e a versão do software do servidor das informações que 
atende à solicitação (no qual o gateway está em execução). 
Formato: nome/versão. 


SERVER NAME O nome de host do servidor, a cópia do DNS ou o endereço IP 
como ele é exibido nos URLs de autorreferência. 


GATEWAY INTERFACE A revisão da especificação de CGI com a qual o servidor é 
compatível. Formato: CGl/revisão. 


SERVER PROTOCOL O nome e a revisão do protocolo de informações que acompanha 
a solicitação. Formato: protocolo/revisão. 


SERVER PORT O número da porta para o qual a solicitação foi enviada. 


REQUEST METHOD O método com o qual a solicitação foi feita. Para HTTP, os 
métodos são Obter, Cabeçalho, Postar etc. 


PATH INFO As informações adicionais do caminho dadas pelo cliente. Os 
scripts podem ser acessados pelo nome do caminho virtual, 
seguido de informações adicionais ao final dele. As informações 
adicionais são enviadas como PATH INFO. 


PATH TRANSLATED O servidor fornece uma versão traduzida de PATH INFO, que 
usa o caminho e faz um mapeamento virtual/físico para ele. 


SCRIPT NAME Um caminho virtual até o script em execução; usado em URLs de 
autorreferência. 


QUERY STRING As informações de consulta após o ponto de interrogação (?) no 
URL que referencia o script. 


REMOTE HOST O nome de host que realiza a solicitação. Caso não tenha essas 
informações, o servidor define REMOTE ADDR, e não 
REMOTE HOST. 


REMOTE ADDR O endereço IP do host remoto que faz a solicitação. 


AUTH TYPE Caso o servidor dê suporte à autenticação do usuário e o script 
esteja protegido, trata-se do método de autenticação específico 
do protocolo usado para validar o usuário. 


REMOTE USER AUTH USER Caso o servidor dê suporte à autenticação do usuário e o script 
esteja protegido, trata-se do nome de usuário da autenticação. 
(Também disponível como AUTH USER.) 


REMOTE IDENT Caso o servidor HTTP dê suporte à identificação RFC 931, a 
variável é definida como o nome do usuário remoto recuperado 
do servidor. Use a variável apenas no logon. 


CONTENT TYPE Em consultas que tenham informações anexadas como, por 
exemplo, HTTP POST e PUT, trata-se do tipo de conteúdo dos 
dados. 

CONTENT LENGTH O comprimento do conteúdo conforme indicado pelo cliente. 
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A seguinte tabela lista as variáveis CGI mais comuns criadas pelo navegador e passadas para o servidor: 


Variável Descrição 


HTTP REFERER O documento de referência. Trata-se do documento de vínculo 
ou de envio dos dados do formulário. 


HTTP USER AGENT O navegador que o cliente está usando no momento para enviar 
a solicitação. Formato: software/biblioteca da versão/versão. 


HTTP IF MODIFIED SINCE A hora em que a página foi modificada pela última vez. A 
variável é enviada no momento em que o navegador desejar, 
normalmente em resposta ao servidor que enviou o cabeçalho 
HTTP LAST MODIFIED. Ela pode ser usada para aproveitar o 
cache do navegador. 


Ê Para o início 
Colocar em cache fontes de conteúdo é 


Você pode colocar em cache — ou armazenar — fontes de conteúdo dinâmico em uma Design Note. Isso permite trabalhar em um site mesmo que 
você não tenha acesso ao banco de dados ou ao servidor de aplicativo que armazena as fontes de conteúdo dinâmico. A colocação em cache 
também pode agilizar o desenvolvimento com a eliminação de acessos repetidos em uma rede ao banco de dados e ao servidor de aplicativo. 


*& Clique no botão de seta no canto superior direito do painel Ligações e escolha Colocar em cache no menu pop-up. 
Caso faça alterações em uma das fontes de conteúdo, você pode atualizar o cache clicando no botão Atualizar (o ícone de seta circular) no canto 
superior direito do painel Ligações. (Expanda o painel caso você não veja o botão.) 


a = Para o início 
Alterar ou excluir fontes de conteúdo j 


Você pode alterar ou excluir qualquer fonte de conteúdo dinâmico existente — ou seja, qualquer fonte de conteúdo listada no painel Ligações. 


A alteração ou a exclusão de uma fonte de conteúdo no painel Ligações não altera ou exclui nenhuma ocorrência do conteúdo na página. Isso 
apenas o altera ou exclui como uma possível fonte de conteúdo da página. 


Alterar uma fonte de conteúdo no painel Ligações 
1. No painel Ligações (Janela > Ligações), clique duas vezes no nome da fonte de conteúdo que você deseja editar. 
2. Faça suas alterações na caixa de diálogo exibida. 
3. Caso esteja satisfeito com o trabalho, clique em OK. 


Excluir uma fonte de conteúdo do painel Ligações 
1. No painel Ligações (Janela > Ligações), selecione a fonte de conteúdo na lista. 
2. Clique no botão de subtração (-). 


p . E Ea Para o início 
Copiar um conjunto de registros de uma pagina para outra 


Você pode copiar um conjunto de registros de uma página para outra dentro de um site definido. 


1. Selecione o conjunto de registros no painel Ligações ou no painel Comportamentos de servidor. 


9) 


. Clique com o botão direito do mouse no conjunto de registros e selecione Copiar no menu pop-up. 


(9%) 


. Abra a página para a qual você deseja copiar o conjunto de registros. 


ES 


. Clique com o botão direito do mouse no painel Ligações ou na barra de ferramentas Comportamentos de servidor e selecione Colar no 
menu pop-up. 


Mais tópicos da Ajuda 
SQL primer 


(63) ex-ne-sa ] 


Avisos legais | Política de privacidade on-line 
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Conexões de banco de dados para desenvolvedores do ASP (CS6) 


Sobre conexões de banco de dados do ASP 

Sobre as conexões OLE DB 

Sobre as sequências de caracteres de conexão 

Criar uma sequência de caracteres de conexão usando um DSN local 
Criar uma sequência de caracteres de conexão usando um DSN remoto 
Criar uma conexão usando uma sequência de caracteres de conexão 
Editar ou excluir uma conexão de banco de dados 


Para o início 


Sobre conexões de banco de dados do ASP 


Um aplicativo do ASP deve se conectar a um banco de dados por meio de um driver ODBC (conectividade com banco de dados aberto) ou um 
provedor OLE DB (banco de dados de vinculação e incorporação de objeto). O driver ou o provedor funciona como um intérprete que permite ao 
aplicativo da Web se comunicar com o banco de dados. A seguinte tabela mostra alguns drivers que você pode usar com os bancos de dados 
Microsoft Access, Microsoft SQL Server e Oracle: 


Banco de dados Driver de banco de dados 


Microsoft Access Driver do Microsoft Access (ODBC) 


Provedor do Microsoft Jet para Access (OLE DB) 


Microsoft SQL Server Driver do Microsoft SQL Server (ODBC) 
Provedor do Microsoft SQL Server (OLE DB) 


Oracle Driver do Microsoft Oracle (ODBC) 
Provedor do Oracle para OLE DB 


Você pode usar o DSN (nome de uma fonte de dados) ou a sequência de caracteres de conexão para se conectar ao banco de dados. Você 
deve usar uma sequência de caracteres de conexão caso esteja se conectando por meio de um provedor OLE DB ou um driver ODBC não esteja 
instalado em um sistema Windows. 


Um DSN é um identificador com apenas uma palavra como, por exemplo, myConnection, que aponta para o banco de dados e contém todas as 
informações necessárias para se conectar a ele. Você define um DSN no Windows. Você pode usar um DSN caso esteja se conectando por meio 
de um driver ODBC instalado em um sistema Windows. 


Uma sequência de conexão é uma expressão codificada manualmente que identifica o banco de dados e lista as informações necessárias para 
se conectar a ele, como mostrado no seguinte exemplo: 


Driver=(SQL Server);Server=Socrates; Database=AcmeMktg; 
UID=wiley;PwD=roadrunner 


Nota: Você também pode usar uma sequência de conexão caso esteja se conectando por meio de um driver ODBC instalado em um sistema 
Windows, embora o uso de um DSN seja mais fácil. 


Para o início 


Sobre as conexões OLE DB 


Você pode usar um provedor OLE DB para se comunicar com o banco de dados (o OLE DB só está disponível no Windows NT, 2000 ou XP). A 
criação de uma conexão OLE DB direta com banco de dados específico pode aumentar a velocidade da conexão eliminando a camada ODBC 
entre o aplicativo da Web e o banco de dados. 


Caso você não especifique um provedor OLE DB para o banco de dados, o ASP usa o provedor OLE DB padrão para drivers ODBC a fim de se 
comunicar com um driver ODBC que, por sua vez, se comunica com o banco de dados. 


Há provedores OLE DB diferentes para bancos de dados diferentes. Você pode obter provedores OLE DB para o Microsoft Access e o SQL 
Server baixando e instalando os pacotes do Microsoft Data Access Components (MDAC) 2.5 e 2.7 no computador com o Windows e o IIS em 
execução. Você pode baixar os pacotes MDAC gratuitamente no site da Microsoft em hitp://msdn.microsoft.com/data/mdac/downloads/. 


Nota: Verifique se você instalou o MDAC 2.5 antes da instalação do MDAC 2.7. 
Você pode baixar provedores OLE DB para bancos de dados Oracle no site da Oracle em 
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www.oracle.com/technology/software/tech/windows/ole db/index.html (o registro é obrigatório). 


No Dreamweaver, você cria uma conexão OLE DB incluindo um parâmetro Provider em uma sequência de caracteres de conexão. Por exemplo, 
eis os parâmetros de provedores OLE DB comuns para bancos de dados Access, SQL Server e Oracle, respectivamente: 


Provider=Microsoft. Jet.OLEDB.4.0;... 
Provider=SQLOLEDB;... 
Provider=0raOLEDB;... 


Para o valor do parâmetro do provedor OLE DB, consulte a documentação do fornecedor do provedor ou o administrador do sistema. 


A . = Para o início 
Sobre as sequências de caracteres de conexão 
Uma sequência de caracteres de conexão combina todas as informações de que o aplicativo da Web precisa para se conectar a um banco de 
dados. O Dreamweaver insere essa sequência de caracteres nos scripts do servidor da página para serem processados posteriormente pelo 
servidor de aplicativo. 


Uma sequência de caracteres de conexão para bancos de dados Microsoft Access e SQL Server consiste em uma combinação dos seguintes 
parâmetros separados por pontos-e-vírgulas: 


Provedor Especifica o provedor OLE DB para o banco de dados. Por exemplo, eis os parâmetros de provedores OLE DB comuns para bancos 
de dados Access, SQL Server e Oracle, respectivamente: 


Provider=Microsoft. Jet.OLEDB.4.0;... 
Provider=SQLOLEDB;... 
Provider=0Ora0OLEDB;... 


Para o valor do parâmetro do provedor OLE DB, consulte a documentação do fornecedor do provedor ou o administrador do sistema. 


Caso não inclua um parâmetro Provedor, é usado o provedor OLE DB padrão para ODBC, e você deve especificar um driver ODBC apropriado 
ao banco de dados. 


Driver Especifica o driver ODBC a ser usado caso você não especifique um provedor OLE DB para o banco de dados. 

Servidor Especifica o servidor que hospeda o banco de dados SQL Server caso o aplicativo da Web seja executado em um servidor diferente. 
Banco de dados O nome de um banco de dados SQL Server. 

DBQ O caminho para um banco de dados baseado em arquivo como, por exemplo, um criado no Microsoft Access. O caminho está no servidor 
que hospeda o arquivo do banco de dados. 

UID Especifica o nome do usuário. 

PWD Especifica a senha do usuário. 

DSN O nome da fonte de dados, caso você uma. Dependendo de como define o DSN no servidor, você pode omitir os demais parâmetros da 
sequência de caracteres de conexão. Por exemplo, DSN=Results pode ser uma sequência de caracteres de conexão válida caso você defina os 
demais parâmetros ao criar o DSN. 

As sequências de caracteres de conexão para outros tipos de bancos de dados talvez não usem os parâmetros listados acima ou terão nomes ou 
usos diferentes quanto aos parâmetros. Para obter mais informações, consulte a documentação do fornecedor do banco de dados ou o 
administrador do sistema. 


Eis um exemplo de uma sequência de caracteres de conexão que criará uma conexão ODBC com um banco de dados do Access chamado 
trees.mdb: 


Driver=(Microsoft Access Driver (*.mdb)3; 
DBQ=C: NInetpublwuwrootNResearchitrees.mdb 


Eis um exemplo de uma conexão que criará uma conexão OLE DB com um banco de dados do SQL Server chamado Mothra localizado em um 
servidor chamado Gojira: 


Provider=SQLOLEDB;Server=Gojira;Database=Mothra;UID=jsmith; 
PwD=or lando8 


pa ; ESPRAR 
Criar uma sequência de caracteres de conexão usando um DSN local isbdia 


Nota: Esta seção pressupõe que você tenha configurado um aplicativo do ASP. Ele também considera que há um banco de dados configurado 
no computador local ou em um sistema ao qual você tem acesso por rede ou FTP. 

Você pode usar um DSN para criar uma conexão ODBC entre o aplicativo da Web e o banco de dados. DSN é um nome que contém todos os 
parâmetros necessários para se conectar a um banco de dados específico usando um driver ODBC. 


Como só pode especificar um driver ODBC em um DSN, você deve usar uma sequência de caracteres de conexão caso queira usar um provedor 
OLE DB. 


Você pode usar um DSN definido localmente para criar uma conexão de banco de dados no Dreamweaver. 
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o too O 


Defina um DSN no computador com o Windows e o Dreamweaver em execução. 
Para obter instruções, consulte os seguintes artigos no site da Microsoft: 


e Caso o computador esteja executando o Windows 2000, consulte o artigo da Base de Dados de Conhecimento da Microsoft 300596 em 
http://support.microsoft.com/default.aspx?scid=kb;pt-br;300596 


e Caso o computador esteja executando o Windows XP, consulte o artigo da Base de Dados de Conhecimento da Microsoft 305599 em 
http://support.microsoft.com/default.aspx?scid=Kkb;pt-br;305599 
Abra uma página do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 
Clique no botão de adição (+) no painel e selecione Nome da fonte de dados (DSN) no menu. 


Digite um nome para a nova conexão sem espaços ou caracteres especiais. 


. Selecione a opção Usando o DSN local e escolha o DSN que você deseja usar no menu Nome da fonte de dados (DSN). 


Caso você queira usar um DSN local, mas ainda não tenha definido um, clique em Definir para abrir o Administrador de fonte de dados 
ODBC do Windows. 


6. Complete as caixas Nome do usuário e Senha. 


7. Você pode restringir o número de itens de banco de dados que o Dreamweaver recupera durante o design clicando em Avançado e 


digitando um nome de esquema ou de catálogo. 
Nota: Você não pode criar um esquema ou catálogo no Microsoft Access. 


. Clique em Testar para se conectar ao banco de dados e, depois, clique em OK. Caso haja uma falha na conexão, clique duas vezes na 


sequência de caracteres de conexão ou verifique as configurações da pasta de teste que o Dreamweaver usa para processar páginas 
dinâmicas. 


Para o início 


Criar uma sequência de caracteres de conexão usando um DSN remoto 


Nota: Esta seção pressupõe que você tenha configurado um aplicativo do ASP. Ele também considera que há um banco de dados configurado 
no computador local ou em um sistema ao qual você tem acesso por rede ou FTP. 

Nota: O Dreamweaver pode recuperar apenas DSNs de servidor criados com o Administrador de fonte de dados ODBC do Windows. 

Você pode usar um DSN definido em um computador remoto para criar uma conexão de banco de dados no Dreamweaver. Caso você queira 
usar um DSN remoto, o DSN deve ser definido no computador com o Windows e o servidor de aplicativo em execução (provavelmente, o IIS). 


Nota: Como só pode especificar um driver ODBC em um DSN, você deve usar uma sequência de caracteres de conexão caso queira usar um 
provedor OLE DB. 


1. 


EO N 


Defina um DSN no sistema remoto em que o servidor de aplicativo está em execução. 
Para obter instruções, consulte os seguintes artigos no site da Microsoft: 


e Caso o computador remoto esteja executando o Windows 2000, consulte o artigo da Base de Dados de Conhecimento da Microsoft 
300596 em http://support.microsoft.com/default.aspx?scid=Kkb;pt-br;300596 


e Caso o computador remoto esteja executando o Windows XP, consulte o artigo da Base de Dados de Conhecimento da Microsoft 
305599 em http://support.microsoft.com/default.aspx?scid=Kkb;pt-br;305599 


. Abra uma página do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 
. Clique no botão de adição (+) no painel e selecione Nome da fonte de dados (DSN) no menu. 

. Digite um nome para a nova conexão sem espaços ou caracteres especiais. 

. Selecione Usando DSN no servidor de teste. 


Nota: Os usuários do Macintosh podem ignorar essa etapa porque todas as conexões de banco de dados usam DSNSs no servidor de 
aplicativo. 


. Digite o DSN ou clique no botão DSN para conectá-lo ao servidor e selecione o DSN para o banco de dados que você deseja e, em 


seguida, complete as opções. 


7. Complete as caixas Nome do usuário e Senha. 


8. Você pode restringir o número de itens de banco de dados que o Dreamweaver recupera durante o design clicando em Avançado e 


digitando um nome de esquema ou de catálogo. 
Nota: Você não pode criar um esquema ou catálogo no Microsoft Access. 


. Clique em Testar para se conectar ao banco de dados e, depois, clique em OK. Caso haja uma falha na conexão, clique duas vezes na 


sequência de caracteres de conexão ou verifique as configurações da pasta de teste que o Dreamweaver usa para processar páginas 
dinâmicas. 


Para o início 


Criar uma conexão usando uma sequência de caracteres de conexão 


Você pode usar uma conexão sem DSN para criar uma conexão ODBC ou OLE DB entre o aplicativo da Web e o banco de dados. Você usa 
uma sequência de caracteres de conexão para criar esse tipo de conexão. 
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1. Abra uma página do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 


2. Clique no botão de adição (+) no painel, selecione Personalizar sequência de caracteres de conexão no menu, complete as opções e clique 
em OK. 


3. Digite um nome para a nova conexão sem espaços ou caracteres especiais. 


4. Digite uma sequência de caracteres de conexão para o banco de dados. Se você não especificar um provedor OLE DB na sequência de 
conexão — ou seja, se você não incluir um parâmetro Provider — o ASP usará automaticamente o provedor OLE DB dos drivers ODBC. 
Nesse caso, você deve especificar um driver ODBC apropriado ao banco de dados. 


Caso o site seja hospedado por um ISP e você não saiba o caminho completo do banco de dados, use o método MapPath do objeto de 
servidor do ASP na sequência de conexão. 


5. Caso o driver de banco de dados especificado na sequência de caracteres de conexão não esteja instalado no mesmo computador do 
Dreamweaver, selecione Usando driver no servidor de teste. 
Nota: Os usuários do Macintosh podem ignorar essa etapa porque todas as conexões de banco de dados usam o servidor de aplicativo. 


6. Você pode restringir o número de itens de banco de dados que o Dreamweaver recupera durante o design clicando em Avançado e 
digitando um nome de esquema ou de catálogo. 
Nota: Você não pode criar um esquema ou catálogo no Microsoft Access. 


7. Clique em Testar para se conectar ao banco de dados e, depois, clique em OK. Caso haja uma falha na conexão, clique duas vezes na 
sequência de caracteres de conexão ou verifique as configurações da pasta de teste que o Dreamweaver usa para processar páginas 
dinâmicas. 


Conexão com um banco de dados em um ISP 
Caso seja um desenvolvedor do ASP trabalhando com um ISP (provedor de serviços da Internet) comercial, você normalmente não sabe o 
caminho físico dos arquivos que carrega, inclusive do(s) arquivo(s) de banco de dados. 


Caso o ISP não defina um DSN para você ou demore muito para fazer isso, você deve achar outra forma de criar as conexões com os arquivos 
de banco de dados. Uma alternativa é criar uma conexão sem DSN com um arquivo de banco de dados, embora você só possa definir uma 
conexão dessa caso conheça o caminho físico do arquivo de banco de dados no servidor ISP. 


Você pode obter o caminho físico de um arquivo de banco de dados usando o método MapPath do objeto de servidor do ASP. 


Nota: As técnicas abordadas nesta seção só se aplicam caso o banco de dados seja baseado em arquivo como, por exemplo, um banco de 
dados Microsoft Access no qual os dados são armazenados em um arquivo .mdb. 


Introdução aos caminhos físico e virtual 
Após o uso do Dreamweaver para carregar os arquivos em um servidor remoto, os arquivos residem em uma pasta na árvore de diretório local do 
servidor. Por exemplo, em um servidor com o Microsoft IIS em execução, o caminho para a home page pode ser o seguinte: 


c:NInetpublwwwrootkaccountslusersNjsmithNindex.htm 


Esse caminho é conhecido como caminho físico do arquivo. 


No entanto, o URL para abrir o arquivo não usa o caminho físico. Ela usa o nome do servidor ou do domínio seguido de um caminho virtual, 
como mostrado no seguinte exemplo: 


www. plutoserve.com/jsmith/index.htm 


O caminho virtual, /jsmith/index.htm, se equivale ao caminho físico, cnetpublwwwroothaccountslusersijsmithlindex.htm. 


Localizar o caminho físico de um arquivo com o caminho virtual 

Caso trabalhe com um ISP, você nem sempre sabe o caminho físico dos arquivos que carrega. Os ISPs normalmente oferecem a você um host 
FTP, possivelmente um diretório host, além de um nome de logon e senha. Os ISPs também especificam um URL para exibir as páginas na 
Internet como, por exemplo, www.plutoserve.com/jsmith/. 


Caso saiba o URL, você pode obter o caminho virtual do arquivo — trata-se do caminho após o nome do servidor ou do domínio em um URL. 
Desde que saiba o caminho virtual, você pode obter o caminho físico do arquivo no servidor usando o método MapPath. 


O método MapPath usa o caminho virtual como argumento e retorna o caminho físico e o nome do arquivo. Eis a sintaxe do método: 
Server .MapPath("/virtualpath") 
Caso o caminho virtual de um arquivo seja /jsmith/index.htm, a seguinte expressão retorna o caminho físico: 


Server .MapPath("/jsmith/index.htm") 


Você pode testar o método MapPath da seguinte forma. 


1. Abra uma página do ASP no Dreamweaver e alterne para a visualização de código (Exibir > Código). 


2. Digite a seguinte expressão no código HTML da página. 
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<wRresponse.wWrite(stringvariable)%> 


Use o método MapPath a fim de obter um valor para o argumento stringvariable. 


Eis um exemplo: 


<% Response.Write(Server.MapPath("/jsmith/index.htm")) %> 


Para exibir a página, alterne para Visualização dinâmica (Exibir > Visualização dinâmica). 


A página exibe o caminho físico do arquivo no servidor de aplicativo, por exemplo: 
c:NInetpublwwwrootkaccountsNusersNjsmithNindex.htm 


Para obter mais informações sobre o método MapPath, consulte a documentação on-line que acompanha o Microsoft IIS. 


Usar um caminho virtual para se conectar a um banco de dados 

Para escrever uma sequência de caracteres de conexão sem DSN para um arquivo de banco de dados localizado em um servidor remoto, você 
deve conhecer o caminho físico do arquivo. O seguinte exemplo é uma sequência de caracteres de conexão sem DSN para um banco de dados 
do Microsoft Access: 


Driver=(Microsoft Access Driver (*.mdb)); 
DBQ=c: NInetpublwuwrootkaccountsNusersNjsmithidataNstatistics.mdb 


Caso não saiba o caminho físico dos arquivos no servidor remoto, você pode obtê-lo usando o método MapPath na sequência de caracteres de 
conexão. 


1. 
. Abra uma página do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 


EO N 


Carregue o arquivo de banco de dados no servidor remoto e anote o caminho virtual — por exemplo, /jsmith/data/statistics.mdb. 


. Clique no botão de adição (+) no painel e selecione Personalizar sequência de caracteres de conexão no menu. 
. Digite um nome para a nova conexão sem espaços ou caracteres especiais. 
. Digite a sequência de caracteres de conexão e use o método MapPath para fornecer o parâmetro DBQ. 


Suponhamos que o caminho virtual para o banco de dados do Microsoft Access seja /jsmith/data/statistics.mdb; a sequência de caracteres 
de conexão pode ser expressada da seguinte forma caso você use VBScript como linguagem de script: 


"Driver=(Microsoft Access Driver (*.mdb));DBQ=" & Server .MapPatha 
("/jsmith/data/statistics.mdb") 


O e comercial (&) é usado para concatenar (combinar) duas sequências de caracteres. A primeira sequência de caracteres é colocada entre 
aspas e a segunda é retornada pela expressão Server.MapPath. Quando as duas sequências de caracteres são combinadas, a seguinte 
sequência é criada: 


Driver=(Microsoft Access Driver (*.mdb)+; 
DBQ=C: NInetpublwuwrootkaccountsNusersNjsmithidataNstatistics.mdb 


Caso você use JavaScript, a expressão é idêntica, exceto se você usar um sinal de adição (+) em lugar de um e comercial (&) para 
concatenar as duas sequências de caracteres: 


"Driver=(Microsoft Access Driver (*.mdb));DBQ=" + Server .MapPath- 
("/jsmith/data/statistics.mdb") 


. Selecione Usando driver no servidor de teste, clique em Testar e, depois, clique em OK. 


Nota: Os usuários do Macintosh podem ignorar essa etapa porque todas as conexões de banco de dados usam o servidor de aplicativo. 
Nota: Caso haja falha na conexão, confirme a sequência de caracteres de conexão ou entre em contato com o ISP para verificar se o 
driver de banco de dados que você especificou na sequência está instalado no servidor remoto. Também verifique se o ISP tem a versão 
mais recente do driver. Por exemplo, um banco de dados criado no Microsoft Access 2000 não funcionará com o Driver do Microsoft 
Access 3.5. Você precisa do Driver do Microsoft Access 4.0 ou posterior. 


. Atualize a conexão de banco de dados das páginas dinâmicas existentes (abra a página no Dreamweaver, clique duas vezes no nome do 


conjunto de registros no painel Ligações ou Comportamentos de servidor e selecione a conexão que você acabou de criar no menu 
Conexão) e use a nova conexão com uma página nova que você criou. 


Para o início 


Editar ou excluir uma conexão de banco de dados 


Quando você cria uma conexão de banco de dados, o Dreamweaver armazena as informações da conexão em um arquivo de inclusão na 
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subpasta Conexões da pasta raiz local do site. Você pode editar ou excluir as informações de conexão no arquivo manualmente ou da seguinte 
forma. 


Editar uma conexão 
1. Abra uma página do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 
2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e selecione Editar conexão no menu. 
3. Edite as informações de conexão e clique em OK. 


O Dreamweaver atualiza o arquivo de inclusão, que atualiza todas as páginas do site que usam a conexão. 


Excluir uma conexão 
1. Abra uma página do ASP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 
2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e selecione Excluir conexão no menu. 


3. Na caixa de diálogo exibida, confirme se você deseja excluir a conexão. 
Nota: Para evitar o recebimento de erros após a exclusão de uma conexão, atualize todos os conjuntos de registros que usam a conexão 
antiga clicando duas vezes no nome do conjunto no painel Ligações e escolhendo uma nova conexão. 


Mais tópicos da Ajuda 


(69) ex-nc-sa ] 
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Conexões de banco de dados para desenvolvedores do ColdFusion 
(CS6) 


Conexão com um banco de dados do ColdFusion 
Criar ou modificar uma fonte de dados do ColdFusion 
Conexão com o banco de dados no Dreamweaver 


- A RR 
Conexão com um banco de dados do ColdFusion este 


Ao desenvolver um aplicativo da Web do ColdFusion no Dreamweaver, você se conecta a um banco de dados selecionando uma fonte de dados 
do ColdFusion definida no Dreamweaver ou no Administrador do ColdFusion, o console de gerenciamento do servidor. 


Antes de se conectar a um banco de dados, você deve configurar um aplicativo da Web do ColdFusion. Você também deve configurar um banco 
de dados no computador local ou em um sistema ao qual você tem acesso por rede ou FTP. 


Verifique se o Dreamweaver sabe onde localizar as fontes de dados do ColdFusion. Para recuperar as fontes de dados do ColdFusion no 
momento da criação, o Dreamweaver coloca os scripts em uma pasta do computador no qual o ColdFusion está em execução. Você deve 
especificar essa pasta na categoria Servidor de teste da caixa de diálogo Definição de sites. 


Em seguida, você deve criar uma fonte de dados do ColdFusion no Dreamweaver ou no Administrador do ColdFusion (caso ainda não haja 
nenhuma). Depois de criar uma fonte de dados do ColdFusion, você pode usá-la no Dreamweaver para se conectar ao banco de dados. 


Criar ou modificar uma fonte de dados do ColdFusion dc 


Para poder usar as informações do banco de dados na página, você deve criar uma fonte de dados do ColdFusion. Caso esteja executando o 
ColdFusion MX 7 ou posterior, você pode criar ou modificar diretamente a fonte de dados no Dreamweaver. Caso esteja executando o ColdFusion 
MX, você deve usar o console de gerenciamento do servidor, o Administrador do ColdFusion MX, para criar ou modificar a fonte de dados. Nesse 
caso, você pode continuar usando o Dreamweaver para abrir o Administrador do ColdFusion MX. 


Criar ou modificar uma fonte de dados do ColdFusion caso o ColdFusion MX 7 ou posterior esteja em 
execução 
1. Verifique se um computador com o ColdFusion MX 7 ou posterior em execução está definido como servidor de teste do site. 
2. Abra qualquer página do ColdFusion no Dreamweaver. 


3. Para criar uma nova fonte de dados, clique no botão de adição (+) do painel Bancos de dados (Janelas > Bancos de dados) e insira os 
valores de parâmetro específicos do driver de banco de dados. 
Nota: O Dreamweaver só exibe o botão de adição (+) caso você esteja executando o ColdFusion MX 7 ou posterior. 


4. Para modificar uma fonte de dados, clique duas vezes na conexão de banco de dados no painel Bancos de dados e faça as alterações. 


Você pode editar qualquer parâmetro, exceto o nome da fonte de dados. Para obter mais informações, consulte a documentação do 
fornecedor do driver ou o administrador do sistema. 


Criar ou modificar uma fonte de dados do ColdFusion caso o ColdFusion MX 6.1 ou 6.0 esteja em 
execução 
1. Abra qualquer página do ColdFusion no Dreamweaver. 


2. No painel Bancos de dados (Janela > Bancos de dados) do Dreamweaver, clique em Modificar fontes de dados na barra de ferramentas do 
painel. 


3. Faça logon no Administrador do ColdFusion MX e crie ou modifique a fonte de dados. 
Para obter instruções, consulte a ajuda do ColdFusion (Ajuda > Ajuda do ColdFusion). 


Você deve fornecer determinados valores de parâmetro para criar a fonte de dados do ColdFusion. Em relação aos valores de parâmetro 
específicos do driver de banco de dados, consulte a documentação do fornecedor do driver ou o administrador do sistema. 


Depois de criar uma fonte de dados do ColdFusion, você pode usá-la no Dreamweaver. 


o Para o início 
Conexão com o banco de dados no Dreamweaver j 


Depois de criar uma fonte de dados do ColdFusion, use-a para se conectar ao banco de dados no Dreamweaver. 
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Abra qualquer página do ColdFusion no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). As fontes de dados 
do ColdFusion devem ser exibidas no painel. 


Caso as fontes de dados não sejam exibidas, complete a lista de verificação no painel. Verifique se o Dreamweaver sabe onde localizar as fontes 
de dados do ColdFusion. Na categoria Servidor de teste da caixa de diálogo Definição de sites, especifique a pasta raiz do site no computador no 
qual o ColdFusion está em execução. 


Mais tópicos da Ajuda 
Configurar um servidor de teste 


(69) ex-nc-sa ] 
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Conexões de banco de dados para desenvolvedores do PHP 


Sobre conexões de banco de dados do PHP 
Conectar-se a um banco de dados 
Editar ou excluir uma conexão de banco de dados 


Para o início 


Sobre conexões de banco de dados do PHP 


Tendo em vista o desenvolvimento do PHP, o Dreamweaver só dá suporte ao sistema de banco de dados MySQL. Não há suporte para outros 
sistemas de banco de dados como, por exemplo, Microsoft Access ou Oracle. O MySQL é um software de código-fonte aberto que você pode 
baixar gratuitamente na Internet para uso não comercial. Para obter mais informações, consulte o site do MySQL em 
http://dev.mysql.com/downloads/. 


Esta seção pressupõe que você tenha configurado um aplicativo do PHP. Ele também considera que há um banco de dados MySQL configurado 
no computador local ou em um sistema ao qual você tem acesso por rede ou FTP. 


Para fins de desenvolvimento, baixe e instale a versão Windows Essentials do servidor de banco de dados MySQL. 


Para o início 


Conectar-se a um banco de dados 


Para se conectar a um banco de dados durante o desenvolvimento de um aplicativo do PHP no Dreamweaver, você deve ter um ou mais bancos 
de dados MySQL e o servidor MySQL deve ser inicializado. 

1. Abra uma página do PHP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 

2. Clique no botão de adição (+) no painel, selecione Conexão MySQL no menu e complete a caixa de diálogo. 


* Digite um nome para a nova conexão sem espaços ou caracteres especiais. 


e Na caixa Servidor MySQL, digite um endereço IP ou o nome de um servidor para o computador de hospedagem do MySQL. Caso o 
MySQL esteja em execução no mesmo computador do PHP, você pode digitar localhost. 


e Digite o nome do usuário e a senha do MySQL. 


e Na caixa Banco de dados, digite o nome do banco de dados ou clique em Selecionar e selecione o banco de dados na lista de bancos 
de dados MySQL e clique em Testar. 


O Dreamweaver tenta se conectar ao banco de dados. Caso haja falha na conexão, confirme o nome de servidor, o nome de usuário e a 
senha. Caso a falha na conexão persista, verifique as configurações da pasta de teste que o Dreamweaver usa para processar as páginas 
dinâmicas. 


O Dreamweaver escolhe a melhor alternativa para preencher automaticamente o valor do prefixo do URL na categoria Servidor de teste da 
caixa de diálogo Definição de site, mas algumas vezes será necessário que você ajuste o prefixo do URL para que sua conexão funcione. 
Certifique-se de que o prefixo do URL seja o URL que os usuários digitam em seus navegadores para abrir o aplicativo da Web, menos o 
nome do arquivo (ou página de início) do aplicativo. 


3. Clique em OK. 
Nota: Caso você receba a mensagem de erro “Client does not support authentication protocol requested. Consider upgrading MySQL 
client” ao testar a conexão de banco de dados PHP com o MySQL 4.1, consulte Solução de problemas de mensagens de erro MySQL. 


Para o início 


Editar ou excluir uma conexão de banco de dados 


Quando você cria uma conexão de banco de dados, o Dreamweaver armazena as informações da conexão em um arquivo de inclusão na 
subpasta Conexões da pasta raiz local do site. Você pode editar ou excluir as informações de conexão no arquivo manualmente ou da seguinte 
forma. 


Editar uma conexão 
1. Abra uma página do PHP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 
2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e selecione Editar conexão no menu. 
3. Edite as informações de conexão e clique em OK. 


O Dreamweaver atualiza o arquivo de inclusão, que atualiza todas as páginas do site que usam a conexão. 
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Excluir uma conexão 
1. Abra uma página do PHP no Dreamweaver e, depois, abra o painel Bancos de dados (Janela > Bancos de dados). 


2. Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e selecione Excluir conexão no menu. 


3. Na caixa de diálogo exibida, confirme se você deseja excluir a conexão. 
Nota: Para evitar o recebimento de erros após a exclusão de uma conexão, atualize todos os conjuntos de registros que usam a conexão 
antiga clicando duas vezes no nome do conjunto no painel Ligações e selecionando uma nova conexão na caixa de diálogo Conjunto de 
registros. 


Mais tópicos da Ajuda 


(5) ex-nc-sa ) 
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Criação de formulários da Web 


Sobre formulários da Web 

Objetos de formulário 

Criar um formulário em HTML 

Sobre os objetos de formulário dinâmicos 

Inserir ou alterar um menu dinâmico de formulário HTML 
Tornar os menus de formulário em HTML dinâmicos 

Exibir conteúdo dinâmico em campos de texto em HTML 

Definir as opções da caixa de diálogo Campo de texto dinâmico 
Pré-selecionar dinamicamente uma caixa de seleção em HTML 
Pré-selecionar dinamicamente um botão de opção em HTML 
Validar dados de formulário em HTML 

Anexar comportamentos do JavaScript a objetos de formulário em HTML 
Anexar scripts personalizados a botões de formulário em HTML 
Criar formulários HTML acessíveis 


Nota: O suporte para elementos de formulário em HTML foi aprimorado nas atualizações da Dreamweaver Creative Cloud. Para obter 
informações, consulte Suporte avançado ao HTML5 para elementos de formulário. 


Para o início 


Sobre formulários da Web 


Quando um visitante insere informações em um formulário exibido em um navegador da Web e clica no botão de envio, as informações são 
enviadas para um servidor onde são processadas por um script do servidor ou aplicativo. O servidor responde enviando de volta as informações 
solicitadas pelo usuário (ou cliente) ou realizando alguma outra ação com base no conteúdo do formulário. 


Você pode criar formulários que enviem dados para a maior parte dos servidores de aplicativos, incluindo PHP, ASP e ColdFusion. Se você usar 
o ColdFusion, também poderá adicionar controles de formulários específicos do ColdFusion nos seus formulários. 


Nota: Você também pode enviar dados de formulário diretamente para um destinatário de email. 
Para o início 


Objetos de formulário 


No Dreamweaver, os tipos de entrada de formulário são chamados objetos de formulário. Os objetos de formulário são os mecanismos que 
permitem aos usuários inserir dados. Você pode adicionar os seguintes objetos de formulário a um formulário: 


Campos de texto Aceite todos os tipos de entrada de texto alfanumérico. O texto pode ser exibido como uma linha única, várias linhas e um 
campo de senha no qual o texto digitado é substituído por asteriscos ou marcadores a fim de ocultar o texto de curiosos. 


À Basliksiz Belge - Microsoft Internet Explorer 


Arquivo Edkar Exibir Favortos Ferramentas Ajuda 


O- O ndo PLPRO HAS: 
[Enter text here l Campo de texto de uma linha 
Enter a greater M| 
amount of text bd Campo de texto de várias linhas 
seseseses A Campo de senha 


Nota: As senhas e as demais informações enviadas para um servidor usando um campo de senha não são criptografadas. Os dados 
transferidos podem ser interceptados e lidos como texto alfanumérico. Por essa razão, você deve sempre fornecer criptografia aos dados que 
deseja manter em segurança. 


Campos ocultos Armazene informações inseridas por um usuário como, por exemplo, endereço de email ou preferência de visualização e, em 
seguida, use esses dados na próxima visita do usuário ao site. 
Botões Realize as ações com o clique. Você pode adicionar um nome ou rótulo personalizado a um botão, ou usar um dos rótulos “Enviar” ou 
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“Redefinir” predefinidos. Use um botão para enviar dados de formulário ao servidor ou para redefinir o formulário. Você também pode atribuir 
outras tarefas de processamento definidas em um script. Por exemplo, o botão pode calcular o custo total dos itens selecionados com base em 
valores atribuídos. 

Caixas de seleção Permita várias respostas dentro de um único grupo de opções. Um usuário pode selecionar quantas opções se aplicarem. O 
seguinte exemplo mostra três itens de caixa de seleção marcados: Surfing, Mountain Biking e Rafting. 


A Check Boxes - Microsoft Internet Explorer 


Arquivo Editar Exibir Favoritos Ferramentas Ajuda 


MO PRO ZARA: 


Surfing 
O Kyaking 
Z] Mountain Biking 
7 Rafting 


Botões de opção Represente opções exclusivas. A seleção de um botão dentro de um grupo de botões de opção desmarca todos os demais 
(um grupo consiste em dois ou mais botões que compartilham o nome). No exemplo abaixo, Rafting é a opção selecionada no momento. Caso o 
usuário clique em Surfing, o botão Rafting é desmarcado automaticamente. 


À Radio Buttons - Microsoft Internet Explorer 


Arquivo Editar Exibir Favoritos Ferramentas Ajuda 


Pp (2) fo P * e a E q 


O Surfing 
O Kyaking 
O Mountain Biking 
& Rafting 


Menus de lista Exiba valores de opção em uma lista de rolagem que permite aos usuários selecionar várias opções. A opção Lista exibe os 
valores de opção em um menu que permite aos usuários selecionar apenas um único item. Use menus quando você tiver uma quantidade de 
espaço limitada, mas precisa exibir muitos itens, ou para controlar os valores retornados ao servidor. Diferentemente dos campos de texto nos 
quais os usuários digitam o que querem, inclusive dados inválidos, você define os valores exatos retornados por um menu. 

Nota: Um menu pop-up em um formulário em HTML não é igual a um menu pop-up gráfico. Para obter informações sobre como criar, editar, 
mostrar e ocultar um menu pop-up gráfico, consulte o link ao final desta seção. 

Menus de salto Listas de navegação ou menus pop-up que permitem inserir um menu no qual cada opção é vinculada a um documento ou 
arquivo. 

Campos de arquivo Eles permitem aos usuários procurar um arquivo no computador e carregá-lo como dados de formulário. 

Campos de imagem Eles permitem inserir uma imagem em um formulário. Use campos de imagem para criar botões gráficos como, por 
exemplo, Enviar ou Redefinir. O uso de uma imagem para realizar tarefas que não sejam o envio de dados exige que um comportamento seja 
anexado ao objeto de formulário. 


Para o início 


Criar um formulário em HTML 


(Somente para usuários da Creative Cloud): como parte do suporte ao HTMLS, os novos atributos foram adicionados ao painel Propriedades para 
elementos de formulário. Além disso, quatro novos elementos de formulário (e-mail, pesquisa, telefone, URL) foram adicionados à seção 
Formulários do painel Inserir. Para obter mais informações, consulte Suporte avançado ao HTMLS5 para elementos de formulário. 


1. Abra uma página e coloque o ponto de inserção onde você deseja que o formulário seja exibido. 
2. Selecione Inserir > Formulário ou a categoria Formulários, no painel Inserir, e clique no ícone Formulário. 


Na visualização Design, os formulários são indicados por um contorno vermelho pontilhado. Se você não vir esse contorno, selecione 
Exibir > Auxílios visuais > Elementos invisíveis. 


3. Defina as propriedades do formulário em HTML no Inspetor de propriedades (Janela >Propriedades): 
a. Na janela Documento, clique no contorno para selecionar o formulário. 
b. Na caixa Formulário, digite um nome exclusivo para identificar o formulário. 


A nomeação de um formulário possibilita referenciar ou controlar o formulário com uma linguagem de script como, por exemplo, 
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JavaScript ou VBScript. Caso você não nomeie o formulário, o Dreamweaver gera um nome usando a sintaxe formn e incrementa o 
valor de n a cada formulário adicionado à página. 


c. Na caixa Ação, especifique a página ou o script que processará os dados do formulário digitando o caminho ou clicando no ícone de 
pasta para navegar até a página ou o script apropriado. Exemplo: processorder.php. 


d. No menu pop-up Método, especifique o método para transmitir os dados de formulário ao servidor. Defina uma das seguintes opções: 
Padrão Usa a configuração padrão do navegador para enviar os dados do formulário ao servidor. Normalmente, o valor padrão é o 
método OBTER. 


GET Acrescenta o valor à URL que está solicitando a página. 
POST Incorpora os dados de formulário à solicitação HTTP. 


Não use o método OBTER para enviar formulários longos. As URLs estão limitadas a 8.192 caracteres. Se a quantidade de dados 
enviados for muito grande, eles serão truncados, o que leva a resultados inesperados ou falhas no processamento. 


As páginas dinâmicas geradas por parâmetros passados pelo método OBTER podem ser marcadas porque todos os valores 
necessários para gerar novamente a página estão contidos no URL exibido na caixa Endereço do navegador. Por outro lado, as 
páginas dinâmicas geradas por parâmetros passados pelo método POSTAR não podem ser marcadas. 


Caso você colete nomes de usuário e senhas confidenciais, números de cartão de crédito ou outras informações confidenciais, o 
método POSTAR pode parecer mais seguro que o método OBTER. No entanto, as informações enviadas pelo método POSTAR não 
são criptografadas e podem ser facilmente recuperadas por um hacker. Para garantir a segurança, use uma conexão protegida em um 
servidor seguro. 


e. (Opcional) No menu pop-up Tipo de codif., especifique o tipo de codificação MIME dos dados enviados para o servidor para 
processamento. 


A configuração padrão de application/x-www-form-urlencode costuma ser usado com o método POSTAR. Caso você esteja criando um 
campo de carregamento de arquivo, especifique o tipo MIME multipart/form-data. 


f. (Opcional) No menu pop-up Destino, especifique a janela na qual exibir os dados retornados pelo programa invocado. 
Caso a janela nomeada ainda não esteja aberta, uma nova com esse nome é aberta. Defina um dos seguintes valores de destino: 
“blank Abre o documento de destino em uma nova janela sem nome. 
* parent Abre o documento de destino na janela pai da janela que exibe o documento atual. 
“ self Abre o documento de destino na mesma janela da janela na qual o formulário foi enviado. 


“top Abra o documento de destino no corpo da janela atual. Esse valor pode ser usado para verificar se o documento de destino usa 
toda a janela mesmo que o documento original tenha sido exibido em um quadro. 
4. Insira objetos de formulário na página: 
a. Coloque o ponto de inserção onde o objeto de formulário deve ser exibido no formulário. 
b. Selecione o objeto no menu Inserir > Formulário ou na categoria Formulários do painel Inserir. 


c. Complete a caixa de diálogo Atributos de acesso a tag input. Para obter mais informações, clique no botão Ajuda da caixa de diálogo. 
Nota: Se não visualizar a caixa de diálogo Atributos de acesso a tag input, você terá que ter o Ponto de inserção na Visualização de 
código para tentar inserir o objeto de formulário. Verifique se o Ponto de inserção está na Visualização de projeto e tente novamente. 
Para obter mais informações sobre esse tópico, consulte o artigo de David PowerCriando formulários HTML no Dreamweaver. 


d. Defina as propriedades dos objetos. 

e. Digite um nome para o objeto no Inspetor de propriedades. 
Todos os campos de texto, campos ocultos, caixas de seleção e objetos de lista/menu devem ter um nome exclusivo que identifique o 
objeto no formulário. Os nomes de objeto de formulário não podem conter espaços ou caracteres especiais. Você pode usar qualquer 
combinação dos caracteres alfanuméricos e um sublinhado ( ). O rótulo que você atribui ao objeto é o nome da variável que armazena 
o valor (os dados inseridos) do campo. Esse é o valor enviado para o servidor para processamento. 
Nota: Todos os botões de opção em um grupo devem ter o mesmo nome. 

f. Para identificar o campo de texto, a caixa de seleção ou o objeto de botão de opção na página, clique ao lado do objeto e digite o 
rótulo. 

5. Ajuste o layout do formulário. 


Use quebras de linha, quebras de parágrafo, texto pré-formatado ou tabelas para formatar os formulários. Você não pode inserir um 
formulário em outro formulário (ou seja, não é possível sobrepor tags), mas pode incluir mais de um formulário em uma página. 


Ao criar formulários, não se esqueça de identificar os campos de formulário com texto descritivo para permitir aos usuários saber ao que 
eles estão respondendo — por exemplo, “Digite seu nome” para solicitar informações de nome. 


Use tabelas para fornecer estrutura a objetos de formulário e rótulos de campo. Ao usar tabelas em formulários, verifique se todas as tags 
table estão incluídas entre as tags form. 


Para assistir a um tutorial sobre a criação de formulários, consulte www.adobe.com/go/vid0160 br. 
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Para assistir a um tutorial sobre formulários de estilo com CSS, consulte www.adobe.com/go/vid0161 br. 


Propriedades do objeto de campo de texto 
Selecione o objeto do campo de texto e defina uma das seguintes opções no Inspetor de propriedades: 


Largura do caractere Especifica o número máximo de caracteres que podem ser exibidos no campo. Esse número pode ser inferior ao Nº máx. 
de caract, que especifica o número máximo de caracteres que podem ser digitados no campo. Por exemplo, se a Largura do caractere for 
definida como 20 (o valor padrão) e um usuário digitar 100 caracteres, apenas 20 deles serão visíveis no campo de texto. Embora você não 
possa exibir os caracteres no campo, eles são reconhecidos pelo objeto de campo e enviados para processamento no servidor. 

Nº máx. de caract. Especifica o número máximo de caracteres que o usuário pode digitar em campos de texto de linha única. Use Nº máx. de 
caract. para limitar CEPs a 5 dígitos, limitar senhas a 10 caracteres etc. Caso você deixe a caixa Nº máx. de caract. em branco, os usuários 
podem digitar qualquer quantidade de texto. Se o texto exceder a largura do caractere do campo, o texto será rolado. Caso um usuário exceda o 
número máximo de caracteres, o formulário produz um som de alerta. 

Número de linhas (Disponível quando a opção Várias linhas está selecionada) Define a altura do campo para campos de texto com várias 
linhas. 

Desativado Desativa a área de texto. 

Somente leitura Torna a área de texto somente leitura. 

Tipo Designa o campo como um campo de linha única, de várias linhas ou de senha. 


Linha única Resulta em uma tag input com o type atributo definido como text. A configuração Largura do caractere é mapeada para o 
atributo size e a configuração Nº máx. de caract., para o atributo maxlength. 
Multilinhas Resulta em uma tag textarea. A configuração Largura do caractere é mapeada para o atributo cols e a configuração Número 
de linhas, para o atributo rows. 
Senha Resulta em uma tag input com o type atributo definido como password. As configurações Largura do caractere e Nº máx. de 
caract. são mapeadas para os mesmos atributos como campos de texto de linha única. Quando um usuário digita um campo de texto de 
senha, a entrada é exibida como marcadores ou asteriscos para protegê-lo da observação de outras pessoas. 
Valor inicial Atribui o valor exibido no campo quando o formulário é carregado pela primeira vez. Por exemplo, você pode indicar que o usuário 
digita informações no campo incluindo uma observação ou um valor de exemplo. 
Classe Permite que você aplique regras de CSS ao objeto. 


Opções de objeto de botão 

Botão Atribui um nome ao botão. Dois nomes reservados, Enviar e Redefinir, informam o formulário para enviar os dados de formulário ao 
aplicativo de processamento ou ao script, ou para redefinir todos os campos de formulário de acordo com os valores originais, respectivamente. 
Valor Determina o texto exibido no botão. 

Ação Determina o que acontece quando um botão é clicado. 


Enviar formulário Envia os dados de formulário para processamento quando o usuário clica no botão. Os dados são enviados para a 
página ou o script especificado na propriedade Ação do formulário. 
Redefinir formulário Limpa o conteúdo do formulário quando o botão é clicado. 
Nenhum Especifica a ação a ser realizada quando o botão é clicado. Por exemplo, você pode adicionar um comportamento do 
JavaScript que abre outra página quando o usuário clica no botão. 

Classe Aplica regras de CSS ao objeto. 


Opções de objeto de caixa de seleção 

Valor marcado Define o valor a ser enviado para o servidor quando a caixa de seleção é marcada. Por exemplo, em uma pesquisa você pode 
definir um valor igual a 4 para concordo totalmente e um valor igual a 1 para discordo totalmente. 

Estado inicial Determina se a caixa de seleção é marcada quando o formulário é carregado no navegador. 

Dinâmico Permite ao servidor determinar dinamicamente o estado inicial da caixa de seleção. Por exemplo, você pode usar as caixas de seleção 
para apresentar visualmente as informações Sim/Não armazenadas em um registro de banco de dados. No momento do design, você não sabe 
essas informações. Durante o runtime, o servidor lê o registro de banco de dados e marca a caixa de seleção caso o valor seja Sim. 

Classe Aplica regras de Folhas de estilos em cascata (CSS) ao objeto. 


Opções do objeto de botão de opção único 

Valor marcado Define o valor a ser enviado para o servidor quando o botão de opção é selecionado. Por exemplo, você pode digitar skiing na 
caixa Valor marcado para indicar que um usuário escolheu skiing. 

Estado inicial Determina se o botão de opção é selecionado quando o formulário é carregado no navegador. 

Dinâmico Permite ao servidor determinar dinamicamente o estado inicial do botão de opção. Por exemplo, você pode usar os botões de opção 
para apresentar visualmente as informações armazenadas em um registro de banco de dados. No momento do design, você não sabe essas 
informações. Durante o runtime, o servidor lê o registro de banco de dados e marca o botão de opção caso o valor corresponda ao que você 
especificou. 

Classe Aplica regras de CSS ao objeto. 


Opções de menu 
Lista/menu Atribui um nome ao menu. O nome deve ser exclusivo. 
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Tipo Indica se o menu é aberto quando clicado (a opção Menu) ou exibe uma lista rolável de itens (a opção Lista). Selecione a opção Menu caso 
você queira que apenas uma opção permaneça visível quando o formulário é exibido em um navegador. Para exibir as demais opções, o usuário 
clica na seta para baixo. 

Selecione a opção Lista para listar uma ou todas as opções quando o formulário é exibido em um navegador a fim de permitir aos usuários 
selecionar vários itens. 


Altura (Listar apenas o tipo) Define o número de itens exibidos no menu. 
Seleções (Listar apenas o tipo) Indica se o usuário pode selecionar vários itens na lista. 
Listar valores Abre uma caixa de diálogo que permite adicionar os itens a um menu de formulário: 


1. Use os botões de adição (+) e de subtração (-) para adicionar e remover itens na lista. 
2. Digite o texto do rótulo e um valor opcional para cada item de menu. 


Cada item da lista tem um rótulo (o texto exibido na lista) e um valor (o valor enviado para o aplicativo de processamento caso o item seja 
selecionado). Caso nenhum valor seja especificado, o rótulo é enviado, na verdade, para o aplicativo de processamento. 


3. Use os botões de seta para cima e para baixo a fim de reorganizar os itens na lista. 


Os itens são exibidos no menu na mesma ordem em que são exibidos na caixa de diálogo Listar valores. O primeiro item da lista é o item 
selecionado quando a página é carregada em um navegador. 


Dinâmico Permite ao servidor selecionar dinamicamente um item no menu quando ele é exibido pela primeira vez. 
Classe Permite que você aplique regras de CSS ao objeto. 
Selecionados inicialmente Define os itens selecionados na lista por padrão. Clique no(s) item(ns) na lista. 


Inserir campos de carregamento de arquivo 

Você pode criar um campo de carregamento de arquivo que permite aos usuários selecionar um arquivo no computador — como, por exemplo, um 
documento de processador de textos ou um arquivo gráfico — e carregá-lo no servidor. Um campo de arquivo é semelhante aos demais campos 
de texto, exceto por também conter um botão Procurar. O usuário pode digitar manualmente o caminho do arquivo que deseja carregar ou usar o 
botão Procurar para localizar e selecionar o arquivo. 


Para usar campos de carregamento de arquivo, você deve ter um script do servidor ou uma página capaz de lidar com envios de arquivo. 
Consulte a documentação da tecnologia de servidor que você usa para processar dados de formulário. Por exemplo, caso você use PHP, 
consulte “Controle de carregamentos de arquivos” no Manual on-line do PHP em hittp://us2.php.net/features file-upload.php. 


Os campos de arquivo exigem que você use o método POSTAR para transmitir os arquivos do navegador para o servidor. O arquivo é postado no 
endereço que você especificou na caixa Ação do formulário. 


Nota: Entre em contato com o administrador do sistema para confirmar se há permissão para carregamentos de arquivo anônimos antes de usar 
o campo de arquivo. 
Insira um formulário na página (Inserir > Formulário). 


Selecione o formulário para exibir o Inspetor de propriedades. 

Defina o Método do formulário como POSTAR. 

No menu pop-up Tipo de codif., selecione multipart/form-data. 

Na caixa Ação, especifique o script do servidor ou a página capaz de controlar o arquivo carregado. 

Coloque o ponto de inserção no contorno do formulário e selecione Inserir > Formulário > Campo de arquivo. 
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Defina qualquer uma das seguintes opções no Inspetor de propriedades: 
Nome do campo de arquivo Especifica o nome do objeto do campo de arquivo. 


Largura do caractere Especifica o número máximo de caracteres que podem ser exibidos no campo. 


Nº máx. de caract. Especifica o número máximo de caracteres que o campo manterá. Caso o usuário procure o arquivo, o nome de 
arquivo e o caminho podem exceder o valor Nº máx. de caract especificado. No entanto, se o usuário tentar digitar o nome de arquivo e o 
caminho, o campo de arquivo só permitirá o número de caracteres especificado pelo valor Nº máx. de caract. 


Inserir um botão de imagem 
Você também pode usar imagens como ícones de botão. O uso de uma imagem para realizar tarefas que não sejam o envio de dados exige que 
um comportamento seja anexado ao objeto de formulário. 

1. No documento, coloque o ponto de inserção dentro do contorno do formulário. 


2. Selecione Inserir > Formulário > Campo de imagem. 
A caixa de diálogo Selecionar origem da imagem é exibida. 


3. Selecione a imagem do botão na caixa de diálogo Selecionar origem da imagem e clique em OK. 


Defina qualquer uma das seguintes opções no Inspetor de propriedades: 

Campo de imagens Atribui um nome ao botão. Dois nomes reservados, Enviar e Redefinir, informam o formulário para enviar os dados de 
formulário ao aplicativo de processamento ou ao script, ou para redefinir todos os campos de formulário de acordo com os valores originais, 
respectivamente. 
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Origem Especifica a imagem que você deseja usar para o botão. 


Alt Permite que você digite texto descritivo caso haja falha no carregamento da imagem no navegador. 


Alinhar Define o atributo align do objeto. 


Editar imagem Inicia o editor de imagens padrão e abre o arquivo de imagem para edição. 


Classe Permite que você aplique regras de CSS ao objeto. 


5. Para anexar um comportamento do JavaScript ao botão, selecione a imagem e, depois, selecione o comportamento no painel 
Comportamentos (Janela > Comportamentos). 


Opções de objeto do campo oculto 
Campo oculto Especifica o nome do campo. 
Valor Atribui um valor ao campo. Esse valor é passado para o servidor quando o formulário é enviado. 


Inserir um grupo de botões de opção 
1. Coloque o ponto de inserção dentro do contorno do formulário. 


2. Selecione Inserir > Formulário > Grupo de botões de opção. 


3. Complete a caixa de diálogo e clique em OK. 


a. 


Na caixa Nome, digite um nome para o grupo de botões de opção. 


Caso você defina os botões de opção para passar parâmetros novamente ao servidor, os parâmetros são associados ao nome. Por 
exemplo, caso você nomeie o grupo myGroup e defina o método de formulário como OBTER (ou seja, você deseja que o formulário 
passe parâmetros de URL, e não parâmetros de formulário quando o usuário clicar no botão de envio), a expressão 
myGroup="CheckedValue" será passada no URL para o servidor. 


. Clique no botão de adição (+) para adicionar um botão de opção ao grupo. Digite um rótulo e um valor marcado para o novo botão. 


c. Clique nas setas para cima ou para baixo a fim de reorganizar os botões. 


d. Para definir um botão de opção específico a ser selecionado quando a página é aberta em um navegador, digite um valor igual ao 


valor do botão de opção na caixa Selecionar valor igual a. 


Digite um valor estático ou especifique um valor dinâmico clicando no ícone de raio ao lado da caixa e selecionando um conjunto de 
registros que contenha possíveis valores marcados. Em ambos os casos, o valor que você especifica deve corresponder ao valor 
marcado de um dos botões de opção do grupo. Para exibir os valores marcados dos botões de opção, selecione cada um dos botões 
e abra seu Inspetor de propriedades (Janela > Propriedades). 


. Selecione o formato no qual você deseja que o Dreamweaver crie o layout dos botões. 


Crie o layout dos botões usando quebras de linha ou uma tabela. Caso você selecione a opção de tabela, o Dreamweaver cria uma 
tabela de coluna única e coloca os botões de opção à esquerda e os rótulos à direita. 


Você também pode definir as propriedades no Inspetor de propriedades ou diretamente na Visualização de código. 


Inserir um grupo de caixas de seleção 
1. Coloque o ponto de inserção dentro do contorno do formulário. 


2. Selecione Inserir > Formulário > Grupo de caixas de seleção. 


3. Complete a caixa de diálogo e clique em OK. 


a. 


Na caixa Nome, digite um nome para o grupo de caixas de seleção. 


Caso você defina as caixas de seleção para passar parâmetros novamente ao servidor, os parâmetros serão associados ao nome. Por 
exemplo, caso você nomeie o grupo myGroup e defina o método de formulário como OBTER (ou seja, você deseja que o formulário 
passe parâmetros de URL, e não parâmetros de formulário quando o usuário clicar no botão de envio), a expressão 
myGroup="CheckedValue" será passada no URL para o servidor. 


. Clique no botão de adição (+) para adicionar uma caixa de seleção ao grupo. Digite um rótulo e um valor marcado para a nova caixa 


de seleção. 


c. Clique nas setas para cima ou para baixo a fim de reorganizar as caixas de seleção. 


d. Para definir uma caixa de seleção específica a ser selecionada quando a página é aberta em um navegador, digite um valor igual ao 


valor da caixa de seleção na caixa Selecionar valor igual a. 


Digite um valor estático ou especifique um valor dinâmico clicando no ícone de raio ao lado da caixa e selecionando um conjunto de 
registros que contenha possíveis valores marcados. Em ambos os casos, o valor que você especifica deve corresponder ao valor 
marcado de uma das caixas de seleção do grupo. Para exibir os valores marcados das caixas de seleção, selecione cada caixa de 
seleção e abra seu Inspetor de propriedades (Janela > Propriedades). 


. Selecione o formato no qual deseja que o Dreamweaver crie o layout das caixas de seleção. 


Crie o layout das caixas de seleção usando quebras de linha ou uma tabela. Caso você selecione a opção de tabela, o Dreamweaver 
cria uma tabela de coluna única e coloca as caixas de seleção à esquerda e os rótulos à direita. 
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Você também pode definir as propriedades no Inspetor de propriedades ou diretamente na Visualização de código. 


E: ps 2 AU Para o início 
Sobre os objetos de formulário dinâmicos ii 


Um objeto de formulário dinâmico é um objeto de formulário cujo estado inicial é determinado pelo servidor quando a página é solicitada no 
servidor, e não pelo designer do formulário durante o design. Por exemplo, quando um usuário solicita uma página do PHP que contém um 
formulário com um menu, um script do PHP na página preenche automaticamente o menu com valores armazenados em um banco de dados. 
Em seguida, o servidor envia a página completada para o navegador do usuário. 


Tornar objetos de formulário dinâmicos pode simplificar a manutenção do site. Por exemplo, muitos sites usam menus para apresentar aos 
usuários um conjunto de opções. Caso o menu seja dinâmico, você pode adicionar, remover ou alterar itens de menu em um único local — a 
tabela do banco de dados em que os itens são armazenados — para atualizar todas as ocorrências do mesmo menu no site. 


E PR | gi sa Para o início 
Inserir ou alterar um menu dinâmico de formulário HTML 


Você pode preencher dinamicamente um menu de formulário em HTML ou menu de lista com entradas de um banco de dados. Na maioria das 
páginas, você pode usar um objeto de menu em HTML. 


Antes de começar, você deve inserir um formulário em HTML em uma página do ColdFusion, PHP ou ASP e definir um conjunto de registros ou 
outra fonte de conteúdo dinâmico para o menu. 
1. Insira um objeto de formulário Lista/menu HTML na página: 
a. Clique em um formulário em HTML na página (Inserir > Formulário > Formulário). 
b. Selecione Inserir > Formulário > Lista/menu para inserir o objeto de formulário. 


2. Siga um destes procedimentos: 


e Selecione o objeto de formulário Lista/menu HTML novo ou já existente e, em seguida, clique no botão Dinâmico no Inspetor de 
propriedades. 


e Selecione Inserir > Objetos de dados > Dados dinâmicos > Lista de seleção dinâmica. 


3. Complete a caixa de diálogo Lista/menu dinâmico e clique em OK. 
a. No menu pop-up Opções do conjunto de registros, selecione o conjunto de registros a ser usado como uma fonte de conteúdo. Você 
também usa esse menu para editar itens de lista/menu estáticos e dinâmicos posteriormente. 


b. Na área Opções estáticas, insira um item padrão na lista ou no menu. Além disso, use essa opção para editar entradas estáticas em 
um objeto de formulário lista/menu depois de adicionar conteúdo dinâmico. 


c. (Opcional) Use os botões de adição (+) e de subtração (-) para adicionar e remover itens na lista. Os itens estão na mesma ordem da 
caixa de diálogo Valores iniciais da lista. O primeiro item da lista é o item selecionado quando a página é carregada em um navegador. 
Use os botões de seta para cima e para baixo a fim de reorganizar os itens na lista. 

d. No menu pop-up Valores, selecione o campo que contém os valores dos itens de menu. 

e. No menu pop-up Rótulos, selecione o campo que contém os rótulos dos itens de menu. 

f. (Opcional) Para especificar que um determinado item de menu é selecionado quando a página é aberta em um navegador ou quando 
um registro é exibido no formulário, digite um valor igual ao valor do item de menu na caixa Selecionar valor igual a. 


Você pode inserir um valor estático ou especificar um valor dinâmico clicando no ícone de raio ao lado da caixa e selecionando um 
valor dinâmico na lista das fontes de dados. Em ambos os casos, o valor especificado deve ser correspondente a um dos valores do 
item de menu. 


PE E 5 P iníci 
Tornar os menus de formulário em HTML dinâmicos oca 


1. Na visualização Design, selecione o objeto de formulário lista/menu. 
2. No Inspetor de propriedades, clique no botão Dinâmico. 


3. Complete a caixa de diálogo e clique em OK. 


Exibir conteúdo dinâmico em campos de texto em HTML cai 


Você pode exibir conteúdo dinâmico em campos de texto HTML quando o formulário é visualizado em um navegador. 


Antes de começar, você deve criar o formulário em uma página do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de 
conteúdo dinâmico para o texto. 


1. Selecione o campo de texto no formulário em HTML na página. 
2. No Inspetor de propriedades, clique no ícone de raio ao lado da caixa Valor inicial para exibir a caixa de diálogo Dados dinâmicos. 


3. Selecione a coluna do conjunto de registros que fornecerá um valor para o campo de texto e, em seguida, clique em OK. 
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Definir as opções da caixa de diálogo Campo de texto dinâmico ii 


1. Selecione o campo de texto a ser tornado dinâmico no menu pop-up Campo de texto. 
2. Clique no ícone de raio ao lado da caixa Definir valor para, selecione uma fonte de dados na lista de fontes e clique em OK. 


A fonte de dados deve conter informações textuais. Caso nenhuma fonte de dados seja exibida na lista ou caso as fontes de dados 
disponíveis não atendam às suas necessidades, clique no botão de adição (+) para definir uma nova. 


Z - E - - m Para o início 
Pré-selecionar dinamicamente uma caixa de seleção em HTML = 


Você pode permitir ao servidor decidir se deve escolher uma caixa de seleção quando o formulário é exibido em um navegador. 


Antes de começar, você deve criar o formulário em uma página do ColdFusion, PHP ou ASP e definir um conjunto de registros ou outra fonte de 
conteúdo dinâmico para as caixas de seleção. O ideal é que a origem de conteúdo contenha dados boolianos como, por exemplo, Sim/Não ou 
verdadeiro/falso. 

1. Escolha um objeto de formulário de caixa de seleção na página. 

2. No Inspetor de propriedades, clique no botão Dinâmico. 

3. Complete a caixa de diálogo Caixa de seleção dinâmica e clique em OK. 


e Clique no ícone de raio ao lado da caixa Marcar se e selecione o arquivo na lista de fontes de dados. 


A fonte de dados deve conter dados Boolianos como, por exemplo, Sim e Não ou verdadeiro e falso. Caso nenhuma fonte de dados 
seja exibida na lista ou caso as fontes de dados disponíveis não atendam às suas necessidades, clique no botão de adição (+) para 
definir uma nova. 


e Na caixa Igual a, digite o valor que o campo deve ter para que a caixa de seleção seja exibida marcada. 


Por exemplo, para que a caixa de seleção seja exibida marcada quando um determinado campo em um registro apresentar um valor 
Sim, digite Sim na caixa Igual a. 


Nota: Esse valor também retorna para o servidor caso o usuário clique no botão Enviar do formulário. 


Z ã E á pá a Para o início 
Pré-selecionar dinamicamente um botão de opção em HTML ea 


Pré-selecione dinamicamente um botão de opção em HTML quando um registro é exibido no formulário em HTML em um navegador. 


Antes de começar, você deve criar o formulário em uma página do ColdFusion, PHP ou ASP e inserir pelo menos um grupo de botões de opção 
em HTML (Inserir > Formulário > Grupo de botões de opção). Você também deve definir um conjunto de registros ou outra origem de conteúdo 
dinâmico para os botões de opção. O ideal é que a origem de conteúdo contenha dados boolianos como, por exemplo, Sim/Não ou 
verdadeiro/falso. 

1. Na visualização Design, selecione um botão de opção no grupo. 

2. No Inspetor de propriedades, clique no botão Dinâmico. 

3. Complete a caixa de diálogo Grupo de botões de opção dinâmico e clique em OK. 


Definir as opções da caixa de diálogo Grupo de botões de opção dinâmico 
1. No menu pop-up Grupo de botões de opção, selecione um formulário e o grupo de botões de opção na página. 


A caixa Valor do botão de opção exibe os valores de todos os botões de opção no grupo. 


2. Selecione um valor a ser pré-selecionado dinamicamente na lista de valores. Esse valor é exibido na caixa Valor. 
3. Clique no ícone de raio ao lado da caixa Selecionar valor igual a e selecione um conjunto de registros que contenha valores marcados para 
os botões de opção no grupo. 


O conjunto de registros que você seleciona contém valores correspondentes aos valores marcados dos botões de opção. Para exibir os 
valores marcados dos botões de opção, selecione cada um dos botões e abra seu Inspetor de propriedades (Janela > Propriedades). 


4. Clique em OK. 


Definir as opções da caixa de diálogo Grupo de botões de opção dinâmico (ColdFusion) 
1. Selecione um grupo de botões de opção e um formulário no menu pop-up Grupo de botões de opção. 
2. Clique no ícone de raio próximo à caixa Selecionar valor igual a. 

3. Complete a caixa de diálogo Dados dinâmicos e clique em OK. 
a. Selecione uma fonte de dados na lista das fontes de dados. 
b. (Opcional) Selecione um formato de dados para o texto. 
c. (Opcional) Modifique o código que o Dreamweaver insere na página para exibir o texto dinâmico. 
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4. Clique em OK para fechar a caixa de diálogo Grupo de botões de opção dinâmico e insira o alocador de espaço de conteúdo dinâmico no 
Grupo de botões de opção. 


Validar dados de formulário em HTML gi cd 


O Dreamweaver pode adicionar código JavaScript que verifica o conteúdo dos campos de texto especificados para assegurar que o usuário 
inseriu o tipo de dados correto. 


Você pode usar widgets de formulário do Spry para criar os formulários e validar o conteúdo dos elementos de formulário especificados. Para 
obter mais informações, consulte os tópicos do Spry listados abaixo. 


Você também pode criar formulários do ColdFusion no Dreamweaver que validam o conteúdo de campos especificados. Para obter mais 
informações, consulte os tópicos do capítulo ColdFusion listados abaixo. 


1. Crie um formulário em HTML que inclua pelo menos um campo de texto e um botão Enviar. 
Verifique se todos os campos de texto que você deseja validar têm um nome exclusivo. 


2. Selecione o botão Enviar. 


3. No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione o comportamento Validar formulário na 
lista. 


4. Defina as regras de validação para cada campo de texto e clique em OK. 
Por exemplo, você pode especificar que um campo de texto referente à idade de uma pessoa aceite apenas números. 


Nota: O comportamento Validar formulário só está disponível caso um campo de texto tenha sido inserido no documento. 


Anexar comportamentos do JavaScript a objetos de formulário em HTML SE 


Você pode anexar comportamentos do JavaScript armazenados no Dreamweaver a objetos de formulário em HTML como, por exemplo, botões. 


1. Selecione o objeto de formulário em HTML. 


2. No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione um comportamento na lista. 


« E a ps P iníci 
Anexar scripts personalizados a botões de formulário em HTML PRA 


Alguns formulários usam JavaScript ou VBScript para realizar o processamento de formulário ou outra ação no cliente, e não o envio dos dados 
do formulário para processamento no servidor. Você pode usar o Dreamweaver para configurar um botão de formulário e executar um 
determinado script do cliente quando usuário clica no botão. 


1. Selecione um botão Enviar em um formulário. 
2. No painel Comportamentos (Janela > Comportamentos), clique no botão de adição (+) e selecione Chamar JavaScript na lista. 
3. Na caixa Chamar JavaScript, digite o nome da função do JavaScript a ser executada quando o usuário clica no botão e clique em OK. 


Por exemplo, você pode digitar o nome de uma função que ainda não existe como, por exemplo, processMyForm(). 
4. Caso a função JavaScript ainda não esteja na seção head do documento, adicione-a agora. 
Por exemplo, você pode definir a seguinte função JavaScript na seção head do documento para exibir uma mensagem quando o usuário 


clica no botão Enviar: 


function processMyForm()( 
alert('Thanks for your order!'); 


. Re a ê E 
Criar formulários HTML acessíveis ara o início 


Ao inserir um objeto de formulário em HTML, você pode tornar o objeto de formulário acessível e alterar os atributos de acessibilidade 
posteriormente. 


Adicionar um objeto de formulário acessível 
1. Na primeira vez em que você adicionar objetos de formulário acessíveis, ative a caixa de diálogo Acessibilidade para objetos de formulário 
(consulte Otimização da área de trabalho para desenvolvimento visual). 


Trata-se de uma etapa única. 


2. No documento, coloque o ponto de inserção onde você deseja que o objeto de formulário seja exibido. 
3. Selecione Inserir > Formulário e selecione um objeto de formulário a ser inserido. 
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A caixa de diálogo Atributos de acesso a tag input é exibida. 


4. Complete a caixa de diálogo e clique em OK. Veja uma lista parcial de opções: 
Nota: O leitor de tela lê o nome que você digita como sendo o atributo Rótulo do objeto. 
ID atribui uma ID ao campo de formulário. Esse valor pode ser usado como referência ao campo do JavaScript; ele também é usado como 
sendo o valor do atributo for caso você escolha a opção Anexar tag label usando nas opções Estilo. 


Dispor ao redor com tag label Envolve o item de formulário com uma tag label da seguinte forma: 


<label> 
<input type="radio" name="radiobutton" value="radiobutton"> 
RadioButtoni</label> 


Anexar tag label usando Usa o atributo for para envolver o item de formulário com uma tag label da seguinte forma: 


<input type="radio" name="radiobutton" value="radiobutton" id="radiobutton"> 
<label for="radiobutton">RadioButton2</label> 


Essa opção faz com que o navegador processe texto associado a uma caixa de seleção e ao botão de opção com um retângulo em foco e 
permite ao usuário marcar a caixa de seleção e o botão de opção clicando em qualquer lugar do texto associado, e não a caixa de seleção 
ou o controle do botão de opção. 


Nota: Essa é a opção preferencial para acessibilidade; no entanto, a funcionalidade pode variar de acordo com o navegador. 
Nenhuma tag label Não usa uma tag label da seguinte forma: 


<input type="radio" name="radiobutton" value="radiobutton"> 
RadioButton3 


Chave de acesso Usa um equivalente do teclado (uma letra) e a tecla Alt (Windows) ou a tecla Control (Macintosh) para selecionar o 
objeto de formulário no navegador. Por exemplo, se você digitasse B como Chave de acesso, os usuários com um navegador Macintosh 
poderiam digitar Control+B para selecionar o objeto de formulário. 


Índice de abas Especifica uma ordem de abas para os objetos de formulário. Caso você defina a ordem de abas para um objeto, você 
deve definir a ordem para todos os objetos. 


A configuração de uma ordem de abas é útil quando você tem outros links e objetos de formulário na página e precisa que o usuário 
percorra eles em uma ordem específica. 


5. Clique em Sim para inserir uma tag form. 
O objeto de formulário é exibido no documento. 


Nota: Se você pressionar Cancelar, o objeto de formulário aparecerá no documento, mas o Dreamweaver não associará tags ou atributos 
de acessibilidade a ela. 


Editar valores de acessibilidade para um objeto de formulário 
1. Na janela Documento, selecione o objeto. 
2. Siga um destes procedimentos: 


e Edite os atributos apropriados na Visualização de código. 
e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) e, em seguida, selecione Editar tag. 


Mais tópicos da Ajuda 
Tutorial sobre criação de formulários 


Tutorial sobre formulários de estilo 


(9) ex-nc-sa ) 


Avisos legais | Política de privacidade on-line 
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Alteração do conteúdo dinâmico 


Sobre o conteúdo dinâmico 

Editar conteúdo dinâmico 

Excluir conteúdo dinâmico 

Testar o conteúdo dinâmico 

Deixar os usuários do Adobe Contribute editarem conteúdo dinâmico 
Modificar conjuntos de registros com o Inspetor de propriedades 


pa DR VM | Para o início 
Sobre o conteúdo dinâmico e 


Você pode alterar o conteúdo dinâmico da página editando o comportamento de servidor que fornece o conteúdo. Por exemplo, você pode editar 
um comportamento de servidor do conjunto de registros para fornecer mais registros à página. 


O conteúdo dinâmico de uma página é listado no painel Comportamentos de servidor. Por exemplo, caso você adicione um conjunto de registros 
à página, o painel Comportamentos de servidor é listado da seguinte forma: 


Recordset (myRecordset) 


Caso você adicione outro conjunto de registros à página, o painel Comportamentos de servidor lista ambos os conjuntos de registros da seguinte 
forma: 


Recordset (mySecondRecordset )JRecordset (myRecordset) 


a E aa = HE 
Editar conteúdo dinâmico ara o início 


1. Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor). 


2. Clique no botão de adição (+) para exibir os comportamentos de servidor e clique duas vezes no comportamento de servidor do painel. 
A caixa de diálogo que você usou para definir a fonte de dados original é exibida. 


3. Faça as alterações na caixa de diálogo e clique em OK. 


À : ad SRACErTer 
Excluir conteúdo dinâmico pride 


*& Depois de adicionar conteúdo dinâmico a uma página, o exclua de uma das seguintes formas: 
* Selecione o conteúdo dinâmico na página e pressione Excluir. 
e Selecione o conteúdo dinâmico no painel Comportamentos de servidor e clique no botão de subtração (-). 


Nota: Essa operação remove o script do servidor na página que recupera o conteúdo dinâmico do banco de dados. Ela não exclui os 
dados do banco de dados. 


o DA a ce Para o início 
Testar o conteúdo dinâmico 


Você pode visualizar e editar conteúdo dinâmico utilizando a Visualização dinâmica. 
Enquanto o conteúdo dinâmico é exibido, você pode realizar as seguintes tarefas: 

e Ajustar O layout da página usando as ferramentas de design da página 

e Adicionar, editar ou excluir conteúdo dinâmico 

e Adicionar, editar ou excluir comportamentos de servidor 


1. Clique no botão Visualização dinâmica para exibir o conteúdo dinâmico 


2. Faça as alterações necessárias na página. É preciso alternar entre Visualização dinâmica e de design ou Visualização de código para fazer 
as alterações e ver como elas foram efetivadas. 


a Ee E = sz ra K P iníci 
Deixar os usuários do Adobe Contribute editarem conteúdo dinâmico op e ope 
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Quando um usuário do Contribute edita uma página com conteúdo dinâmico ou elementos invisíveis (como, por exemplo, scripts e comentários), o 
Contribute exibe o conteúdo dinâmico e os elementos invisíveis como marcadores amarelos. Por padrão, os usuários do Contribute não podem 
selecionar ou excluir esses marcadores. 


Caso queira que os usuários do Contribute possam selecionar e excluir conteúdo dinâmico e outros elementos invisíveis de uma página, você 
pode alterar as configurações do grupo de permissão para permitir isso. Normalmente, os usuários do Contribute jamais podem editar conteúdo 
dinâmico, mesmo quando você permite que eles o selecionem. 


Nota: Usando algumas tecnologias de servidor, você pode exibir texto estático usando uma tag ou uma função do servidor. Para permitir que os 
usuários do Contribute editem o texto estático em uma página dinâmica que usa uma dessas tecnologias de servidor, coloque o texto fora das 
tags de servidor. Para obter mais informações, consulte Administração do Adobe Contribute. 

1. Selecione Site > Administrar o site do Contribute. 


2. Caso determinadas opções obrigatórias para a compatibilidade com o Contribute não estejam ativadas, uma caixa de diálogo é exibida 
perguntando se você deseja ativar essas opções. Clique em OK para ativar essas opções e a compatibilidade com o Contribute. 


3. Se solicitado, insira a senha de administrador e clique em OK. 
A caixa de diálogo Administrar site é exibida. 


. Na categoria Usuários e funções, selecione uma função e clique no botão Editar configurações de função. 
. Selecione a categoria Edição e desmarque a opção para proteger scripts e formulários. 


. Clique em OK para fechar a caixa de diálogo Editar configurações. 


“o q Bs 


. Clique em Fechar para fechar a caixa de diálogo Administrar site. 


Modificar conjuntos de registros com o Inspetor de propriedades RPE 


Use o Inspetor de propriedades para modificar o conjunto de registros selecionado. As opções disponíveis variam de acordo com o modelo do 
servidor. 


1. Abra o Inspetor de propriedades (Janela > Propriedades) e, em seguida, selecione o conjunto de registros no painel Comportamentos de 
servidor (Janela > Comportamento de servidor). 


2. Edite todas as opções. Quando você seleciona uma nova opção no inspetor, o Dreamweaver atualiza a página. 


Mais tópicos da Ajuda 


[E5) ev-nc-sa ] 


Avisos legais | Política de privacidade on-line 
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Criação de páginas de pesquisa e de resultados 


Sobre páginas de pesquisa e de resultados 

Criar a página de pesquisa 

Criar uma página de resultados básica 

Criar uma página de resultados avançada 

Exibir os resultados da pesquisa 

Criar uma página detalhada para uma página de resultados 
Crie um link para abrir uma página relacionada (ASP) 


Para o início 


Sobre páginas de pesquisa e de resultados 


Você pode usar o Dreamweaver para criar um conjunto de páginas e permitir que os usuários pesquisem o banco de dados e vejam os 
resultados da pesquisa. 


Na maior parte dos casos, você precisa de pelo menos duas páginas para adicionar esse recurso ao aplicativo da Web. A primeira página contém 
um formulário em HTML no qual os usuários inserem os parâmetros de pesquisa. Embora não realize nenhuma pesquisa efetiva, essa página é 
conhecida como página de pesquisa. 


A segunda página de que você precisa é a de resultados, que realiza grande parte do trabalho. A página de resultados realiza as seguintes 
tarefas: 


e Lê os parâmetros de pesquisa enviados pela página de pesquisa 
e Conecta-se ao banco de dados e procura os registros 

e Cria um conjunto usando os registros encontrados 

e Exibe o conteúdo do conjunto de registros 


Você também pode adicionar uma página detalhada. Uma página detalhada dá aos usuários mais informações sobre um determinado 
registro da página de resultados. 


Caso você tenha apenas um parâmetro de pesquisa, o Dreamweaver lhe permite adicionar recursos de pesquisa ao aplicativo da Web sem 
usar consultas e variáveis SQL. Basta criar as páginas e completar algumas caixas de diálogo. Caso tenha mais de um parâmetro de 
pesquisa, você precisa escrever uma instrução SQL e definir muitas variáveis para ela. 


O Dreamweaver insere a consulta SQL na página. Quando a página é executada no servidor, todos os registros na tabela do banco de 
dados são verificados. Caso o campo especificado em um registro atenda às condições da consulta SQL, o registro é incluído em um 
conjunto de registros. A consulta SQL ativa cria um conjunto de registros contendo apenas os resultados da pesquisa. 


Por exemplo, a equipe de vendas em campo pode ter informações sobre clientes de uma determinada área cujas rendas são superiores a 
um determinado nível. Em um formulário de uma página de pesquisa, o associado de vendas insere uma área geográfica e um nível de 
receita mínimo e, em seguida, clica no botão Enviar para enviar os dois valores a um servidor. No servidor, os valores são passados para a 
instrução SQL da página de resultados, que cria um conjunto de registros contendo apenas os clientes da área especificada cujas receitas 
estejam acima do nível especificado. 


Para o início 


Criar a página de pesquisa 


Uma página de pesquisa na Web normalmente contém campos de formulário nos quais o usuário insere os parâmetros de pesquisa. A página de 
pesquisa deve ter, no mínimo, um formulário em HTML com um botão Enviar. 


Para adicionar um formulário em HTML a uma página de pesquisa, conclua o seguinte procedimento. 
1. Abra a página de pesquisa ou uma nova página e selecione Inserir > Formulário > Formulário. 


É criado um formulário vazio na página. Você talvez precise ativar os Elementos invisíveis (Exibir > Auxílios visuais > Elementos invisíveis) 
para ver os limites do formulário, representados por linhas finas em vermelho. 


2. Adicione objetos de formulário para que os usuários insiram os parâmetros de pesquisa selecionando Formulário no menu Inserir. 


Entre os objetos de formulário estão campos de texto, menus, opções e botões de opção. Você pode adicionar quantos objetos de 
formulário quiser para ajudar os usuários a refinar suas pesquisas. No entanto, lembre-se de que quanto maior for o número de parâmetros 
na página de pesquisa, mais complexa será a instrução SQL. 


3. Adicione um botão Enviar ao formulário (Inserir > Formulário > Botão). 


4. (Opcional) Altere o rótulo do botão Enviar selecionando o botão, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo um 
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novo valor na caixa Valor. 


Em seguida, você informará ao formulário para onde enviar os parâmetros de pesquisa quando o usuário clica no botão Enviar. 


5. Escolha o formulário selecionando a tag <form> no seletor de tags na parte inferior da janela Documento, como mostra a seguinte imagem: 


6. Na caixa Ação do Inspetor de propriedades do formulário, digite o nome de arquivo da página de resultados que realizará a pesquisa no 
banco de dados. 


7. No menu pop-up Método, selecione um dos seguintes métodos para determinar como o formulário envia os dados para o servidor: 


* OBTER envia os dados do formulário anexando-os ao URL como uma sequência de caracteres de consulta. Como os URLs estão 
limitados a 8.192 caracteres, não use o método OBTER com formulários longos. 


* POSTAR envia os dados do formulário no corpo de uma mensagem. 
e Padrão usa o método padrão do navegador (normalmente, OBTER). 


A página de pesquisa está pronta. 


E Sos gua P, iníci 
Criar uma página de resultados básica SER 


Quando o usuário clica no botão Pesquisar do formulário, os parâmetros de pesquisa são enviados para uma página de resultados no servidor. A 
página de resultados no servidor, e não a página de pesquisa no navegador, é a responsável por recuperar os registros do banco de dados. Caso 
a página de pesquisa envie um parâmetro de pesquisa único para o servidor, você pode criar a página de resultados sem consultas e variáveis 


SQL. Você cria um conjunto de registros básico com um filtro que exclui os registros que não atendam ao parâmetro de pesquisa enviado pela 
página de pesquisa. 


Nota: Caso tenha mais de uma condição de pesquisa, você deve usar a caixa de diálogo avançada Conjunto de registros para definir o conjunto 
de registros (consulte Criar uma página de resultados avançada). 
Criar o conjunto de registros para manter os resultados de pesquisa 
1. Abra a página de resultados na janela Documento. 
Caso você ainda não tenha uma página de resultados, crie uma página dinâmica em branco (Arquivo > Novo > Página em branco). 


2. Crie um conjunto de registros abrindo o painel Ligações (Janela > Ligações), clicando no botão de adição (+) e selecionando Conjunto de 
registros no menu pop-up. 


3. Verifique se a caixa de diálogo simples Conjunto de registros é exibida. 


Conjunto de registros 


Nome: | Recordseti OK 


Conexão: |Nenhumia) Cancelar 


Tabela: Testar 


Colunas: () tudo O selecionado: Avançado... 


Filtro: Nenhuma) 


Parâmetro de URL 


Nenhuma) Crescente 


Mas caso seja exibida a caixa de diálogo avançada, alterne para a caixa de diálogo simples clicando no botão Simples. 


4. Digite um nome para o conjunto de registros e selecione uma conexão. 
A conexão deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usuário. 


5. No menu pop-up Tabela, selecione a tabela a ser procurada no banco de dados. 
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Nota: Em uma pesquisa com parâmetro único, você pode procurar registros em apenas uma tabela. Para pesquisar mais de uma tabela 
simultaneamente, você deve usar a caixa de diálogo avançada Conjunto de registros e definir uma consulta SQL. 


6. Para incluir apenas algumas das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as colunas desejadas 
clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista. 


Você deve incluir apenas as colunas que contenham as informações a serem exibidas na página de resultados. 


Saia da caixa de diálogo Conjunto de registros por enquanto. Você a usará para recuperar os parâmetros enviados pela página de 
pesquisa e criar um filtro do conjunto de registros a fim de excluir os registros que não atendam aos parâmetros. 


Criar o filtro do conjunto de registros 
1. No primeiro menu pop-up na área Filtro, selecione uma coluna da tabela do banco de dados na qual procurar uma correspondência. 


Por exemplo, caso o valor enviado pela página de pesquisa seja o nome de uma cidade, selecione a coluna da tabela que contém nomes 
de cidades. 


2. No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (ele deve ser o padrão). 


3. No terceiro menu pop-up, selecione Variável de formulário caso o formulário na página de pesquisa use o método POSTAR ou Parâmetro 
de URL caso ele use o método OBTER. 


A página de pesquisa usa uma variável de formulário ou um parâmetro de URL a fim de passar informações para a página de resultados. 
4. Na quarta caixa, digite o nome do objeto de formulário que aceita o parâmetro de pesquisa na página de pesquisa. 


O nome do objeto é duplicado como o nome da variável de formulário ou do parâmetro de URL. Você pode obter o nome alternando para a 
página de pesquisa, clicando no objeto de formulário no formulário para selecioná-lo e verificando o nome do objeto no Inspetor de 
propriedades. 


Por exemplo, suponhamos que você queira criar um conjunto de registros que inclua apenas viagens de aventura para um país específico. 
Vamos pressupor que haja uma coluna na tabela chamada TRIPLOCATION. Além disso, suponhamos que o formulário em HTML na 
página de pesquisa use o método OBTER e contenha um objeto de menu chamado Location que exibe uma lista dos países. O seguinte 
exemplo mostra como a seção Filtro deve ficar: 


Filtre: [TRIPLOCATION =] = rd 
[urL Parametresi =] [Location 


5. (Opcional) Clique em Testar, digite um valor de teste e clique em OK para se conectar ao banco de dados e criar uma ocorrência do 
conjunto de registros. 


O valor de teste simula o valor que retornaria da página de pesquisa. Clique em OK para fechar o conjunto de registros de teste. 
6. Caso você esteja satisfeito com o conjunto de registros, clique em OK. 


Um script do servidor é inserido na página que verifica todos os registros na tabela do banco de dados quando executada no servidor. Caso 
o campo especificado em um registro atenda à condição de filtragem, o registro é incluído em um conjunto de registros. O script cria um 
conjunto de registros contendo apenas os resultados da pesquisa. 


A próxima etapa é exibir o conjunto de registros na página de resultados. Para obter mais informações, consulte Exibir os resultados da 
pesquisa. 


7 Bos P, iníci 
Criar uma página de resultados avançada iii 


Caso a página de pesquisa envie mais de um parâmetro de pesquisa ao servidor, você deve escrever uma consulta SQL para a página de 
resultados e usar os parâmetros de pesquisa em variáveis SQL. 


Nota: Caso tenha apenas uma condição de pesquisa, você pode usar a caixa de diálogo simples Conjunto de registros para definir o conjunto 
de registros (consulte Criar uma página de resultados básica). 
1. Abra a página de resultados no Dreamweaver e, em seguida, crie um conjunto de registros abrindo o painel Ligações (Janela > Ligações), 
clicando no botão de adição (+) e selecionando Conjunto de registros no menu pop-up. 


2. Verifique se a caixa de diálogo avançada Conjunto de registros é exibida. 


A caixa de diálogo avançada tem uma área de texto para inserir instruções SQL. Mas caso seja exibida a caixa de diálogo simples, alterne 
para a caixa de diálogo avançada clicando no botão Avançado. 


3. Digite um nome para o conjunto de registros e selecione uma conexão. 
A conexão deve ser com um banco de dados que contenha os dados a serem pesquisados pelo usuário. 
4. Insira uma instrução Select na área de texto SQL. 


Verifique se a instrução inclui uma cláusula WHERE com variáveis que mantêm os parâmetros de pesquisa. No seguinte exemplo, as 
variáveis são cnamadas varLastName e varDept: 


600 


SELECT EMPLOYEEID, FIRSTNAME, LASTNAME, DEPARTMENT, EXTENSION FROM EMPLOYEE + 
WHERE LASTNAME LIKE 'varLastName' + 
AND DEPARTMENT LIKE 'varDept' 


Para reduzir o trabalho de digitação, você pode usar os três itens de banco de dados na parte inferior da caixa de diálogo avançada 
Conjunto de registros. Para obter instruções, consulte Definir um conjunto de registros avançado escrevendo em SQL. 


Para obter ajuda sobre a sintaxe SQL, consulte o SQL primer em www.adobe.com/go/learn dw salprimer br. 


5. Atribua às variáveis SQL os valores dos parâmetros de pesquisa clicando no botão de adição (+) na área Variáveis e digitando o nome da 
variável, o valor padrão (o valor que a variável deve assumir caso não retorne nenhum valor de runtime) e o valor de runtime (normalmente 
um objeto de servidor que mantém um valor enviado por um navegador como, por exemplo, uma variável de solicitação). 


No seguinte exemplo em ASP, o formulário em HTML na página de pesquisa usa o método OBTER e contém um campo de texto chamado 
LastName e outro chamado Department: 


Variáveis: [+)/—] 


varLastName Request QueryString("LastN ame") 
Request QueryString(" Department") 


No ColdFusion, os valores de runtime seriam 4LastName* e &Department&. No PHP, os valores de runtime devem ser 
& REQUEST["LastName"] e $& REQUEST["Department']. 


6. (Opcional) Clique em Testar para criar uma ocorrência do conjunto de registros usando os valores de variável padrão. 

Os valores padrão simulam os valores que retornariam da página de pesquisa. Clique em OK para fechar o conjunto de registros de teste. 
7. Caso você esteja satisfeito com o conjunto de registros, clique em OK. 

A consulta SQL é inserida na página. 


A próxima etapa é exibir o conjunto de registros na página de resultados. 


Rss ' Para o início 
Exibir os resultados da pesquisa 
Depois de criar um conjunto de registros para manter os resultados da pesquisa, você deve exibir as informações na página de resultados. Exibir 
os registros pode ser uma simples questão de arrastar colunas individuais do painel Ligações para a página de resultados. Você pode adicionar 
links de navegação para avançar e retornar o conjunto de registros, ou criar uma região repetitiva para exibir mais de um registro na página. Você 
também pode adicionar links a uma página detalhada. 


Para obter mais informações sobre métodos de exibição do conteúdo dinâmico em uma página que não seja o de exibição dos resultados em 
uma tabela dinâmica, consulte Exibição de registros de banco de dados. 


1. Coloque o ponto de inserção onde você deseja que a tabela dinâmica seja exibida na página de resultados e selecione Inserir > Objetos de 
dados > Dados dinâmicos > Tabela dinâmica. 

2. Complete a caixa de diálogo Tabela dinâmica, selecionando o conjunto de registros definido por você para manter os resultados de 
pesquisa. 

3. Clique em OK. Uma tabela dinâmica que exibe resultados de pesquisa é inserida na página de resultados. 


p gs gue P iníci 
Criar uma página detalhada para uma página de resultados dei 
O conjunto de páginas de pesquisa e de resultados pode incluir uma página detalhada para exibir mais informações sobre registros específicos 
da página de resultados. Nessa situação, a página de resultados também é duplicada como página mestre em um conjunto de páginas 
mestre/detalhadas. 


Crie um link para abrir uma página relacionada (ASP) idea 


Você pode criar um link que abre uma página relacionada e passa parâmetros existentes para essa página. O comportamento do servidor só está 
disponível quando se usa o modelo de servidor ASP. 


Antes de adicionar um comportamento de servidor Ir para página relacionada a uma página, verifique se ela recebe parâmetros de formulário ou 
URL de outra página. A função do comportamento de servidor é passar esses parâmetros para uma terceira página. Por exemplo, você pode 
passar os parâmetros de pesquisa recebidos por uma página de resultados para outra página e evitar que o usuário digite novamente esses 
parâmetros. 


Além disso, você pode selecionar um texto ou uma imagem da página para servir como o link para a página relacionada ou posicionar o ponteiro 
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na página sem selecionar nada, e o texto do link é inserido. 
1. Na caixa Ir para página relacionada, clique em Procurar e localize o arquivo da página relacionada. 
Caso a página atual envie dados para ela própria, digite o nome do arquivo da página atual. 


2. Caso os parâmetros que você deseja passar tenham sido recebidos diretamente de um formulário em HTML usando o método OBTER ou 
estejam listados no URL da página, selecione a opção Parâmetros de URL. 

3. Caso os parâmetros que você deseja passar tenham sido recebidos diretamente de um formulário em HTML usando o método POSTAR, 
selecione a opção Parâmetros de formulário. 


4. Clique em OK. 


Quando o novo link é clicado, a página passa os parâmetros para a página relacionada usando uma sequência de caracteres de consulta. 


Mais tópicos da Ajuda 


(69) ex-ne-sa ] 


Avisos legais | Política de privacidade on-line 
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Criação de páginas com objetos de manipulação de dados 
avançados (ColdFusion, ASP) (CS6) 


Sobre os objetos de comando do ASP 

Usar comandos do ASP para modificar um banco de dados 
Sobre os procedimentos armazenados 

Adicionar um procedimento armazenado (ColdFusion) (CS6) 
Executar um procedimento armazenado (ASP) (CS6) 


5 Para o início 
Sobre os objetos de comando do ASP 
Um objeto de comando do ASP é um objeto de servidor que realiza uma determinada operação em um banco de dados. O objeto pode conter 
qualquer instrução SQL válida, inclusive uma que retorna um conjunto de registros ou outra que insere, atualiza ou exclui registros em um banco 
de dados. Um objeto de comando pode alterar a estrutura de um banco de dados caso a instrução SQL adicione ou exclua uma coluna em uma 
tabela. Você também pode usar um objeto de comando para executar um procedimento armazenado em um banco de dados. 


Um objeto de comando pode ser reutilizável no sentido de que o servidor de aplicativo pode reutilizar uma versão compilada exclusiva do objeto 
para executar o comando várias vezes. Você torna um comando reutilizável definindo a propriedade Preparado do objeto Comando como true, 
como na seguinte instrução VBScript: 


mycommand.Prepared = true 


Se você souber que o comando será executado mais de uma vez, ter uma versão compilada exclusiva do objeto pode tornar as operações do 
banco de dados mais eficiente. 

Nota: Nem todos os fornecedores de bancos de dados dão suporte a comandos preparados. Caso o banco de dados não dê suporte, ele pode 
retornar um erro quando você define essa propriedade como true. Ele pode até mesmo ignorar a solicitação para preparar o comando e definir a 
propriedade Preparado como false. 

Um objeto de comando é criado por scripts em uma página em ASP, mas o Dreamweaver lhe permite criar objetos de comando sem escrever 
uma linha de código ASP. 


Para o início 


Usar comandos do ASP para modificar um banco de dados 


Você pode usar o Dreamweaver para criar objetos de comando do ASP que inserem, atualizam ou excluem registros em um banco de dados. 
Você fornece o objeto de comando com a instrução SQL ou o procedimento armazenado que realiza a operação no banco de dados. 

1. No Dreamweaver, abra a página do ASP que executará o comando. 

2. Abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Comando. 


3. Digite um nome para o comando, selecione uma conexão com o banco de dados que contenha os registros que você deseja editar e 
selecione a operação de edição que o comando deve realizar — Inserir, Atualizar ou Excluir. 


O Dreamweaver inicia a instrução SQL com base no tipo de operação selecionado por você. Por exemplo, caso você selecione Inserir, a 
caixa de diálogo é semelhante à seguinte: 


Nome: | Commandi | Conexão: | Nenhum(a) | | 
inserir e] [] Retornar conjunto de registros nomeado: Testa 


SQL: [INSERT INTO () 
VALUES () 


Tipo: 


4. Conclua a instrução SQL. 
Para obter informações sobre a escrita de instruções SQL que modificam bancos de dados, consulte um manual de Transact-SQL. 


5. Use a área Variáveis para definir todas as variáveis SQL. Forneça o nome e o valor de runtime. A especificação do tipo e tamanho de cada 
variável impede ataques de injeção. 


O seguinte exemplo mostra uma instrução Inserir que contém três variáveis SQL. Os valores dessas variáveis são fornecidos por 
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parâmetros de URL passados para a página, conforme a definição na coluna Valor de runtime da área Variáveis. 


Nome: | Command Conexão: Nenhum(a) ” 


Tio: Inserir v D] Retornar conjunto de registros nomeado: | 


SQL: INSERT INTO LOCATIONS (CITY, ADORESS, PHONE ) 
VALUES (varCity,'var Address, varPhone') 


Variáveis: +] =] 
Tipo Valor de runbme 


| varOty VarWChar so Request.QueryStrrg('tecity”? 
| varAdoress VarWChar 100 Request. QueryString(tixtaddress” 
| vasPhone VarWChar 20 Request.QueryString('tetPhone” 


Para obter o valor Tamanho, use o painel Bancos de dados do Dreamweaver. Localize o banco de dados no painel Banco de dados e o 
expanda. Em seguida, localize a tabela na qual você está trabalhando e a expanda. A tabela lista os tamanhos dos campos. Por exemplo, 
ela pode informar ADDRESS (WChar 50). Nesse exemplo, 50 é o tamanho. Você também pode localizar o tamanho no aplicativo de banco 
de dados. 


Nota: Os tipos de dados Numérico, Booliano e Data/hora sempre usam -1 como tamanho. 


Para determinar o valor Tipo, consulte a seguinte tabela: 


Tipo no banco de dados Tipo no Dreamweaver Tamanho 
Numérico (MS Access, MS SQL Server, Duplo -1 
MySQL) 

Booliano, Sim/não (MS Access, MS Duplo -1 


SQL Server, MySQL) 


Data/hora (MS Access, MS SQL Server, DBTimeStamp -1 
MySQL) 
Todos os demais tipos de campo de LongVarChar verificar tabela do banco de dados 


texto, inclusive os tipos de dados de 
texto do MySQL char, varchar e longtext 


text (MS Access) ou nvarchar, nchar VarWChar verificar tabela do banco de dados 
(MS SQL Server) 


memo (MS Access), ntext (MS SQL LongVarWChar 1073741823 
Server) ou campos que dão suporte a 
grandes quantidades de texto 


Para obter mais informações sobre o tipo e o tamanho das variáveis SQL, consulte www.adobe.com/go/4e6b330a br. 
6. Feche a caixa de diálogo. 


O Dreamweaver insere o código ASP na página que, quando executada no servidor, cria um comando que insere, atualiza ou exclui 
registros no banco de dados. 


Por padrão, o código define a propriedade Preparado do objeto Comando como true, o que faz o servidor de aplicativo reutilizar uma versão 
compilada exclusiva do objeto sempre que o comando é executado. Para mudar essa configuração, alterne para a Visualização de código e 
altere a propriedade Preparado para false. 


7. Crie uma página com um formulário em HTML para que os usuários possam inserir dados de registro. No formulário em HTML, inclua três 
campos de texto (txtCity, txtAddress e txtPhone) e um botão de envio. O formulário usa o método OBTER e envia os valores do campo de 
texto para a página que contém o comando. 


EPT 
Sobre os procedimentos armazenados ENA 


Embora seja possível usar comportamentos de servidor para criar páginas que modificam bancos de dados, você também pode usar objetos de 
manipulação de banco de dados como, por exemplo, procedimentos armazenados ou objetos de comando do ASP na criação das páginas. 
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Um procedimento armazenado é um banco de dados reutilizável que realiza algumas operações no banco de dados. Um procedimento 
armazenado contém um código SQL que pode, dentre outras coisas, inserir, atualizar ou excluir registros. Os procedimentos armazenados 
também podem alterar a estrutura do banco de dados propriamente dito. Por exemplo, você pode usar um procedimento armazenado para 
adicionar uma coluna de tabela ou até mesmo excluir uma tabela. 


Um procedimento armazenado também pode chamar outro procedimento armazenado, bem como aceitar parâmetros de entrada e retornar vários 
valores para o procedimento de chamada na forma de parâmetros de saída. 


Um procedimento armazenado é reutilizável no sentido de que você pode reutilizar uma versão compilada exclusiva do procedimento para 
executar uma operação de banco de dados várias vezes. Se você souber que uma tarefa de banco de dados será executada mais de uma vez — 
ou que a mesma tarefa será executada por aplicativos diferentes — usar um procedimento armazenado na execução dessa tarefa pode tornar as 
operações do banco de dados mais eficientes. 


Nota: Os bancos de dados MySQL e Microsoft Access não dão suporte a procedimentos armazenados. 


Adicionar um procedimento armazenado (ColdFusion) (CS6) e Pe 


Você pode usar um procedimento armazenado para modificar um banco de dados. Um procedimento armazenado é um banco de dados 
reutilizável que realiza algumas operações no banco de dados. 


Para que você use um procedimento armazenado e modifique um banco de dados, verifique se o procedimento contém o SQL que modifica o 
banco de dados de alguma forma. Para criar e armazenar um no banco de dados, consulte a documentação do banco de dados e um bom 
manual de Transact-SQL. 

No Dreamweaver, abra a página que executará o procedimento armazenado. 

No painel Ligações (Janela > Ligações), clique no botão de adição (+) e selecione Procedimento armazenado. 

No menu pop-up Fonte de dados, selecione uma conexão com o banco de dados que contém o procedimento armazenado. 


Digite o nome de usuário e a senha da fonte de dados do ColdFusion. 
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Selecione um procedimento armazenado no menu pop-up Procedimentos. 
O Dreamweaver preenche automaticamente todos os parâmetros. 
6. Selecione um parâmetro e clique em Editar caso tenha que fazer alterações. 


A caixa de diálogo Editar variável do procedimento armazenado é exibida. O nome da variável que você está editando é exibido na caixa 
Nome. 
Nota: Você deve inserir valores de teste para todos os procedimentos de entrada do procedimento armazenado. 


7. Faça as alterações conforme necessário: 
e Selecione uma Direção no menu pop-up. Um procedimento armazenado pode ter valores de entrada, valores de saída ou ambos. 
e Selecione um tipo de SQL no menu pop-up. Insira uma variável de retorno, um valor de runtime e um valor de teste. 


8. Caso o procedimento armazenado use um parâmetro, clique no botão de adição (+) para adicionar um parâmetro de página. 
Nota: Você deve inserir parâmetros de página correspondentes para cada valor de retorno do parâmetro de procedimento armazenado. 
Não adicione parâmetros de página a menos que haja um valor de retorno correspondente. 


Clique novamente no botão de adição (+) para adicionar outro parâmetro de página, se necessário. 


9. Selecione um parâmetro de página e clique no botão de subtração (-) para excluí-lo se necessário ou clique em Editar para fazer as 
alterações no parâmetro. 


10. Selecione a opção Retornar conjunto de registros nomeado e, em seguida, digite um nome para o conjunto de registros; caso o 
procedimento armazenado retorne um conjunto de registros, clique no botão Testar para ver o conjunto retornado pelo procedimento 
armazenado. 


O Dreamweaver executa o procedimento armazenado e exibe o conjunto de registros, se necessário. 


Nota: Caso o procedimento armazenado retorne um conjunto de registros e use parâmetros, você deve inserir um valor na coluna Valor 
padrão da caixa Variáveis para testar o procedimento armazenado. 
Você pode usar valores de teste diferentes para gerar conjuntos de registros diferentes. Para alterar os valores de teste, clique no botão 
Editar em Parâmetro e altere o valor de teste, ou clique no botão Editar em Parâmetros de página e altere o valor padrão. 


11. Selecione a opção Retorna código de status nomeado, digite um nome para o código de status, caso o procedimento armazenado retorne 
um valor de retorno do código de status. Clique em OK. 


Depois que você fecha a caixa, o Dreamweaver insere o código do ColdFusion na página que chama um procedimento armazenado no 
banco de dados, quando o código é executado no servidor. Por sua vez, o procedimento armazenado realiza uma operação no banco de 
dados como, por exemplo, inserir um registro. 


Caso o procedimento armazenado use parâmetros, você pode criar uma página que coleta os valores de parâmetro os envia para a página 
com o procedimento armazenado. Por exemplo, você pode criar uma página que usa parâmetros de URL ou um formulário em HTML para 
coletar valores de parâmetro dos usuários. 
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Para o início 


Executar um procedimento armazenado (ASP) (CS6) 


Com páginas em ASP, você deve adicionar um objeto de comando a uma página para executar um procedimento armazenado. Para obter mais 
informações sobre objetos de comando, consulte Sobre os objetos de comando do ASP. 


Í. 
2. 


No Dreamweaver, abra a página que executará o procedimento armazenado. 
No painel Ligações (Janela > Ligações), clique no botão de adição (+) e selecione Comando (procedimento armazenado). 


A caixa de diálogo Comando é exibida. 


. Digite um nome para o comando, selecione uma conexão com o banco de dados que contém o procedimento armazenado e escolha 


Procedimento armazenado no menu pop-up Tipo. 


. Selecione o procedimento armazenado expandindo a ramificação Procedimentos armazenados na caixa Itens do banco de dados, 


selecionando o procedimento armazenado na lista e clicando no botão Procedimento. 


. Insira todos os parâmetros obrigatórios na tabela Variáveis. 


Você não precisa inserir parâmetros para nenhuma variável RETURN VALUE. 


. Clique em OK. 


Depois que você fecha a caixa de diálogo, o código do ASP é inserido na página. Quando o código é executado no servidor, o código cria 
um objeto de comando que executa um procedimento armazenado no banco de dados. Por sua vez, o procedimento armazenado realiza 
uma operação no banco de dados como, por exemplo, inserir um registro. 


Por padrão, o código define a propriedade Preparado do objeto Comando como true, o que faz o servidor de aplicativo reutilizar uma versão 
compilada exclusiva do objeto sempre que o procedimento armazenado é executado. Se você souber que o comando será executado mais 
de uma vez, ter uma versão compilada exclusiva do objeto pode aumentar a eficiência das operações do banco de dados. No entanto, se o 
comando for executado apenas uma ou duas vezes, usá-lo pode, na verdade, retardar o aplicativo da Web porque o sistema tem de parar 
para compilar o comando. Para mudar a configuração, alterne para a Visualização de código e altere a propriedade Preparado para false. 


Nota: Nem todos os fornecedores de bancos de dados dão suporte a comandos preparados. Caso o banco de dados não dê suporte a 
ele, você talvez receba uma mensagem de erro ao executar a página. Alterne para a Visualização de código e altere a propriedade 
Preparado para false. 


Caso o procedimento armazenado use parâmetros, você pode criar uma página que coleta os valores de parâmetro os envia para a página 
com o procedimento armazenado. Por exemplo, você pode criar uma página que usa parâmetros de URL ou um formulário em HTML para 
coletar valores de parâmetro dos usuários. 


Mais tópicos da Ajuda 


[5 ex-nc-sa ) 
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Criação de páginas mestre e detalhadas 


Sobre páginas mestre e detalhadas 

Criar uma página mestre 

Criar links para a página detalhada 

Localizar e exibir o registro solicitado na página detalhada 
Localize um registro específico e exiba-o em uma página (ASP) 
Criar páginas mestre e detalhadas em uma operação 


Sobre páginas mestre e detalhadas 


Para o início 


Páginas mestre e detalhadas são conjuntos de páginas usados para organizar e exibir dados de um conjunto de registros. Essas páginas 
fornecem ao visitante do site tanto uma visão geral quanto uma visão detalhada. A página mestre lista todos os registros e contém links para as 


páginas detalhadas que exibem informações adicionais sobre cada registro. 


À Baghksiz Belge - Microsoft Internet Explorer 


Arquivo Editar Exibir Favoritos Ferramentas Ajuda 


: Endereço a http://localhost/GlobalPHP/locationDetail. php?recordID=CBR 


The International Car Rental Specialists fal 
. 
Gl-bal 


Rental Locations 


Location Name City State or Country 


Itimore- hington International Baltimore MD 


[Cairo International Airport Cairo Egypt 
Canbera Canberra Australia 
Ed] ICaims Queensland 
[Cape Town Airport o Cape Town South Africa 
Afonso Pena Curitiba Brazil 
Aeropuerto Int| De Cozumel Cozumel Mexico 
Denver International Denver 


Dallas Ft Worth International Dallas/Ft Worth Tx 
lEze Buenos Aires Argentina 


& http: flocalhost/GlobalPHP/locationDetail, php?recordID=CBR | “) Local intranet 
Página mestre 
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À Bashksiz Belge - Microsoft Internet Explorer 
Arquivo Editar Exibir Favoritos Ferramentas Ajuda 
: Endereço a http: /flocalhost/GlobalPHP/locationDetad. php?recordID=CER 


| Canberra 
Canberra Airport 
Canberra 


Australia 


| 02 62496211 


02 62496212 


Página detalhada 


Você pode criar páginas mestre e detalhadas inserindo um objeto de dados para criar uma página mestre e uma página detalhada em uma 
operação ou usando comportamentos de servidor para criá-las de maneira mais personalizada. Ao usar comportamentos de servidor para criar 
páginas mestre e detalhadas, você cria inicialmente uma página mestre para listar os registros e, em seguida, adiciona links da lista às páginas 
detalhadas. 


. E um Para o início 
Criar uma página mestre 


Antes de começar, verifique se você definiu uma conexão de banco de dados para o site. 


1. Para criar uma página em branco, selecione Arquivo > Novo > Página em branco, escolha um tipo de página e clique em Criar. Essa se 
torna a página mestre. 
2. Defina um conjunto de registros. 


No painel Ligações (Janelas > Ligações), clique no botão de adição (+), selecione Conjunto de registros e escolha as opções. Caso você 
queira escrever sua própria instrução SQL, clique em Avançado. 


Verifique se o conjunto de registros contém todas as colunas da tabela necessárias à criação da página mestre. O conjunto de registros 
também deve incluir a coluna da tabela que contém a chave exclusiva de cada registro, ou seja, a coluna ID do registro. No seguinte 
exemplo, a coluna Código contém a chave exclusiva de todos os registros. 


Conjunto de registros 


Nome; | rsLocations 


é connGlobal 


Tabela: LOCATIONS 
Colunas: (D) Tudo (?) Selecionado: 


Filtro; Nenhum(a) 


Parametro de URL | 


Ordenar: | Nenhum(a) v| Crescente 


Colunas do conjunto de registros selecionadas para uma página mestre 


Normalmente, o conjunto de registros da página mestre extrai algumas colunas da tabela de um banco de dados, ao passo que o conjunto 
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de registros da página detalhada extrai mais colunas da mesma tabela para fornecer detalhes adicionais. 


O conjunto de registros pode ser definido pelo usuário durante o runtime. Para obter mais informações, consulte Criação de páginas de 
pesquisa e de resultados. 


3. Insira uma tabela dinâmica para exibir os registros. 


Coloque o ponto de inserção onde você deseja que a tabela dinâmica seja exibida na página. Selecione Inserir > Objetos de dados > 
Dados dinâmicos > Tabela dinâmica, defina as opções e clique em OK. 


Caso não queira mostrar as IDs de registro aos usuários, você pode excluir a coluna da tabela dinâmica. Clique em qualquer lugar da 
página a fim de mover o foco para a página. Mova o cursor próximo à parte superior da coluna na tabela dinâmica até que as células da 
coluna estejam contornadas em vermelho e, em seguida, marque a coluna. Pressione Excluir para excluir a coluna da tabela. 


Para o início 


Criar links para a página detalhada 


Depois de criar a página mestre e adicionar o conjunto de registros, você cria links que abrem a página detalhada. Em seguida, você modifica os 
links para passar as IDs dos registros selecionados pelo usuário. A página detalhada usa essa ID para localizar o registro solicitado no banco de 
dados e exibi-lo. 


Nota: Você cria links para atualizar páginas usando o mesmo processo. A página de resultados é semelhante a uma página mestre, e a página 
de atualização é semelhante à página detalhada. 


Abrir a página detalhada e passar a ID de um registro (ColdFusion, PHP) 
1. Na tabela dinâmica, selecione o alocador de espaço de conteúdo do texto que funcionará como um link. 


Rental Locations 


, 
” >> >>> a 


pr BaION NAME CITY (TELEPHONE | 


Links aplicados ao alocador de espaço selecionado. 
2. No Inspetor de propriedades, clique no ícone da pasta ao lado da caixa Link. 
3. Procure e selecione a página detalhada. A página detalhada é exibida na caixa Link do Inspetor de propriedades. 


Na tabela dinâmica, o texto selecionado é exibido com o link. Quando a página é executada no servidor, o link é aplicado ao texto em todas 
as linhas da tabela. 


4. Na página mestre, selecione o link na tabela dinâmica. 
5. (ColdFusion) Na caixa Link do Inspetor de propriedades, adicione esta sequência de caracteres ao final do URL: 


?recordID=&grecordsetName. fieldName4 
O ponto de interrogação informa ao servidor de que se trata de um ou mais parâmetros de URL. A palavra recordiD é o nome do parâmetro 


do URL (você pode dar a ele o nome que quiser). Anote o nome do parâmetro do URL porque você o usará na página detalhada 
posteriormente. 


A expressão após o sinal de igual é o valor do parâmetro. Nesse caso, o valor é gerado por uma expressão do ColdFusion que retorna a ID 
de um registro do conjunto de registros. É gerada uma ID diferente para cada linha da tabela dinâmica. Na expressão do ColdFusion, 
substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica 
com exclusividade cada registro. Na maior parte dos casos, o campo consistirá no número da ID de um registro. No seguinte exemplo, o 
campo consiste em códigos de local exclusivos. 


locationDetail.cfm?recordID=grsLocations.CODEX 
Quando a página é executada, os valores do campo CODE do conjunto de registros são inseridos nas linhas correspondentes da tabela 
dinâmica. Por exemplo, caso Canberra, Austrália, o local da locação, apresente o código CBR, o seguinte URL é usado na linha Canberra 


da tabela dinâmica: 


locationDetail.cfm?recordID=CBR 


6. (PHP) No campo Link do Inspetor de propriedades, adicione esta sequência de caracteres ao final do URL: 


?recordID=<?php echo $row recordsetName['fieldName']; ?> 


O ponto de interrogação informa ao servidor de que se trata de um ou mais parâmetros de URL. A palavra recordiD é o nome do parâmetro 
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do URL (você pode usar o nome que quiser). Anote o nome do parâmetro do URL porque você o usará na página detalhada 
posteriormente. 


A expressão após o sinal de igual é o valor do parâmetro. Nesse caso, o valor é gerado por uma expressão do PHP que retorna a ID de um 
registro do conjunto de registros. É gerada uma ID diferente para cada linha da tabela dinâmica. Na expressão do PHP, substitua 
recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica com 
exclusividade cada registro. Na maior parte dos casos, o campo consistirá no número da ID de um registro. No seguinte exemplo, o campo 
consiste em códigos de local exclusivos. 


locationDetail.php?recordID=<?php echo $row rsLocations['CODE']; ?> 
Quando a página é executada, os valores do campo CODE do conjunto de registros são inseridos nas linhas correspondentes da tabela 
dinâmica. Por exemplo, caso Canberra, Austrália, o local da locação, apresente o código CBR, o seguinte URL é usado na linha Canberra 


da tabela dinâmica: 


locationDetail.php?recordID=CBR 


Salve a página. 


Abra a página detalhada e passe a ID de um registro (ASP) 


it 
2: 


Selecione o conteúdo dinâmico a ser duplicado como um link. 


No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Ir para página 
detalhada no menu pop-up. 


Na caixa Página detalhada, clique em Procurar e localize a página. 


4. Especifique o valor que você deseja passar para a página detalhada selecionando um conjunto de registros e uma coluna nos menus pop- 


Localizar e exibir o registro solicitado na página detalhada 


up Conjunto de registros e Coluna. Normalmente, o valor é exclusivo do registro como, por exemplo, a ID de chave exclusiva. 


Se desejado, passe os parâmetros de página existentes para a página detalhada selecionando as opções Parâmetros de URL ou 
Parâmetros de formulário. 


Clique em OK. 


Um link especial contorna o texto selecionado. Quando o usuário clica no link, o comportamento de servidor Ir para página detalhada passa 
um parâmetro do URL que contém a ID do registro para a página detalhada. Por exemplo, caso o parâmetro do URL se chame ide a 
página detalhada, customerdetail.asp, o URL permanece semelhante à seguinte quando o usuário clica no link: 


http:/ANyvww.mysite.com/customerdetail.asp?id=43 


A primeira parte do URL, http:/Aww.mysite.com/customerdetail.asp, abre a página detalhada. Já a segunda parte, ?id=43, é o parâmetro do 
URL. Ela informa à página detalhada qual registro localizar e exibir. O termo id é o nome do parâmetro do URL e 43 é seu valor. Nesse 
exemplo, o parâmetro do URL contém o número da ID do registro, 43. 


Para o início 


Para exibir o registro solicitado pela página mestre, você deve definir um conjunto de registros para armazenar um único registro e ligar as 
colunas do conjunto à página detalhada. 


1, 
2. 


Alterne para a página detalhada. Caso você ainda não tenha uma página detalhada, crie uma página em branco (Arquivo > Novo). 


No painel Ligações (Janela > Ligações), clique no botão de adição (+) e selecione Conjunto de registros (consulta) ou Conjunto de dados 
(consulta) no menu pop-up. 


A caixa de diálogo Conjunto de registros ou Conjunto de dados simples é exibida. Caso seja exibida a caixa de diálogo avançada em seu 
lugar, clique em Simples. 


Nomeie o conjunto de registros e selecione uma fonte de dados, além da tabela do banco de dados que fornecerá os dados para o 
conjunto de registros. 


Na área Colunas, selecione as colunas da tabela a serem incluídas no conjunto de registros. 


O conjunto pode ser idêntico ou não ao conjunto de registros da página mestre. Normalmente, o conjunto de registros de uma página 
detalhada tem mais colunas para poder exibir mais detalhes. 


Caso os conjuntos de registros sejam diferentes, verifique se o conjunto da página detalhada contenha pelo menos uma coluna em comum 
com o conjunto de registros da página mestre. A coluna em comum costuma ser a da ID do registro, mas também pode ser o campo 
conjunto das tabelas relacionadas. 


Para incluir apenas algumas das colunas da tabela no conjunto de registros, clique em Selecionado e escolha as colunas desejadas 
clicando nelas com a tecla Control pressionada (Windows) ou Command (Macintosh) na lista. 


Complete a seção Filtro para localizar e exibir o registro especificado no parâmetro do URL passado pela página mestre: 


e No primeiro menu pop-up da área Filtro, selecione a coluna do conjunto de registros que contém valores correspondentes ao valor do 
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parâmetro do URL passado pela página mestre. Por exemplo, caso o parâmetro do URL contenha o número de uma ID de registro, 
selecione a coluna que contém os números da ID de registro. No exemplo abordado na seção anterior, a coluna do conjunto de 
registros chamada CODE contém os valores correspondentes ao valor do parâmetro do URL passado pela página mestre. 


* No menu pop-up ao lado do primeiro menu, selecione o sinal de igual (ele já deve estar selecionado). 


* No terceiro menu pop-up, selecione Parâmetro do URL. A página mestre usa um parâmetro do URL para passar informações à página 
detalhada. 


e Na quarta caixa, digite o nome do parâmetro do URL passado pela página mestre. 


Clique em OK. O conjunto de registros é exibido no painel Ligações. 


Ligue as colunas do conjunto de registros à página detalhada selecionando as colunas no painel Ligações (Janela > Ligações) e 
arrastando-as para a página. 


Depois de carregar as páginas mestre e detalhada no servidor, você pode abrir a página mestre em um navegador. Depois que um link 
detalhado é clicado na página mestre, a página detalhada é aberta com mais informações sobre o registro selecionado. 


Para o início 


Localize um registro específico e exiba-o em uma página (ASP) 


Você pode adicionar um comportamento de servidor que localize um registro específico de um conjunto para poder exibir os dados do registro na 
página. O comportamento do servidor só está disponível quando se usa o modelo de servidor ASP. 


1. 


Crie uma página que tenha os seguintes pré-requisitos: 


* A ID de um registro contida no parâmetro de um URL e passada por outra página para a página atual. Você pode criar parâmetros de 
URL na outra página com hiperlinks em HTML ou formulário em HTML. Para obter mais informações, consulte Utilizando formulários 
para reunir informações de usuários. 


* Um conjunto de registros definido para a página atual. O comportamento de servidor extrai os detalhes do registro do conjunto. Para 
obter instruções, consulte Definir um conjunto de registros sem escrever em SQL ou Definir um conjunto de registros avançado 
escrevendo em SQL. 


* Colunas do conjunto de registros ligado à página. O registro específico deve ser exibido na página. Para obter mais informações, 
consulte Tornar texto dinâmico. 


Adicione o comportamento de servidor para localizar o registro especificado pelo parâmetro do URL clicando no botão de adição (+) do 
painel Comportamentos de servidor (Janela > Comportamentos de servidor) e selecionando Paginação do conjunto de registros > Mover 
para registro específico. 


No menu pop-up Mover para registro em, selecione o conjunto de registros definido para a página. 


4. No menu pop-up Coluna Onde, selecione a coluna que contém o valor passado pela outra página. 


Por exemplo, caso a outra página passe o número de uma ID de registro, selecione a coluna que contém os números da ID de registro. 


. Na caixa Corresponde ao parâmetro de URL, digite o nome do parâmetro do URL passado pela outra página. 


Por exemplo, caso o URL usado pela outra página para abrir a página detalhada seja id=43, digiteid na caixa Corresponde ao parâmetro de 
URL. 


. Clique em OK. 


Na próxima vez em que a página for solicitada por um navegador, o comportamento de servidor irá ler a ID do registro no parâmetro do 
URL passado pela outra página e se mover para o registro especificado do conjunto. 


Para o início 


Criar páginas mestre e detalhadas em uma operação 


Ao desenvolver aplicativos da Web, você pode criar rapidamente páginas mestre e detalhadas usando o objeto de dados Conjunto de páginas 
mestre/detalhadas. 


1. 


Para criar uma página dinâmica em branco, selecione Arquivo > Novo > Página em branco, escolha uma página dinâmica e clique em 
Criar. 


Essa se torna a página mestre. 


. Defina um conjunto de registros para a página. 


Verifique se o conjunto de registros contém não apenas todas as colunas necessárias à página mestre, mas também todas as colunas 
necessárias à página detalhada. Normalmente, o conjunto de registros da página mestre extrai algumas colunas da tabela de um banco de 
dados, ao passo que o conjunto de registros da página detalhada extrai mais colunas da mesma tabela para fornecer detalhes adicionais. 


3. Abra a página mestre na Visualização de design e selecione Inserir > Objetos de dados > Conjunto de páginas mestre/detalhadas. 


4. No menu pop-up Recordset, verifique se o conjunto que contém os registros a serem exibidos na página mestre está escolhido. 


5. Na área Campos de página mestre, selecione as colunas do conjunto de registros a serem exibidas na página mestre. 
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12. 


18. 


14. 


15: 


Por padrão, todas as colunas do conjunto de registros são selecionadas. Caso o conjunto de registros contenha uma coluna de chave 
exclusiva como, por exemplo, recordiD, selecione-a e clique no botão de subtração (-) para que ela não seja exibida na página. 


Para alterar a ordem na qual as colunas são exibidas na página mestre, selecione uma coluna na lista e clique na seta para cima ou para 
baixo. 


Na página mestre, as colunas do conjunto de registros serão organizadas horizontalmente em uma tabela. Clicar na seta para cima move a 
coluna para esquerda; clicar na seta para baixo move a coluna para direita. 


No menu pop-up Vincular a detalhes em, selecione a coluna do conjunto de registros que exibirá um valor que também funciona como um 
link para a página detalhada. 


Por exemplo, caso você queira que cada nome de produto na página mestre tenha um link para a página detalhada, selecione a coluna do 
conjunto de registros que contém os nomes dos produtos. 


No menu pop-up Repassar chave exclusiva, selecione a coluna do conjunto de registros contendo os valores que identificam os registros. 


Normalmente, a coluna escolhida se refere ao número da ID do registro. Esse valor é passado para a página detalhada para que ela possa 
identificar o registro escolhido pelo usuário. 


Desmarque a opção Numérico caso a coluna da chave exclusiva não seja numérica. 
Nota: Essa opção é selecionada por padrão; ela não é exibida para todos os modelos de servidor. 
Especifique o número de registros a serem exibidos na página mestre. 


Na caixa Nome de página detalhada, clique em Procurar e localize o arquivo de página detalhada criado por você ou digite um nome e 
deixe que o objeto de dados crie um. 


Na área Campos de página detalhada, selecione as colunas a serem exibidas na página detalhada. 


Por padrão, todas as colunas do conjunto de registros da página mestre são selecionadas. Caso o conjunto de registros contenha uma 
coluna de chave exclusiva como, por exemplo, recordiD, selecione-a e clique no botão de subtração (-) para que ela não seja exibida na 
página detalhada. 


Para alterar a ordem na qual as colunas são exibidas na página detalhada, selecione uma coluna na lista e clique na seta para cima ou 
para baixo. 


Na página detalhada, as colunas do conjunto de registros são organizadas verticalmente em uma tabela. Clicar na seta para cima move a 
coluna para cima; clicar na seta para baixo move a coluna para baixo. 


Clique em OK. 


O objeto de dados cria uma página detalhada (caso você ainda não tenha criado uma) e adiciona conteúdo dinâmico e comportamentos de 
servidor às páginas mestre e detalhadas. 


Personalize o layout das páginas mestre e detalhadas de acordo com suas necessidades. 


Você pode personalizar integralmente o layout de todas as páginas usando as ferramentas de design doDreamweaver. Você também pode 
editar os comportamentos de servidor clicando duas vezes neles no painel Comportamentos de servidor. 


Depois de criar as páginas mestre e detalhadas usando o objeto de dados, use o painel Comportamentos de servidor (Janela > 
Comportamentos de servidor) para modificar os vários blocos de criação inseridos pelo objeto de dados nas páginas. 


Mais tópicos da Ajuda 
Configurar um servidor de teste 
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Criação de uma página de registro 


Sobre as páginas de registro 

Armazenamento de informações de logon dos usuários 

Adicionar um formulário em HTML para a seleção de um nome de usuário e senha 
Atualizar a tabela de usuários do banco de dados 

Adicionar um comportamento de servidor para verificar um nome de usuário exclusivo 


Para o início 


Sobre as páginas de registro 
O aplicativo da Web pode conter uma página que exige o registro dos usuários na primeira vez em que eles visitam o site. 
Uma página de registro é formada pelos seguintes blocos de criação: 
* Uma tabela do banco de dados para armazenar informações de logon dos usuários 
* Um formulário em HTML que permite aos usuários selecionar um nome de usuário e senha 
Você também pode usar o formulário para obter demais informações pessoais dos usuários. 
* Um comportamento de servidor Inserir registro para atualizar a tabela do banco de dados dos usuários do site 


* Um comportamento de servidor Verificar novo nome de usuário para verificar se o nome digitado pelo usuário não está sendo usado por 
outro 


g nê ps Para o início 
Armazenamento de informações de logon dos usuários ii 


Uma página de registro exige que uma tabela do banco de dados armazena as informações de logon inseridas pelos usuários. 
e Verifique se a tabela do banco de dados contém um nome de usuário e uma coluna de senha. Caso você queira que os usuários 


conectados tenham privilégios de acesso diferentes, inclua uma coluna de privilégio de acesso. 


e Caso você queira definir uma senha comum a todos os usuários do site, configure o aplicativo de banco de dados (Microsoft Access, 
Microsoft SQL Server, Oracle etc.) para digitar a senha em todos os registros de novo usuário por padrão. Na maioria dos aplicativos de 
banco de dados, você pode definir uma coluna como um valor padrão sempre que um novo registro é criado. Defina o valor padrão da 
senha. 


e Você também pode usar a tabela do banco de dados para armazenar outras informações úteis sobre o usuário. 


A próxima etapa da criação de uma página de registro é adicionar um formulário em HTML a ela para permitir que os usuários escolham um 
nome de usuário e senha (se aplicável). 


E = . = ERRA 
Adicionar um formulário em HTML para a seleção de um nome de usuário e senha E o 


Você adiciona um formulário em HTML à página de registro para permitir que os usuários selecionem um nome de usuário e senha (se aplicável). 


1. Crie uma página (Arquivo > Novo > Página em branco) e crie o layout da página de registro usando as ferramentas de design do 
Dreamweaver. 


2. Adicione um formulário em HTML colocando o ponto de inserção onde você deseja que o formulário seja exibido e selecionando Formulário 
no menu Inserir. 


É criado um formulário vazio na página. Você talvez precise ativar os Elementos invisíveis (Exibir > Auxílios visuais > Elementos invisíveis) 
para ver os limites do formulário, representados por linhas finas em vermelho. 


3. Nomeie o formulário em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o formulário, abrindo o 
Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulário. 


Você não precisa especificar um atributo action ou method para o formulário a fim de informá-lo para onde e como enviar os dados do 
registro quando o usuário clicar no botão Enviar. O comportamento de servidor Inserir registro define esses atributos para você. 


4. Adicione campos de texto (Inserir > Formulário > Campo de texto) para permitir que o usuário digite um nome de usuário e senha. 
O formulário também pode ter mais objetos de formulário para registrar outros dados pessoais. 


Você deve adicionar rótulos (como textos ou imagens) ao lado de cada objeto de formulário para informar suas funções aos usuários. Você 
também deve alinhar os objetos de formulário colocando-os dentro de uma tabela em HTML. Para obter mais informações sobre objetos de 
formulário, consulte Criação de formulários da Web. 
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5. Adicione um botão Enviar ao formulário (Inserir > Formulário > Botão). 


Você pode alterar o rótulo do botão Enviar selecionando o botão, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo 
um novo valor na caixa Valor. 


A próxima etapa da criação de uma página de registro é adicionar o comportamento de servidor Inserir registro para inserir registros na 
tabela dos usuários no banco de dados. 


é GE P iníci 
Atualizar a tabela de usuários do banco de dados dd 


Você deve adicionar um comportamento de servidor Inserir registro à página de registro para atualizar a tabela de usuários no banco de dados. 


1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Inserir registro no 
menu pop-up. 
A caixa de diálogo Inserir registro é exibida. 


2. Complete a caixa de diálogo, não se esquecendo de especificar a tabela de usuários no banco de dados em que os dados dos usuários 
serão inseridos. Clique em OK. 


A etapa final da criação de uma página de registro é verificar se o nome não foi usado por outro usuário registrado. 


Es ã sas gia a Para o início 
Adicionar um comportamento de servidor para verificar um nome de usuário exclusivo 


Você pode adicionar um comportamento de servidor a uma página de registro que verifica se o nome de usuário é exclusivo antes de adicioná-lo 
ao banco de dados de usuários registrados. 


Quando o usuário clica no botão Enviar na página de registro, o comportamento de servidor compara o nome de usuário digitado pelo usuário 
com os nomes de usuário armazenados na tabela de usuários registrados de um banco de dados. Caso nenhum nome de usuário 
correspondente seja encontrado na tabela do banco de dados, o comportamento de servidor realiza normalmente a operação de inserção do 
registro. Caso um nome de usuário correspondente seja encontrado, o comportamento de servidor cancela a operação de inserção do registro e 
abre uma nova página (normalmente uma página alertando o usuário de que o nome de usuário já está sendo usado). 


1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Usar 
autenticação > Verificar novo nome de usuário no menu pop-up. 


2. No menu pop-up Campo de nome de usuário, selecione o campo de texto de formulário usado pelos visitantes para digitar um nome de 
usuário. 


3. Em Se já existir, caixa Ir para, especifique uma página a ser aberta caso um nome de usuário correspondente seja encontrado na tabela do 
banco de dados e clique em OK. 


A página aberta deve alertar o usuário de que o nome de usuário já está sendo usado e permitir que ele tente novamente. 


Mais tópicos da Ajuda 


(9) ex-nc-sa ] 
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Criação de páginas para inserção de registro (CS6) 


Sobre a criação de páginas para inserção de registro 
Criar uma página para inserção bloco por bloco 
Criar a página para inserção em uma única operação 


Para o início 


Sobre a criação de páginas para inserção de registro 


O aplicativo pode conter uma página que permite aos usuários inserir novos registros em um banco de dados. 


Uma página para inserção consiste em dois blocos de criação: 


Um formulário em HTML que permite aos usuários inserir dados 
Um comportamento de servidor Inserir registro que atualiza o banco de dados 
Quando um usuário clica em Enviar em um formulário, o comportamento de servidor insere registros em uma tabela do banco de dados. 


Você pode adicionar esses blocos de criação em uma única operação usando o objeto de dados Registrar formulário de inserção ou pode 
adicioná-los separadamente usando as ferramentas de formulário do Dreamweaver e o painel Comportamentos de servidor. 


Nota: A página para inserção pode conter apenas um comportamento de servidor para edição do registro por vez. Por exemplo, você não 
pode adicionar um comportamento de servidor Atualizar registro ou Excluir registro à página para inserção. 


Para o início 


Criar uma página para inserção bloco por bloco 


Você também pode criar uma página para inserção usando as ferramentas de formulário e os comportamentos de servidor. 


Adicionar um formulário em HTML a uma página para inserção 


1. 


Crie uma página dinâmica (Arquivo > Novo > Página em branco) e crie o layout da página usando as ferramentas de design do 
Dreamweaver. 


. Adicione um formulário em HTML colocando o ponto de inserção onde você deseja que o formulário seja exibido e selecionando Inserir > 


Formulário > Formulário. 


É criado um formulário vazio na página. Você talvez precise ativar os Elementos invisíveis (Exibir > Auxílios visuais > Elementos invisíveis) 
para ver os limites do formulário, representados por linhas finas em vermelho. 


. Nomeie o formulário em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o formulário, abrindo o 


Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulário. 


Você não precisa especificar um atributo action ou method para o formulário a fim de informá-lo para onde e como enviar os dados do 
registro quando o usuário clicar no botão Enviar. O comportamento de servidor Inserir registro define esses atributos para você. 


. Adicione um objeto de formulário como, por exemplo, um campo de texto (Inserir > Formulário > Campo de texto) para cada coluna na 


tabela do banco de dados em que deseja inserir os registros. 


Os objetos de formulário se destinam à entrada de dados. Os campos de texto são comuns a esse propósito, mas você também pode usar 
menus, opções e botões de opção. 


. Adicione um botão Enviar ao formulário (Inserir > Formulário > Botão). 


Você pode alterar o rótulo do botão Enviar selecionando o botão, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo 
um novo valor na caixa Rótulo. 


Adicionar um comportamento de servidor para inserir registros em uma tabela do banco de dados 
(ColdFusion) 


1. 


o st PB mw N 


No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Inserir registro no 
menu pop-up. 

Selecione um formulário no menu pop-up Enviar valores de. 

No menu pop-up Fonte de dados, selecione uma conexão com o banco de dados. 

Digite o nome do usuário e a senha. 

No menu pop-up Inserir em uma tabela, selecione a tabela do banco de dados em que o registro deve ser inserido. 

Especifique uma coluna do banco de dados em que o registro deve ser inserido, selecione o objeto de formulário que irá inserir o registro 
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no menu pop-up Valor e um tipo de dados para o objeto de formulário no menu pop-up Enviar como. 
O tipo de dados é o tipo que a coluna na tabela do banco de dados está esperando (texto, numérico, valores de opção boolianos). 
Repita o procedimento para todos os objetos no formulário. 


Na caixa Ir para, Após a inserção, insira a página a ser aberta após a inserção do registro na tabela ou clique no botão Procurar para 
procurar o arquivo. 
Clique em OK. 


O Dreamweaver adiciona um comportamento de servidor à página que permite aos usuários inserir registros em uma tabela do banco de 
dados preenchendo o formulário em HTML e clicando no botão Enviar. 


Adicionar um comportamento de servidor para inserir registros em uma tabela do banco de dados (ASP) 


q: 


No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Inserir registro no 
menu pop-up. 
No menu pop-up Conexão, selecione uma conexão com o banco de dados. 


Clique no botão Definir caso você precise definir uma conexão. 


No menu pop-up Inserir em uma tabela, selecione a tabela do banco de dados em que o registro deve ser inserido. 


4. Na caixa Ir para, Após a inserção, insira a página a ser aberta após a inserção do registro na tabela ou clique em Procurar para procurar o 


arquivo. 
No menu pop-up Obter valores em, selecione o formulário em HTML usando na inserção dos dados. 


O Dreamweaver seleciona automaticamente o primeiro formulário da página. 


. Especifique uma coluna do banco de dados em que o registro deve ser inserido, selecione o objeto de formulário que irá inserir o registro 


no menu pop-up Valor e um tipo de dados para o objeto de formulário no menu pop-up Enviar como. 
O tipo de dados é o tipo que a coluna na tabela do banco de dados está esperando (texto, numérico, valores de opção boolianos). 


Repita o procedimento para todos os objetos no formulário. 


. Clique em OK. 


O Dreamweaver adiciona um comportamento de servidor à página que permite aos usuários inserir registros em uma tabela do banco de 
dados preenchendo o formulário em HTML e clicando no botão Enviar. 


Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas 
vezes no comportamento Inserir registro. 


Adicionar um comportamento de servidor para inserir registros em uma tabela do banco de dados (PHP) 


1. 


Ron 


No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Inserir registro no 
menu pop-up. 

Selecione um formulário no menu pop-up Enviar valores de. 

No menu pop-up Conexão, selecione uma conexão com o banco de dados. 

No menu pop-up Inserir tabela, selecione a tabela do banco de dados em que o registro deve ser inserido. 

Especifique uma coluna do banco de dados em que o registro deve ser inserido, selecione o objeto de formulário que irá inserir o registro 
no menu pop-up Valor e um tipo de dados para o objeto de formulário no menu pop-up Enviar como. 

O tipo de dados é o tipo que a coluna na tabela do banco de dados está esperando (texto, numérico, valores de opção boolianos). 
Repita o procedimento para todos os objetos no formulário. 

Na caixa Ir para, Após a inserção, insira a página a ser aberta após a inserção do registro na tabela ou clique no botão Procurar para 
procurar O arquivo. 

Clique em OK. 


O Dreamweaver adiciona um comportamento de servidor à página que permite aos usuários inserir registros em uma tabela do banco de 
dados preenchendo o formulário em HTML e clicando no botão Enviar. 


Para o início 


Criar a página para inserção em uma única operação 


i. 


ar twm 


Abra a página na Visualização de design e selecione Inserir > Objetos de dados > Inserir registro > Assistente para registrar formulário de 
inserção. 

No menu pop-up Conexão, selecione uma conexão com o banco de dados. Clique em Definir caso você precise definir uma conexão. 

No menu pop-up Inserir em uma tabela, selecione a tabela do banco de dados em que o registro deve ser inserido. 

Caso você use o ColdFusion, digite um nome de usuário e senha. 

Na caixa Ir para, Após a inserção, insira a página a ser aberta após a inserção do registro na tabela ou clique no botão Procurar para 
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procurar o arquivo. 


6. Na área Campos de formulário, especifique os objetos de formulário que você deseja incluir no formulário em HTML da página para 
inserção e quais colunas da tabela do banco de dados cada objeto de formulário deve atualizar. 


Por padrão, o Dreamweaver cria um objeto de formulário para cada coluna na tabela do banco de dados. Caso o banco de dados gere 
automaticamente IDs de chave exclusiva para cada novo registro criado, remova o objeto de formulário correspondente à coluna da chave 
selecionando-o na lista e clicando no botão de subtração (-). Isso elimina o risco de que o usuário do formulário insira um valor de ID já 
existente. 


Você também pode alterar a ordem dos objetos no formulário em HTML selecionando um objeto de formulário na lista e clicando na seta 
para cima ou para baixo à direita da caixa de diálogo. 


7. Especifique como cada campo de entrada de dados deve ser exibido no formulário em HTML clicando em uma linha na tabela Campos de 
formulário e inserindo as seguintes informações nas caixas abaixo da tabela: 


e Na caixa Rótulo, digite um rótulo descritivo a ser exibido ao lado do campo de entrada de dados. Por padrão, o Dreamweaver exibe o 
nome da coluna da tabela no rótulo. 


* No menu pop-up Exibir como, selecione um objeto de formulário para servir como campo de entrada de dados. Você pode selecionar 
Campo de texto, Área de texto, Menu, Caixa de seleção, Grupo de botões de opção e Texto. Para entradas somente leitura, selecione 
Texto. Você também pode selecionar Campo de senha, Campo de arquivo e Campo oculto. 


Nota: Os campos ocultos são inseridos ao final do formulário. 


e No menu pop-up Enviar como, selecione o formato de dados aceito pela tabela do banco de dados. Por exemplo, caso a coluna da 
tabela aceite apenas dados numéricos, selecione Numérico. 


e Defina as propriedades do objeto de formulário. Você conta com opções diferentes dependendo do objeto de formulário selecionado por 
você como o campo de entrada de dados. Para campos de texto, áreas de texto e texto, você pode inserir um valor inicial. Para menus 
e grupos de botões de opção, você abre outra caixa de diálogo a fim de definir as propriedades. Para opções, selecione a opção 
Marcado ou Desmarcado. 


8. Clique em OK. 


O Dreamweaver adiciona um formulário em HTML e um comportamento de servidor Inserir registro à página. Os objetos de formulário são 
colocados em uma tabela básica, que você pode personalizar usando as ferramentas de design de página do Dreamweaver. (Verifique se 
todos os objetos continuam dentro dos limites do formulário.) 


Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas 
vezes no comportamento Inserir registro. 


Mais tópicos da Ajuda 
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Criação de uma página que apenas usuários autorizados podem 
acessar 


Sobre as páginas protegidas 

Redirecionar usuários não autorizados 

Armazenar privilégios de acesso no banco de dados do usuário 
Fazer logout de usuários 


Sobre as páginas protegidas didi 


O aplicativo da Web pode conter uma página protegida que apenas usuários autorizados podem acessar. 


Por exemplo, caso um usuário tente ignorar a página de logon digitando o URL da página protegida em um navegador, o usuário é redirecionado 
para outra página. Da mesma forma, caso você defina o nível de autorização de uma página como Administrador, apenas usuários com 
privilégios de acesso Administrador podem exibir a página. Caso um usuário conectado tente acessar a página protegida sem os privilégios de 
acesso apropriados, ele é redirecionado para outra página. 


Você também pode usar os níveis de autorização para revisar usuários recém-registrados concedendo a eles acesso total ao site. Por exemplo, 
convém receber o pagamento antes de permitir que um usuário acesse as páginas de membro do site. Para isso, você pode proteger as páginas 
de membro com um nível de autorização Membro e conceder a usuários recém-registrados apenas os privilégios de Convidado. Depois de 
receber o pagamento do usuário, você pode atualizar os privilégios de acesso do usuário para Membro (na tabela de usuários registrados do 
banco de dados). 


Caso não pretenda usar os níveis de autorização, você pode proteger qualquer página do site simplesmente adicionando um comportamento de 
servidor Restringir acesso à página. O comportamento de servidor redireciona para outra página qualquer usuário que não tenha conseguido 
fazer o logon. 


Caso pretenda usar os níveis de autorização, você pode proteger qualquer página do site usando os seguintes blocos de criação: 
* Um comportamento de servidor Restringir acesso à página para redirecionar usuários não autorizados para outra página 
* Uma coluna extra na tabela de usuários do banco de dados para armazenar os privilégios de acesso de cada usuário 


Independentemente do uso ou não dos níveis de autorização, você pode adicionar um link à página protegida que permite ao usuário fazer 
logout e limpa todas as variáveis de sessão. 


E E no Re z Para o início 
Redirecionar usuários não autorizados 


Para impedir que usuários não autorizados acessem uma página, adicione um comportamento de servidor Restringir acesso à página a ela. O 
comportamento de servidor redireciona o usuário para outra página caso o usuário tente ignorar a página de logon digitando o URL da página 
protegida em um navegador ou caso ele esteja conectado, mas tente acessar uma página protegida sem os privilégios de acesso apropriados. 


Nota: O comportamento de servidor Restringir acesso à página só pode proteger páginas em HTML. Ele não protege outros recursos do site 


como, por exemplo, arquivos de imagem e de áudio. 
Caso queira dar a muitas páginas do site os mesmos direitos de acesso, você pode copiar e colá-los de uma página para outra. 


Redirecionar usuários não autorizados para outra página 
1. Abra a página que você deseja proteger. 
2. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Usar 
autenticação > Restringir acesso à página no menu pop-up. 
3. Selecione o nível de acesso da página. Para permitir que apenas usuários com determinados privilégios de acesso vejam a página, 
selecione a opção Nome de usuário, senha e nível de acesso e especifique os níveis de autorização da página. 


Por exemplo, você pode especificar que apenas usuários com privilégios de Administrador possam exibir a página selecionando 
Administrador na lista dos níveis de autorização. 


4. Para adicionar níveis de autorização à lista, clique em Definir. Na lista Definir níveis de acesso exibida, insira um novo nível de autorização 
e clique no botão de adição (+). O novo nível de autorização é armazenado para ser usado com outras páginas. 


Verifique se a sequência de caracteres do nível de autorização corresponde exatamente à sequência de caracteres armazenada no banco 
de dados do usuário. Por exemplo, caso a coluna da autorização no banco de dados contenha o valor "Administrador", digite Administrador, 
e não Admin, na caixa Nome. 
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5: 


6. 


fi 


Para definir mais de um nível de autorização para uma página, clique nos níveis com a tecla Control pressionada (Windows) ou Command 
(Macintosh) na lista. 


Por exemplo, você pode especificar que qualquer usuário com privilégios de Convidado, Membro ou Administrador pode exibir a página. 
Especifique a página a ser aberta caso um usuário não autorizado tente abrir a página protegida. 
Verifique se a página escolhida não está protegida. 


Clique em OK. 


Copiar e colar os direitos de acesso de uma página para as demais páginas do site 


1. 


Abra a página protegida e selecione o comportamento de servidor Restringir acesso à página listado no painel Comportamentos de servidor 
(e não o no menu pop-up de adição [+]). 


. Clique no botão de seta no canto superior direito do painel e selecione Copiar no menu pop-up. 


O comportamento de servidor Restringir acesso à página é copiado para a Área de transferência do sistema. 


. Abra a outra página que você deseja proteger da mesma forma. 


4. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de seta no canto superior direito e 


Armazenar privilégios de acesso no banco de dados do usuário 


selecione Colar no menu pop-up. 


. Repita as etapas 3 e 4 para todas as páginas que você deseja proteger. 


Para o início 


O bloco de criação só é obrigatório caso você queira que determinados usuários conectados tenham privilégios de acesso diferentes. Caso 
precise apenas que os usuários façam logon, você não tem que armazenar privilégios de acesso. 


1. 


Para fornecer a determinados usuários conectados privilégios de acesso diferentes, verifique se a tabela de usuários do banco de dados 
contém uma coluna especificando os privilégios de acesso de cada usuário (Convidado, Usuário, Administrador etc.). Os privilégios de 
acesso de cada usuário devem ser inseridos no banco de dados pelo administrador do site. 


Na maioria dos aplicativos de banco de dados, você pode definir uma coluna como um valor padrão sempre que um novo registro é criado. 
Defina o valor padrão como o privilégio de acesso mais comum do site (por exemplo, Convidado) e, em seguida, altere manualmente as 
exceções (por exemplo, alterando Convidado para Administrador). O usuário agora tem acesso a todas as páginas de administrador. 


. Verifique se cada usuário no banco de dados tem um privilégio de acesso exclusivo como, por exemplo, Convidado ou Administrador, e não 


vários privilégios como Usuário, Administrador. Para definir vários privilégios de acesso para as páginas (por exemplo, todos os convidados 
e administradores podem ver a página), os defina no nível da página, e não do banco de dados. 


Para o início 


Fazer logout de usuários 


Quando um usuário faz logon com êxito, uma variável de sessão é criada consistindo no nome de usuário. Quando o usuário deixa o site, você 
pode usar o comportamento de servidor Fazer logout do usuário para limpar a variável da sessão e redirecioná-lo para outra página 
(normalmente uma página de despedida ou de agradecimento). 


Você pode invocar o comportamento de servidor Fazer logout do usuário quando o usuário clica em um link ou quando uma determinada página 
é carregada. 


Adicionar um link para permitir que os usuários façam logout 


1. 
2: 


Selecione o texto ou a imagem de uma página para servir como link. 


No painel Comportamentos de servidor (Janela > Comportamentos), clique no botão de adição (+) e selecione Usar autenticação > Fazer 
logout do usuário. 


. Especifique uma página a ser aberta quando o usuário clica no link e em OK. 


A página costuma ser de despedida ou de agradecimento. 


Fazer logout dos usuários quando uma página específica é carregada 


1. 


Abra a página a ser carregada no Dreamweaver. 
A página costuma ser de despedida ou de agradecimento. 


No painel Comportamentos de servidor, clique no botão de adição (+) e selecione Usar autenticação > Fazer logout do usuário. 


Selecione a opção Fazer logout quando a página for carregada e clique em OK. 


Mais tópicos da Ajuda 


(63) ex-ne-sa ] 
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Criação dos formulários do ColdFusion 


Sobre formulários do ColdFusion 

Ativar os aprimoramentos feitos no ColdFusion 
Criar formulários do ColdFusion 

Inserir controles de formulário do ColdFusion 
Inserir campos de texto do ColdFusion 

Inserir campos ocultos do ColdFusion 

Inserir áreas de texto do ColdFusion 

Inserir botões do ColdFusion 

Inserir caixas de seleção do ColdFusion 

Inserir botões de opção do ColdFusion 

Inserir caixas de marcação do ColdFusion 
Inserir campos de imagem do ColdFusion 
Inserir campos de arquivo do ColdFusion 
Inserir campos de data do ColdFusion 
Modificar controles de formulário do ColdFusion 
Validar dados de formulário do ColdFusion 


Nota: O suporte para o ColdFusion foi removido no Dreamweaver CC e posterior. 


Za - Para o início 
Sobre formulários do ColdFusion 
Os formulários do ColdFusion fornecem vários mecanismos incorporados para validar os dados de formulários. Por exemplo, você pode fazer 
uma verificação para garantir que um usuário digitou uma data válida. Alguns controles de formulários possuem recursos adicionais. Vários não 
têm correspondentes em HTML e outros suportam diretamente o preenchimento dinâmico de controles a partir de fontes de dados. 


O Dreamweaver fornece vários aprimoramentos para os desenvolvedores do ColdFusion que usam o ColdFusion MX 7 ou posterior como servidor 
de desenvolvimento. Esses aprimoramentos incluem mais botões do painel Inserir, itens de menu e inspetores de propriedades para que você 
possa criar e definir rapidamente as propriedades de formulários do ColdFusion. Você também pode gerar um código que valide as informações 
fornecidas pelos visitantes do site. Por exemplo, você pode verificar se o endereço de email fornecido por um usuário contém o símbolo (OD ou se 
um campo de texto obrigatório contém um determinado tipo de valor. 


= Ê E « P, iníci 
Ativar os aprimoramentos feitos no ColdFusion Rr 


Alguns desses aprimoramentos exigem que você defina um computador em que o ColdFusion MX 7 ou posterior esteja em execução como um 
servidor de teste para o Dreamweaver. Por exemplo, os inspetores de propriedades para controles de formulário só permanecem disponíveis caso 
você especifique o servidor de teste correto. 


Você define um servidor de teste apenas uma vez. Em seguida, o Dreamweaver detecta automaticamente a versão do servidor de teste e faz os 
aprimoramentos disponíveis caso ele detecte o ColdFusion. 

1. Caso você ainda não tenha feito isso, defina um site do Dreamweaver para o projeto do ColdFusion. 

2. Selecione Site > Gerenciar sites, selecione seu site da lista e clique em Editar. 


3. Selecione a categoria Servidores e especifique um computador que esteja executando o ColdFusion MX 7 ou posterior como sendo o 
servidor de teste para o site do Dreamweaver. Verifique se você especificou um URL da Web. 


4. Abra um documento qualquer do ColdFusion. 


Você não verá nenhuma alteração visível feita no espaço de trabalho do Dreamweaver até abrir um documento do ColdFusion. 


Para o início 


Criar formulários do ColdFusion 


Você pode usar vários botões do painel Inserir, itens de menu e inspetores de propriedades para criar rapidamente formulários do ColdFusion e 
definir as propriedades no Dreamweaver. 


Nota: Esses aprimoramentos só estão disponíveis caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou 
posterior. 
1. Abra uma página do ColdFusion e coloque o ponto de inserção onde você deseja que o formulário do ColdFusion seja exibido. 


2. Selecione Inserir > Objetos do ColdFusion > CFForm > CFForm ou selecione a categoria CFForm do painel Inserir e clique no ícone CF 
Form. 
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O Dreamweaver insere um formulário do ColdFusion vazio. Na visualização Design, o formulário é indicado por um contorno vermelho 
pontilhado. Caso você não veja esse contorno, verifique se Exibir > Auxílios visuais > Elementos invisíveis está selecionado. 


. Verifique se o formulário ainda está selecionado e, em seguida, use o Inspetor de propriedades para definir qualquer uma das seguintes 
propriedades do formulário. 
CFForm Define o nome do formulário. 


Ação Permite que você especifique o nome da página do ColdFusion a ser processada quando o formulário for enviado. 
Método Permite que você defina o método usado pelo navegador para enviar os dados do formulário para o servidor: 


POST Envia os dados usando o método postar HTTP; esse método envia os dados em uma mensagem separada para o 
servidor. 


GET Envia os dados usando o método obter HTTP e colocando o conteúdo do campo do formulário na sequência de caracteres de 
consulta do URL. 


Alvo Permite que você modifique o valor do atributo-alvo da tag cfform. 


Tipo de codificação Especifica o método de codificação usado na transmissão dos dados do formulário. 
Nota: Tipo de codificação não se refere à codificação de caracteres. Esse atributo especifica o tipo de conteúdo usado no envio do 
formulário para o servidor (quando o valor do método é postar). O valor padrão desse atributo é application/x-www-form-urlencoded. 


Formato Determina o tipo de formulário criado: 


HTML Gera um formulário em HTML e o envia para o cliente. Os controles filhos cfgrid e cftree podem estar em Flash ou no 
formato applet. 


Flash Gera um formulário em Flash e o envia para o cliente. Todos os controles estão no formato Flash. 


XML Gera XForms em XML e coloca os resultados em uma variável com o nome de formulário do ColdFusion. Não envia nada 
para o cliente. Os controles filhos cfgrid e cftree podem estar em Flash ou no formato applet. 


Estilo Permite que você especifique um estilo para o formulário. Para obter mais informações, consulte a documentação do ColdFusion. 


Capa Flash/XML Permite que você especifique uma cor halo para estilizar a saída. O tema determina a cor usada para elementos 
realçados e selecionados. 


Preservar dados Determina se é preciso substituir os valores de controle iniciais pelos valores enviados quando o formulário é postado. 
e Caso seja Falso, os valores especificados nos atributos da tag de controle são usados. 
e Caso seja Verdadeiro, são usados os valores enviados. 


Origem dos scripts Especifica o URL, relativo à raiz da Web, do arquivo JavaScript que contém o código do cliente usado pela tag e pelas 
tags filhas. O atributo é útil caso o arquivo não esteja no local padrão. Esse atributo pode ser necessário em alguns ambientes de 
hospedagem e configurações que bloqueiam o acesso ao diretório /CFIDE. O local padrão é definido no Administrador do ColdFusion; por 
padrão, ele é /CFIDE/scripts/cfform.js. 


Arquivamento Especifica o URL das classes Java para download dos controles de applet cfgrid, cfslider e cítree. O local padrão é 
ICFIDE/classes/cfapplets.jar. 


Altura Especifica a altura do formulário. 

Largura Especifica a largura do formulário. 

Exibir Editor de tags para cfform Permite que você edite as propriedades não listadas no Inspetor de propriedades. 
. Insira os controles de formulário do ColdFusion. 


Coloque o ponto de inserção onde deseja que o controle seja exibido no formulário do ColdFusion e, em seguida, selecione o controle no 
menu Inserir (Inserir > Objetos do ColdFusion > CFForm) ou na categoria CFForm do painel Inserir. 


. Se necessário, defina as propriedades do controle usando o Inspetor de propriedades. 


Verifique se o controle está selecionado na visualização Design e, em seguida, defina as propriedades no Inspetor de propriedades. Para 
obter mais informações sobre as propriedades, clique no ícone Ajuda do Inspetor de propriedades. 


. Ajuste o layout do formulário do ColdFusion. 


Caso esteja criando um formulário baseado em HTML, você pode usar quebras de linha, quebras de parágrafo, textos pré-formatados ou 
tabelas para formatar os formulários. Você não pode inserir um formulário do ColdFusion em outro formulário do ColdFusion (ou seja, não é 
possível sobrepor tags), mas pode incluir mais de um formulário do ColdFusion em uma página. 


Caso você esteja criando um formulário baseado em Flash, use os estilos Folhas de estilos em cascatas (CSS) no layout do formulário. O 
ColdFusion ignora qualquer HTML no formulário. 


Lembre-se de identificar os campos do formulário do ColdFusion com um texto descritivo para que os usuários saibam ao que estão 
respondendo. Por exemplo, crie um rótulo “Digite o seu nome” para solicitar informações sobre o nome. 
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z as : Para o início 
Inserir controles de formulário do ColdFusion 
Use o painel Inserir ou o menu Inserir para inserir rapidamente os controles de formulário do ColdFusion em um formulário do ColdFusion. Você 
precisa criar um formulário do ColdFusion em branco antes de inserir controles nele. 


Nota: Esses aprimoramentos só estão disponíveis caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou 
posterior. 

1. Na visualização Design, coloque o ponto de inserção dentro do contorno do formulário. 

2. Selecione o controle no menu Inserir (Inserir > Objetos do ColdFusion > CFForm) ou na categoria CFForm do painel Inserir. 


3. Clique no controle da página para selecioná-la e, em seguida, definir suas propriedades no Inspetor de propriedades. 


Para obter informações sobre as propriedades de controles específicos, consulte os tópicos sobre os controles. 


S « P. iníci 
Inserir campos de texto do ColdFusion Ei 


Você pode inserir virtualmente um campo de texto do ColdFusion ou campo de senha no formulário e, em seguida, definir suas opções. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 


Inserir virtualmente um campo de texto do ColdFusion 
1. Na visualização Design, coloque o ponto de inserção dentro do contorno do formulário. 


2. Na categoria CFForm do painel Inserir, clique no ícone Campo de texto do CF ou selecione Inserir > Objetos do ColdFusion > CFForm > 
CFtextfield. 


Um campo de texto é exibido no formulário. 


3. Selecione o campo de texto e defina suas propriedades no Inspetor de propriedades. 
4. Para identificar o campo de texto na página, clique ao lado dele e digite o texto do rótulo. 


Inserir visualmente um campo de senha 
1. Repita as etapas 1 e 2 do procedimento anterior para inserir um campo de texto. 
2. Selecione o campo de texto inserido para exibir o seu Inspetor de propriedades. 
3. Selecione o valor Senha no menu pop-up Modo de texto do Inspetor de propriedades. 


Opções de CFTextField (ColdFusion) 
Para definir as opções de um campo de texto ou de senha do ColdFusion, defina uma das seguintes opções no Inspetor de propriedades de 
CFTextField: 


CFtextfield Define o atributo id da tag <cfinput>. 

Valor Permite que você especifique o texto a ser exibido no campo quando a página for aberta pela primeira vez em um navegador. As 
informações podem ser estáticas ou dinâmicas. 

Para especificar um valor dinâmico, clique no ícone de raio ao lado da caixa Valor e selecione a coluna de um conjunto de registros na caixa de 
diálogo Dados dinâmicos. A coluna do conjunto de registros fornece um valor para o campo de texto quando você exibe o formulário em um 
navegador. 


Modo de texto Permite que você alterne os campos de entrada de texto e de senha padrão. O atributo modificado por esse controle é type. 
Somente leitura Permite que você torne o texto exibido somente leitura. 

Comprimento máximo Define o número máximo de caracteres aceitos pelo campo de texto. 

Máscara Permite que você especifique uma máscara para o texto solicitado. Você usa essa propriedade para validar a entrada do usuário. O 
formato da máscara é constituído pelos caracteres A, 9, X e ?. 

Nota: O atributo mask é ignorado para a tag cfinput type="password"”. 

Validar Especifica o tipo de validação do campo atual. 

Validar em Especifica quando o campo é validado: onSubmit, onBlur ou onServer. 

Rótulo Permite que você especifique um rótulo para o campo de texto. 

Padrão Permite que você especifique um padrão de expressão regular JavaScript para validar a entrada. Omita barras à esquerda e à direita. 
Para obter mais informações, consulte a documentação do ColdFusion. 

Altura Permite que você especifique a altura do controle, em pixels. 

Largura Permite que você especifique a largura do controle, em pixels. 

Tamanho Permite que você especifique o tamanho do controle. 

Obrigatório Permite que você especifique se o campo de texto deve ou não conter dados para que o formulário seja enviado ao servidor. 
Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


5 à Para o início 
Inserir campos ocultos do ColdFusion ii 
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Você pode inserir visualmente um campo oculto do ColdFusion no formulário e definir suas propriedades. Use campos ocultos para armazenar e 
enviar informações não inseridas pelo usuário. As informações permanecem ocultas ao usuário. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Na visualização Design, coloque o ponto de inserção dentro do contorno do formulário. 
2. Na categoria CFForm do painel Inserir, clique no ícone Campo oculto do CF. 


Um marcador é exibido no formulário do ColdFusion. Se você não vir o marcador, selecione Exibir > Auxílios visuais > Elementos invisíveis. 


3. Selecione o campo oculto na página e defina uma das seguintes opções no Inspetor de propriedades: 
Cfhiddenfield Permite que você especifique o nome exclusivo do campo oculto. 


Valor Permite que você especifique um valor para o campo oculto. Os dados podem ser estáticos ou dinâmicos. 


Para especificar um valor dinâmico, clique no ícone de raio ao lado da caixa Valor e selecione a coluna de um conjunto de registros na 
caixa de diálogo Dados dinâmicos. A coluna do conjunto de registros fornece um valor para o campo de texto quando você exibe o 
formulário em um navegador. 


Validar Especifica o tipo de validação do campo atual. 
Validar em Especifica quando o campo é validado: onSubmit, onBlur ou onServer. 


Rótulo Permite que você especifique um rótulo para o controle. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Padrão Permite que você especifique um padrão de expressão regular JavaScript para validar a entrada. Omita barras à esquerda e à 
direita. Para obter mais informações, consulte a documentação do ColdFusion. 


Altura Permite que você especifique a altura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Largura Permite que você especifique a largura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Tamanho Permite que você especifique o tamanho do controle. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Obrigatório Permite que você especifique se o campo oculto deve ou não conter dados para que o formulário seja enviado ao servidor. 


Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


frcé sad É Para o início 
Inserir áreas de texto do ColdFusion 


Você pode inserir visualmente uma área de texto do ColdFusion no formulário e definir suas propriedades. Uma área de texto é um elemento de 
entrada que consiste em várias linhas de texto. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Coloque o ponto de inserção dentro do contorno do formulário. 
2. Na categoria CFForm do painel Inserir, clique no ícone Área de texto do CF. 


Uma área de texto é exibida no formulário do ColdFusion. 


3. Selecione a área de texto na página e defina uma das seguintes opções no Inspetor de propriedades: 
Cftextarea Permite que você especifique um nome exclusivo para o controle. 


Largura do caractere Permite que você defina o número de caracteres por linha. 

Número de linhas Permite que você defina o número de linhas a serem exibidas na área de texto. 

Quebra automática de linha Permite que você especifique como quebrar automaticamente a linha do texto digitado pelos usuários. 
Obrigatório Permite que você especifique se o usuário deve inserir dados no campo (marcado) ou não (desmarcado). 


Valor inicial Permite que você especifique o texto a ser exibido na área de texto quando a página for inicialmente aberta em um 
navegador. 


Validar Especifica o tipo de validação do campo. 

Validar em Especifica quando o campo é validado: onSubmit, onBlur ou onServer. 

Rótulo Permite que você especifique um rótulo para o controle. 

Estilo Permite que você especifique um estilo para o controle. Para obter mais informações, consulte a documentação do ColdFusion. 


Altura Permite que você especifique a altura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Largura Permite que você especifique a largura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 
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Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


4. Para identificar a área de texto, clique ao lado dela e digite o texto do rótulo. 


E x E Para o início 
Inserir botões do ColdFusion pa 


Você pode inserir visualmente um botão do ColdFusion no formulário e definir suas propriedades. Os botões do ColdFusion controlam as 
operações de formulário do ColdFusion. Eles podem ser usados no envio dos dados de formulário do ColdFusion para o servidor ou na 
redefinição do formulário do ColdFusion. Os botões padrão do ColdFusion costumam estar identificados com os rótulos Enviar, Redefinir ou 
Enviar. Você também pode atribuir outras tarefas de processamento definidas em um script. Por exemplo, o botão pode calcular o custo total dos 
itens selecionados com base em valores atribuídos. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Coloque o ponto de inserção dentro do contorno do formulário do ColdFusion. 
2. Na categoria CFForm do painel Inserir, clique no ícone Botão do CF. 


Um botão é exibido no formulário do ColdFusion. 


3. Selecione o botão na página e defina uma das seguintes opções no Inspetor de propriedades: 
Cfbutton Permite que você especifique um nome exclusivo para o controle. 


Ação Permite que você especifique o tipo de botão a ser criado. 
Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


As demais propriedades são ignoradas pelo servidor do ColdFusion durante o runtime. 


; aa , Para o início 
Inserir caixas de seleção do ColdFusion e 


Você pode inserir visualmente uma caixa de seleção do ColdFusion no formulário e definir suas propriedades. Use as caixas de seleção para 
permitir que os usuários escolham mais de uma opção em um conjunto de opções. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Coloque o ponto de inserção dentro do contorno do formulário. 
2. Na categoria CFForm do painel Inserir, clique no ícone Caixa de seleção do CF. 


Uma caixa de seleção é exibida no formulário do ColdFusion. 


3. Selecione a caixa de seleção na página e defina uma das seguintes opções no Inspetor de propriedades: 
Cfcheckbox Permite que você especifique um nome exclusivo para o controle. 


Valor marcado Permite que você especifique um valor a ser retornado pela caixa de seleção caso o usuário a marque. 


Estado inicial Permite que você especifique se a caixa de seleção permanece marcada quando a página é aberta pela primeira vez em um 
navegador. 


Validar Especifica o tipo de validação da caixa de seleção. 
Validar em Especifica quando a caixa de seleção é validada: onSubmit, onBlur ou onServer. 
Rótulo Permite que você especifique um rótulo para a caixa de seleção. 


Padrão Permite que você especifique um padrão de expressão regular JavaScript para validar a entrada. Omita barras à esquerda e à 
direita. Para obter mais informações, consulte a documentação do ColdFusion. 


Altura Permite que você especifique a altura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Largura Permite que você especifique a largura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Tamanho Permite que você especifique o tamanho do controle. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Obrigatório Permite que você especifique se a caixa de seleção deve permanecer marcada para que o formulário seja enviado ao 
servidor. 


Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


4. Para identificar a caixa de seleção, clique ao lado dela na página e digite o texto do rótulo. 


' E a a Para o início 
Inserir botões de opção do ColdFusion 


Você pode inserir visualmente um botão de opção do ColdFusion no formulário e definir suas propriedades. Use botões de opção quando quiser 


625 


que os usuários selecionem apenas uma dentre um conjunto de opções. Os botões de opção costumam ser usados em grupos. Todos os botões 
de opção em um grupo devem ter o mesmo nome. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Coloque o ponto de inserção dentro do contorno do formulário. 
2. Selecione Inserir > Objetos do ColdFusion > CFForm > CFradiobutton. 


Um botão de opção é exibido no formulário do ColdFusion. 


3. Selecione o botão de opção na página e defina uma das seguintes opções no Inspetor de propriedades: 
Cfradiobutton Permite que você especifique um nome exclusivo para o controle. 


Valor marcado Permite que você especifique um valor a ser retornado pelo botão de opção caso o usuário a marque. 


Estado inicial Permite que você especifique se o botão de opção permanece selecionado quando a página é aberta pela primeira vez em 
um navegador. 


Validar Especifica o tipo de validação do botão de opção. 
Validar em Especifica quando o botão de opção é validado: onSubmit, onBlur ou onServer. 
Rótulo Permite que você especifique um rótulo para o botão de opção. 


Padrão Permite que você especifique um padrão de expressão regular JavaScript para validar a entrada. Omita barras à esquerda e à 
direita. Para obter mais informações, consulte a documentação do ColdFusion. 


Altura Permite que você especifique a altura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Largura Permite que você especifique a largura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Tamanho Permite que você especifique o tamanho do controle. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Obrigatório Permite que você especifique se o botão de opção deve permanecer selecionado para que o formulário seja enviado ao 
servidor. 


Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


4. Para identificar o botão de opção, clique ao lado dele na página e digite o texto do rótulo. 


a à =” « P. iníci 
Inserir caixas de marcação do ColdFusion nd 


Você pode inserir visualmente uma caixa de marcação do ColdFusion no formulário e definir suas propriedades. Uma caixa de marcação permite 
que um visitante selecione um ou mais itens de uma lista. As caixas de marcação são úteis quando você tem uma quantidade de espaço 
limitada, mas precisa exibir muitos itens. Elas também são muito úteis quando você deseja controlar os valores retornados ao servidor. 
Diferentemente dos campos de texto, nos quais os usuários digitam o que querem, inclusive dados inválidos, com as caixas de marcação, você 
pode definir os valores exatos retornados por um menu. 


Você pode inserir dois tipos de caixas de marcação em um formulário: um menu que é “suspenso” quando o usuário clica nele ou um menu que 
exibe uma lista rolável de itens que o usuário pode selecionar. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Coloque o ponto de inserção dentro do contorno do formulário. 
2. Na categoria CFForm do painel Inserir, clique no ícone Marcação do CF. 


Uma caixa de marcação é exibida no formulário do ColdFusion. 


3. Selecione a caixa de marcação na página e defina uma das seguintes opções no Inspetor de propriedades: 
Císelect Permite que você especifique um nome exclusivo para o controle. 


Tipo Permite que você escolha um menu pop-up ou uma lista. Caso você selecione o tipo lista, as opções Listar altura e Permitir várias 
seleções de lista são disponibilizadas. 


Listar altura Permite que você especifique o número de linhas a serem exibidas no menu da lista. Só disponível caso você selecione o tipo 
lista. 


Permitir várias seleções de lista Permite que você especifique se o usuário pode selecionar mais de uma opção da lista por vez. Só 
disponível caso você selecione o tipo lista. 


Editar valores Abre uma caixa de diálogo que lhe permite adicionar, editar ou remover opções da caixa de marcação. 


Selecionados inicialmente Permite que você especifique a opção selecionada por padrão. Você pode selecionar mais de uma opção caso 
tenha selecionado a opção Permitir várias seleções de lista. 


Conjunto de registros Permite que você especifique o nome da consulta do ColdFusion que deseja usar para preencher a lista ou o 
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menu. 


Exibir coluna Permite que você especifique a coluna do conjunto de registros para fornecer o rótulo de exibição de cada elemento da lista. 
Usado com a propriedade Conjunto de registros. 


Coluna de valor Permite que você especifique a coluna do conjunto de registros para fornecer o valor de cada elemento da lista. Usado 
com a propriedade Conjunto de registros. 


Rótulo do Flash Permite que você especifique um rótulo para a caixa de marcação. 


Altura do Flash Permite que você especifique a altura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion 
durante o runtime. 


Largura do Flash Permite que você especifique a largura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion 
durante o runtime. 


Mensagem Especifica a mensagem a ser exibida se a propriedade Obrigatório for definida como Sim e o usuário deixar de fazer uma 
seleção antes de enviar o formulário. 


Obrigatório Permite que você especifique se um item de menu deve permanecer selecionado para que o formulário seja enviado ao 
servidor. 


Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


Para o início 


Inserir campos de imagem do ColdFusion 


Você pode inserir visualmente um campo de imagem do ColdFusion no formulário e definir suas opções. Use os campos de imagem para criar 
botões personalizados. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 


1. Na visualização Design, coloque o ponto de inserção dentro do contorno do formulário. 


2. Na categoria CFForm do painel Inserir, clique no ícone Campo de imagem do CF. Navegue para selecionar a imagem a ser inserida e 
clique em OK. Se desejar, você pode digitar o caminho do arquivo de imagem na caixa Origem. 
Nota: Caso a imagem esteja fora da pasta raiz do site, você deve copiar a imagem para a pasta raiz. As imagens que estão fora da pasta 
raiz talvez não estejam acessíveis quando você publicar o site. 


3. Selecione o campo da imagem na página e defina uma das seguintes opções no Inspetor de propriedades: 
Cfimagefield Permite que você especifique um nome exclusivo para o controle. 


Origem Permite que você especifique o URL da imagem inserida. 

Alt Permite que você especifique uma mensagem quando a imagem não puder ser exibida. 
Alinhar Permite que você especifique o alinhamento da figura. 

Borda Permite que você defina a largura da borda da imagem. 

Editar imagem Abra a imagem no editor de imagens padrão. 


Para definir um editor de imagens padrão, selecione Editar > Preferências > Tipos de arquivos / editores. Do contrário, o botão Editar 
imagem não realiza nenhuma ação. 


Validar Especifica o tipo de validação do campo de imagem. 
Validar em Especifica quando o campo é validado: onSubmit, onBlur ou onServer. 
Rótulo Permite que você especifique um rótulo para o botão de opção. 


Padrão Permite que você especifique um padrão de expressão regular JavaScript para validar a entrada. Omita barras à esquerda e à 
direita. Para obter mais informações, consulte a documentação do ColdFusion. 


Altura Permite que você especifique a altura do controle, em pixels. 
Largura Permite que você especifique a largura do controle, em pixels. 


Tamanho Permite que você especifique o tamanho do controle. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Obrigatório Permite que você especifique se o controle deve ou não conter dados para que o formulário seja enviado ao servidor. 


Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


Para o início 


Inserir campos de arquivo do ColdFusion 


Você pode inserir visualmente um campo de arquivo do ColdFusion no formulário e definir suas propriedades. Use um campo de arquivo para 
permitir que os usuários selecionem um arquivo do computador como, por exemplo, um documento de processamento de textos ou um arquivo 


gráfico e carreguem-no servidor. Um campo de arquivo do ColdFusion é semelhante aos demais arquivos de texto, exceto por também conter um 
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botão Procurar. Os usuários podem digitar manualmente o caminho do arquivo que desejam carregar ou usar o botão Procurar para localizar e 
selecionar o arquivo. 


Os campos de arquivo exigem que você use o método POSTAR para transmitir os arquivos do navegador para o servidor. O arquivo é postado no 
endereço que você especificou na caixa Ação do formulário. Entre em contato com o administrador do sistema para confirmar se há permissão 
para carregamentos de arquivo anônimos antes de usar um campo de arquivo no formulário. 


Os campos de arquivo também exigem que a codificação do formulário seja definida como multipart/form. O Dreamweaver define isso 

automaticamente quando você insere um controle do campo de arquivo. 

Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Na visualização Design, selecione CFForm para exibir o Inspetor de propriedades. 

Para selecionar rapidamente o formulário, clique em qualquer lugar do contorno na tag<cfform> do seletor na parte inferior da janela 

Documento. 

No Inspetor de propriedades, defina o método do formulário como POSTAR. 

No menu pop-up Tipo de codif., selecione multipart/form-data. 

Posicione o ponto de inserção dentro do contorno do formulário onde você deseja que o campo de arquivo seja exibido. 


rw 


Selecione Inserir > Objetos do ColdFusion > CFForm > CFfilefield. 
Um campo de arquivo é exibido no documento. 


6. Selecione o campo de arquivo na página e defina uma das seguintes propriedades no Inspetor de propriedades: 
Cffilefield Permite que você especifique um nome exclusivo para o controle. 


Comprimento máximo Permite que você especifique o número máximo de caracteres que o caminho do arquivo pode ter. 
Validar Especifica o tipo de validação do campo. 

Validar em Especifica quando o campo é validado: onSubmit, onBlur ou onServer. 

Rótulo Permite que você especifique um rótulo para o campo. 


Padrão Permite que você especifique um padrão de expressão regular JavaScript para validar a entrada. Omita barras à esquerda e à 
direita. Para obter mais informações, consulte a documentação do ColdFusion. 


Altura Permite que você especifique a altura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Largura Permite que você especifique a largura do controle, em pixels. Essa propriedade é ignorada pelo servidor do ColdFusion durante o 
runtime. 


Tamanho Permite que você especifique o tamanho do controle. 


Obrigatório Permite que você especifique se o campo de arquivo deve ou não conter dados para que o formulário seja enviado ao 
servidor. 


Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


; , nagar 
Inserir campos de data do ColdFusion ara o início 


Embora você não possa inserir visualmente um campo de data do ColdFusion no Dreamweaver, é possível definir visualmente suas 
propriedades. Um campo de data do ColdFusion é um tipo de campo de texto especial que permite aos usuários selecionar uma data em um 
calendário pop-up e inseri-la no campo de texto. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Na visualização Design, selecione CFForm para exibir o Inspetor de propriedades. 


Para selecionar rapidamente o formulário, clique em qualquer lugar do contorno na tag<cfform> do seletor na parte inferior da janela 
Documento. 


2. No Inspetor de propriedades, defina a propriedade Formato do formulário como Flash. 
O controle do campo de data só pode ser processado em formulários do ColdFusion baseados em Flash. 

3. Alterne para a visualização Código (Exibir > Código) e insira a seguinte tag em qualquer lugar entre as tags CFForm de abertura e de 
finalização: 
<cfinput name="datefield" type="datefield"> 

4. Alterne para a visualização Design, selecione o campo de data na página e, em seguida, defina uma das seguintes opções no Inspetor de 


propriedades: 
Cfdatefield Permite que você especifique um nome exclusivo para o controle. 


Valor Permite que você especifique uma data a ser exibida no campo quando a página for aberta pela primeira vez em um navegador. A 
data pode ser estática ou dinâmica. 
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Para especificar um valor dinâmico, clique no ícone de raio ao lado da caixa Valor e selecione a coluna de um conjunto de registros na 
caixa de diálogo Dados dinâmicos. A coluna do conjunto de registros fornece um valor para o campo de data quando você exibe o 
formulário em um navegador. 


Validar Especifica o tipo de validação do campo. 
Validar em Especifica quando o campo é validado: onSubmit, onBlur ou onServer. 
Rótulo Permite que você especifique um rótulo para o campo. 


Padrão Permite que você especifique um padrão de expressão regular JavaScript para validar a entrada. Omita barras à esquerda e à 
direita. Para obter mais informações, consulte a documentação do ColdFusion. 


Altura Permite que você especifique a altura do controle, em pixels. 
Largura Permite que você especifique a largura do controle, em pixels. 
Tamanho Permite que você especifique o tamanho do controle. 


Obrigatório Permite que você especifique se o campo de data deve ou não conter um valor para que o formulário seja enviado ao 
servidor. 


Exibir editor de tags Permite que você edite as propriedades não listadas no Inspetor de propriedades. 


ag ida E Para o início 
Modificar controles de formulário do ColdFusion : 


Você pode alterar visualmente as propriedades dos controles de formulário do ColdFusion independentemente de estar trabalhando na 
visualização Design ou Código. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Na visualização Design, selecione o controle de formulário na página; na visualização Código, clique em qualquer lugar dentro da tag do 
controle. 


O Inspetor de propriedades exibe as propriedades do controle de formulário. 
2. Altere as propriedades do controle no Inspetor de propriedades. 
Para obter mais informações, clique no ícone Ajuda do Inspetor de propriedades. 


3. Para definir mais propriedades, clique no botão Exibir editor de tags do Inspetor de propriedades e defina as propriedades no Editor de tags 
exibido. 


Validar dados de formulário do ColdFusion dic 


Você pode criar formulários do ColdFusion no Dreamweaver que verifiquem o conteúdo de campos especificados para garantir que o usuário 
inseriu o tipo de dados correto. 


Nota: Esse aprimoramento só está disponível caso você tenha acesso a um computador que esteja executando o ColdFusion MX 7 ou posterior. 
1. Crie um formulário do ColdFusion que inclua pelo menos um campo de entrada e um botão Enviar. Verifique se todos os campos do 
ColdFusion que você deseja validar têm um nome exclusivo. 


2. Selecione um campo no formulário que você deseja validar. 
3. No Inspetor de propriedades, especifique como você deseja validar o campo. 


A parte inferior de cada Inspetor de propriedades de entrada contém controles que lhe ajudam a definir a regra de validação específica. Por 
exemplo, talvez você queira especificar se um campo de texto deve conter um número de telefone. Para isso, selecione Telefone no menu 
pop-up Valor do Inspetor de propriedades. Você também pode especificar quando validar no menu pop-up Validar em. 


Mais tópicos da Ajuda 
Configurar um servidor de teste 


(9) ex-nc-sa ) 


Avisos legais | Política de privacidade on-line 
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Criação de uma página de registro de atualização (CS6) 


Sobre as páginas de atualização do registro 

Procurar o registro a ser atualizado 

Criar links para a página de atualização 

Recuperar o registro a ser atualizado 

Concluir a página de atualização bloco por bloco 
Concluir a página de atualização em uma única operação 
Opções de Propriedades do elemento de formulário 


Ri « as « P iníci 
Sobre as páginas de atualização do registro aid dda 


O aplicativo pode conter um conjunto de páginas que permite aos usuários atualizar registros existentes em uma tabela do banco de dados. As 
páginas normalmente consistem em uma página de pesquisa, uma página de resultados e uma página de atualização. As páginas de pesquisa e 
de resultados permitem aos usuários recuperar o registro e a página de atualização permite aos usuários modificá-lo. 


á g Para o início 
Procurar o registro a ser atualizado 


Quando querem atualizar um registro, os usuários devem inicialmente localizá-lo no banco de dados. Dessa forma, você precisa de uma página 
de pesquisa e resultados para usar a página de atualização. O usuário insere os critérios na página de pesquisa e seleciona o registro na página 
de resultados. Quando o usuário clica no registro da página de resultados, a página de atualização é aberta exibindo o registro em um formulário 
em HTML. 


Para o início 


Criar links para a página de atualização 


Depois de criar as páginas de pesquisa e de resultados, você cria links na página de resultados para abrir a página de atualização. Em seguida, 
você modifica os links para passar as IDs dos registros selecionados pelo usuário. A página de atualização usa essa ID para localizar o registro 
solicitado no banco de dados e exibi-lo. 


Você usa o mesmo processo para abrir a página de atualização e passar uma ID de registro da abertura de uma página detalhada e da 
passagem de uma ID de registro. Para obter mais informações, consulte Criar links para a página detalhada. 


, ê Para o início 
Recuperar o registro a ser atualizado 


Depois que a página de resultados passa o ID do registro para a página de atualização identificando o registro a ser atualizado, a página de 
atualização deve ler o parâmetro, recuperar o registro da tabela do banco de dados e armazená-lo temporariamente em um conjunto de registros. 


1. Crie uma página no Dreamweaver e a salve. 
A página se tornará a página de atualização. 
2. No painel Ligações (Janela > Ligações), clique no botão de adição (+) e selecione Conjunto de registros. 


Caso seja exibida a caixa de diálogo avançada, clique em Simples. A caixa de diálogo avançada tem uma área de texto para inserir 
instruções SQL; a simples, não. 

3. Nomeie o conjunto de registros e especifique onde os dados que você deseja atualizar estão localizados usando os menus pop-up 
Conexão e Tabela. 


4. Clique em Selecionado e selecione uma coluna da chave (normalmente a coluna da ID de registro) e as colunas que contêm os dados a 
serem atualizados. 


5. Configure a área Filtro de forma que o valor da coluna da chave seja igual ao valor do parâmetro de URL correspondente passado pela 
página de resultados. 


O tipo de filtro cria um conjunto de registros que contém apenas o registro especificado pela página de resultados. Por exemplo, caso a 
coluna da chave contenha informações da ID de registro e se chame PRID e caso a página de resultados passe as informações da ID de 
registro correspondente no parâmetro de URL chamado id, a área Filtro deve ser semelhante ao seguinte exemplo: 


Filtro: fpriD =] [= =] 
[urL Parameter *] jo 
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6. 


Concluir a página de atualização bloco por bloco 


Clique em OK. 


Quando o usuário seleciona um registro na página de resultados, a página de atualização gera um conjunto de registros contendo apenas o 
registro selecionado. 


Para o início 


Uma página de atualização tem três blocos de criação: 


Um conjunto de registros filtrado para recuperar o registro de uma tabela do banco de dados 
Um formulário em HTML para permitir aos usuários modificar os dados do registro 
Um comportamento de servidor Atualizar registro para atualizar a tabela do banco de dados 


Você pode adicionar separadamente os dois blocos de criação básicos finais de uma página de atualização usando as ferramentas de 
formulário e o painel Comportamentos de servidor. 


Adicionar um formulário em HTML a uma página de atualização 


4. 
2. 
3. 


Crie uma página (Arquivo > Novo > Página em branco). Essa se torna a página de atualização. 

Crie o layout da página usando as ferramentas de design do Dreamweaver. 

Adicione um formulário em HTML colocando o ponto de inserção onde você deseja que o formulário seja exibido e selecionando Inserir > 
Formulário > Formulário. 


É criado um formulário vazio na página. Você talvez precise ativar os Elementos invisíveis (Exibir > Auxílios visuais > Elementos invisíveis) 
para ver os limites do formulário, representados por linhas finas em vermelho. 


. Nomeie o formulário em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o formulário, abrindo o 


Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulário. 


Você não precisa especificar um atributo action ou method para o formulário a fim de informá-lo para onde e como enviar os dados do 
registro quando o usuário clicar no botão Enviar. O comportamento de servidor Atualizar registro define esses atributos para você. 


. Adicione um objeto de formulário como, por exemplo, um campo de texto (Inserir > Formulário > Campo de texto) para cada coluna a ser 


atualizada na tabela do banco de dados. 


Os objetos de formulário se destinam à entrada de dados. Os campos de texto são comuns a esse propósito, mas você também pode usar 
menus, opções e botões de opção. 


Cada objeto de formulário deve ter uma coluna correspondente no conjunto de registros definido anteriormente. A única exceção é a coluna 
de chave exclusiva, que não deve ter nenhum objeto de formulário correspondente. 


. Adicione um botão Enviar ao formulário (Inserir > Formulário > Botão). 


Você pode alterar o rótulo do botão Enviar selecionando o botão, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo 
um novo valor na caixa Rótulo. 


Exibir o registro no formulário 


Ea 


Verifique se você definiu um conjunto de registros para manter o registro a ser atualizado pelo usuário. 
Consulte Recuperar o registro a ser atualizado. 
Ligue todos os objetos de formulário no conjunto de registro conforme a descrição nas seguintes etapas: 
e 
º 
e 
º 


Adicionar um comportamento de servidor para atualizar a tabela do banco de dados 


1. 


O» O O IM 


No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Atualizar registro 
no menu pop-up. 


A caixa de diálogo Atualizar registro é exibida. 

Selecione um formulário no menu pop-up Enviar valores de. 

No menu pop-up Fonte de dados ou Conexão, selecione uma conexão com o banco de dados. 

Digite o nome do usuário e a senha, se aplicável. 

No menu pop-up Atualizar tabela, selecione a tabela do banco de dados que contém o registro da atualização. 

(ColdFusion, PHP) Especifique uma coluna do banco de dados a ser atualizada, selecione o objeto de formulário que atualizará a coluna no 
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menu pop-up Valor, escolha o tipo de dados do objeto de formulário no menu pop-up Enviar como e selecione Chave primária, caso queira 
identificar essa coluna como a chave primária. 


O tipo de dados é o tipo que a coluna na tabela do banco de dados está esperando (texto, numérico, valores de opção boolianos). 
Repita o procedimento para todos os objetos no formulário. 


7. (ASP) No menu pop-up Selecionar registro em, especifique o conjunto de registros que contém o registro exibido no formulário em HTML. 
No menu pop-up Coluna de chave exclusiva, selecione uma coluna de chave (normalmente a coluna da ID de registro) para identificar o 
registro na tabela do banco de dados. Selecione a opção Numérico, caso o valor seja um número. Uma coluna de chave normalmente 
aceita apenas valores numéricos, embora aceite valores de texto às vezes. 


8. Na caixa Ir para, Após a atualização ou Se obtiver êxito, insira a página a ser aberta após a atualização do registro na tabela ou clique no 
botão Procurar para procurar o arquivo. 


9. (ASP) Especifique uma coluna do banco de dados a ser atualizada, selecione o objeto de formulário que irá atualizar a coluna no menu 
pop-up Valor e um tipo de dados para o objeto de formulário no menu pop-up Enviar como. O tipo de dados é o tipo que a coluna na tabela 
do banco de dados está esperando (texto, numérico, valores de opção boolianos). Repita o procedimento para todos os formulários. 


10. Clique em OK. 


O Dreamweaver adiciona um comportamento de servidor à página que permite aos usuários atualizar registros em uma tabela do banco de 
dados modificando as informações exibidas no formulário em HTML e clicando no botão Enviar. 


Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas 
vezes no comportamento Atualizar registro. 


ã sã E aa sé a as Para o início 
Concluir a página de atualização em uma única operação 


Uma página de atualização tem três blocos de criação: 
* Um conjunto de registros filtrado para recuperar o registro de uma tabela do banco de dados 
* Um formulário em HTML para permitir aos usuários modificar os dados do registro 
* Um comportamento de servidor Atualizar registro para atualizar a tabela do banco de dados 


Você pode adicionar os dois blocos de criação finais de uma página de atualização em uma única operação usando o objeto de dados Registrar 
formulário de atualização. O objeto de dados adiciona um formulário em HTML e um comportamento de servidor Atualizar registro à página. 


Para que você possa usar o objeto de dados, o aplicativo da Web deve ser capaz de identificar o registro a ser atualizado e a página de 
atualização deve ser capaz de recuperá-lo. 


Depois que o objeto de dados coloca os blocos de criação na página, você pode usar as ferramentas de design do Dreamweaver para 
personalizar o formulário ao seu gosto, ou o painel Comportamentos de servidor para editar o comportamento de servidor Atualizar registro. 


Nota: A página de atualização pode conter apenas um comportamento de servidor para edição do registro por vez. Por exemplo, você não pode 
adicionar um comportamento de servidor Inserir registro ou Excluir registro à página de atualização. 


1. Abra a página na Visualização de design e selecione Inserir > Objetos de dados > Atualizar registro > Assistente para registrar formulário 
de atualização. 


A caixa de diálogo Registrar formulário de atualização é exibida. 
2. No menu pop-up Conexão, selecione uma conexão com o banco de dados. 
Clique no botão Definir caso você precise definir uma conexão. 


3. No menu pop-up Tabela a ser atualizada, selecione a tabela do banco de dados que contém o registro da atualização. 

4. No menu pop-up Selecionar registro em, especifique o conjunto de registros que contém o registro exibido no formulário em HTML. 

5. No menu pop-up Coluna de chave exclusiva, selecione uma coluna de chave (normalmente a coluna da ID de registro) para identificar o 
registro na tabela do banco de dados. 


Caso o valor seja um número, selecione a opção Numérico. Uma coluna de chave normalmente aceita apenas valores numéricos, embora 
aceite valores de texto às vezes. 


6. Em Após a atualização, caixa Ir para, insira a página a ser aberta após a atualização do registro na tabela. 
7. Na área Campos de formulário, especifique quais colunas da tabela do banco de dados cada objeto de formulário deve atualizar. 


Por padrão, o Dreamweaver cria um objeto de formulário para cada coluna na tabela do banco de dados. Caso o banco de dados gere 
automaticamente IDs de chave exclusiva para cada novo registro criado, remova o objeto de formulário correspondente à coluna da chave 
selecionando-o na lista e clicando no botão de subtração (-). Isso elimina o risco de que o usuário do formulário insira um valor de ID já 
existente. 


Você também pode alterar a ordem dos objetos no formulário em HTML selecionando um objeto de formulário na lista e clicando na seta 
para cima ou para baixo à direita da caixa de diálogo. 


8. Especifique como cada campo de entrada de dados deve ser exibido no formulário em HTML clicando em uma linha na tabela Campos de 
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9. 


10. 


formulário e inserindo as seguintes informações nas caixas abaixo da tabela: 


e Na caixa Rótulo, digite um rótulo descritivo a ser exibido ao lado do campo de entrada de dados. Por padrão, o Dreamweaver exibe o 
nome da coluna da tabela no rótulo. 


* No menu pop-up Exibir como, selecione um objeto de formulário para servir como campo de entrada de dados. Você pode selecionar 
Campo de texto, Área de texto, Menu, Caixa de seleção, Grupo de botões de opção e Texto. Para entradas somente leitura, selecione 
Texto. Você também pode selecionar Campo de senha, Campo de arquivo e Campo oculto. 


Nota: Os campos ocultos são inseridos ao final do formulário. 


e No menu pop-up Enviar como, selecione o formato de dados esperado pela tabela do banco de dados. Por exemplo, caso a coluna da 
tabela aceite apenas dados numéricos, selecione Numérico. 


e Defina as propriedades do objeto de formulário. Você conta com opções diferentes dependendo do objeto de formulário selecionado por 
você como o campo de entrada de dados. Para campos de texto, áreas de texto e texto, você pode inserir um valor inicial. Para menus 
e grupos de botões de opção, você abre outra caixa de diálogo a fim de definir as propriedades. Para opções, selecione a opção 
Marcado ou Desmarcado. 


Defina as propriedades dos demais objetos de formulário selecionando outra linha Campos de formulário e digitando um rótulo, valor Exibir 
como e valor Enviar como. 


Para menus e grupos de botões de opção, abra outra caixa de diálogo a fim de definir as propriedades. Para opções, defina uma 
comparação entre o valor do registro atual da opção e um determinado valor para saber se a opção está marcada quando o registro é 
exibido. 


Clique em OK. 
O Dreamweaver adiciona um formulário em HTML e um comportamento de servidor Atualizar registro à página. 


O objeto de dados adiciona um formulário em HTML e um comportamento de servidor Atualizar registro à página. Os objetos de formulário 
são colocados em uma tabela básica, que você pode personalizar usando as ferramentas de design de página do Dreamweaver. (Verifique 
se todos os objetos continuam dentro dos limites do formulário.) 


Para editar o comportamento de servidor, abra o painel Comportamentos de servidor (Janela > Comportamentos de servidor) e clique duas 
vezes no comportamento Atualizar registro. 


Para o início 


Opções de Propriedades do elemento de formulário 


O propósito da caixa de diálogo Propriedades do elemento de formulário é definir as opções dos elementos de formulário em páginas que 
permitam aos usuários atualizar registros de um banco de dados. 


1. Selecione Manualmente ou No banco de dados, dependendo da forma como planeja criar o elemento de formulário. 


E ad 


Clique no botão de adição (+) para adicionar um elemento. 

Digite um rótulo e um valor para o elemento. 

Na caixa Selecionar valor igual a, caso você queira que um determinado elemento esteja selecionado quando a página for aberta em um 
navegador ou quando um registro for exibido no formulário, insira um valor igual ao do elemento. 


Você pode inserir um valor estático ou especificar um valor dinâmico clicando no ícone do raio e selecionando um valor dinâmico na lista 
das fontes de dados. Em ambos os casos, o valor especificado deve ser correspondente a um dos valores do elemento. 


Mais tópicos da Ajuda 
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Criação de uma página de logon 


Sobre as páginas de logon 

Criar uma tabela de usuários registrados do banco de dados 

Adicionar um formulário em HTML para permitir aos usuários fazer logon 
Verificar o nome de usuário e a senha 


Para o início 


Sobre as páginas de logon 
O aplicativo da Web pode conter uma página que permite aos usuários registrados fazer logon no site. 
Uma página de logon é formada pelos seguintes blocos de criação: 
e Uma tabela de usuários registrados do banco de dados 
* Um formulário em HTML para permitir aos usuários digitar um nome de usuário e senha 
* Um comportamento de servidor Fazer logon do usuário para verificar se o nome de usuário e a senha digitados são válidos 


Uma variável de sessão que consiste no nome de usuário é criada para o usuário quando este faz logon com êxito. 


E EA = = P o e | 
Criar uma tabela de usuários registrados do banco de dados RR 


Você precisa de uma tabela de usuários registrados no banco de dados para verificar se o nome de usuário e a senha digitados na página de 
logon são válidos. 


*& Use o aplicativo de banco de dados e uma página de registro para criar a tabela. Para obter as instruções, consulte os tópicos relacionados 
abaixo. 

A próxima etapa da criação de uma página de logon é adicionar um formulário em HTML à página para permitir aos usuários fazer logon. 
Consulte o próximo tópico para obter instruções. 


E ER ea Er P. iníci 
Adicionar um formulário em HTML para permitir aos usuários fazer logon pa 


Você adiciona um formulário em HTML à página para permitir aos usuários fazer logon digitando um nome de usuário e senha. 


1. Crie uma página (Arquivo > Novo > Página em branco) e crie o layout da página de logon usando as ferramentas de design do 
Dreamweaver. 


2. Adicione um formulário em HTML colocando o ponto de inserção onde você deseja que o formulário seja exibido e escolhendo Formulário 
no menu Inserir. 


É criado um formulário vazio na página. Você talvez precise ativar os Elementos invisíveis (Exibir > Auxílios visuais > Elementos invisíveis) 
para ver os limites do formulário, representados por linhas finas em vermelho. 


3. Nomeie o formulário em HTML clicando na tag <form> na parte inferior da janela Documento para selecionar o formulário, abrindo o 
Inspetor de propriedades (Janela > Propriedades) e digitando um nome na caixa Formulário. 


Você não precisa especificar um atributo action ou method para o formulário a fim de informá-lo para onde e como enviar os dados do 
registro quando o usuário clicar no botão Enviar. O comportamento de servidor Fazer logon do usuário define esses atributos para você. 


4. Adicione um nome de usuário e um campo de texto de senha (Inserir > Formulário > Campo de texto) ao formulário. 


Adicione rótulos (como textos ou imagens) ao lado de cada campo de arquivo e alinhe os campos de texto os colocando em uma tabela em 
HTML e definindo o atributo border da tabela como O. 


5. Adicione um botão Enviar ao formulário (Inserir > Formulário > Botão). 


Você pode alterar o rótulo do botão Enviar selecionando o botão, abrindo o Inspetor de propriedades (Janela > Propriedades) e inserindo 
um novo valor na caixa Rótulo. 


A próxima etapa da criação de uma página de logon é adicionar o comportamento de servidor Fazer logon do usuário para verificar se o 
nome de usuário e a senha digitados são válidos. 


Cas gi ssa Para o início 
Verificar o nome de usuário e a senha a 
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Você deve adicionar um comportamento de servidor Fazer logon do usuário para verificar se o nome de usuário e a senha digitados por um 
usuário são válidos. 


Quando um usuário clica no botão Enviar da página de logon, o comportamento de servidor Fazer logon do usuário compara os valores inseridos 
pelo usuário com os valores dos usuários registrados. Caso os valores sejam correspondentes, o comportamento de servidor abre uma página 
(normalmente, a tela Bem-vindo do site). Caso os valores não sejam correspondentes, o comportamento de servidor abre outra página 
(normalmente, a página que alerta o usuário de falha na tentativa de logon). 


1. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Usar 
autenticação > Fazer logon do usuário no menu pop-up. 


Especifique o formulário e os objetos de formulário usados pelos visitantes para digitar nome de usuário e senha. 
(ColdFusion) Digite o nome do usuário e a senha, se aplicável. 
Especifique a tabela do banco de dados e as colunas que contêm os nomes de usuário e as senhas de todos os usuários registrados. 


O comportamento de servidor compara o nome de usuário e a senha digitados por um visitante na página de logon com os valores nessas 
colunas. 


5. Especifique uma página a ser aberta caso haja êxito no processo de logon. 
A página especificada costuma ser a tela Bem-vindo do site. 
6. Especifique uma página a ser aberta caso haja falha no processo de logon. 
A página especificada costuma alertar o usuário de que houve falha no processo de logon e permite que ele tente novamente. 


7. Caso você queira que os usuários sejam encaminhados para a página de logon depois de acessarem uma página restrita e retornarem a 
esta página após o logon, selecione a opção Ir para URL anterior. 


Caso um usuário tente acessar o site abrindo uma página restrita sem antes fazer o logon nela, a página restrita pode encaminhá-lo para a 
página de logon. Depois que o usuário consegue fazer o logon, a página de logon o redireciona para a página restrita que o encaminhou 
inicialmente para a página de logon. 


Quando completar a caixa de diálogo para o comportamento de servidor Restringir acesso à página nessas páginas, verifique se você 
especificou a página de logon em Se o acesso for negado, caixa Ir para. 


8. Especifique se você deve conceder acesso à página com base exclusivamente no nome de usuário e na senha ou também de acordo com 
o nível de autorização e clique em OK. 


Um comportamento de servidor é adicionado à página de logon que verifica se o nome de usuário e a senha digitados por um visitante são 
válidos. 


Mais tópicos da Ajuda 
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Criação de uma página de registro de exclusão 


Sobre as páginas de exclusão do registro 
Procurar o registro a ser excluído 

Criar links para uma página de exclusão 
Criar a página de exclusão 

Adicionar lógica para excluir o registro 


Para o início 


Sobre as páginas de exclusão do registro 


O aplicativo pode conter um conjunto de páginas que permite aos usuários excluir registros de um banco de dados. As páginas normalmente 
consistem em uma página de pesquisa, uma página de resultados e uma página de exclusão. Uma página de exclusão costuma ser uma página 
detalhada funcionando em conjunto com uma página de resultados. As páginas de pesquisa e de resultados permitem ao usuário recuperar o 
registro e a página de exclusão, confirmar e excluí-lo. 


Depois de criar as páginas de pesquisa e de resultados, você adiciona links na página de resultados para abrir a página de exclusão e, em 
seguida, criar uma página que exiba os registros e um botão Enviar. 


á ” Para o início 
Procurar o registro a ser excluído 


Quando querem excluir um registro, os usuários devem inicialmente localizá-lo no banco de dados. Dessa forma, você precisa de uma página de 
pesquisa e resultados para usar a página de exclusão. O usuário insere os critérios na página de pesquisa e seleciona o registro na página de 
resultados. Quando o usuário clica no registro, a página de exclusão é aberta exibindo o registro em um formulário em HTML. 


5 a boi ao Para o início 
Criar links para uma página de exclusão 


Depois de criar as páginas de pesquisa e de resultados, você deve criar links na página de resultados para abrir a página de exclusão. Em 
seguida, você modifica os links para passar as IDs dos registros a serem excluídos pelo usuário. A página de exclusão usa essa ID para localizar 
e exibir o registro. 


Para criar manualmente os links 


1. Na página de resultados, crie uma coluna na tabela usada para exibir os registros clicando dentro da última coluna da tabela e 
selecionando Modificar > Tabela > Inserir linhas ou colunas. 


2. Selecione as opções Colunas e Após coluna atual e clique em OK. 
Uma coluna é adicionada à tabela. 


3. Na coluna da tabela recém-criada, digite a sequência de caracteres Delete na linha que contém os alocadores de espaço do conteúdo 
dinâmico. Verifique se você digitou a sequência de caracteres na região com abas repetitivas. 


Você também pode inserir uma imagem com uma palavra ou símbolo a ser excluído. 


4. Selecione a sequência de caracteres Delete para aplicar um link a ela. 

5. No Inspetor de propriedades, insira a página de exclusão na caixa Link. Você pode digitar qualquer nome de arquivo. 
Após o clique fora da caixa Link, a sequência de caracteres Delete é exibida vinculada à tabela. Se ativar Visualização dinâmica, você pode 
ver se o link está aplicado ao mesmo texto em todas as linhas da tabela. 

6. Selecione o link Excluir na página de resultados. 

7. (ColdFusion) Na caixa Link do Inspetor de propriedades, adicione esta sequência de caracteres ao final do URL: 


?recordID=grecordsetName. fieldName& 


O ponto de interrogação informa ao servidor de que se trata de um ou mais parâmetros de URL. A palavra recordiD é o nome do parâmetro 
do URL (você pode dar a ele o nome que quiser). Anote o nome do parâmetro do URL porque você o usará na página de exclusão 
posteriormente. 


A expressão após o sinal de igual é o valor do parâmetro. Nesse caso, o valor é gerado por uma expressão do ColdFusion que retorna a ID 
de um registro do conjunto de registros. É gerada uma ID diferente para cada linha da tabela dinâmica. Na expressão do ColdFusion, 
substitua recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica 
com exclusividade cada registro. Na maior parte dos casos, o campo consistirá no número da ID de um registro. No seguinte exemplo, o 
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campo consiste em códigos de local exclusivos: 


confirmDelete.cfm?recordID=&rsLocations.CODE4 


Quando a página é executada, os valores do campo CODE do conjunto de registros são inseridos nas linhas correspondentes da tabela 
dinâmica. Por exemplo, caso Canberra, Austrália, o local da locação, apresente o código CBR, o seguinte URL é usado na linha Canberra 
da tabela dinâmica: 


confirmDelete.cfm?recordID=CBR 


8. (PHP) No campo Link do Inspetor de propriedades, adicione esta sequência de caracteres ao final do URL: 


?recordID=<?php echo $row recordsetName[ 'fieldName']; ?> 


O ponto de interrogação informa ao servidor de que se trata de um ou mais parâmetros de URL. A palavra recordiD é o nome do parâmetro 
do URL (você pode dar a ele o nome que quiser). Anote o nome do parâmetro do URL porque você o usará na página de exclusão 
posteriormente. 


A expressão após o sinal de igual é o valor do parâmetro. Nesse caso, o valor é gerado por uma expressão do PHP que retorna a ID de um 
registro do conjunto de registros. É gerada uma ID diferente para cada linha da tabela dinâmica. Na expressão do PHP, substitua 
recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica com 
exclusividade cada registro. Na maior parte dos casos, o campo consistirá no número da ID de um registro. No seguinte exemplo, o campo 
consiste em códigos de local exclusivos: 


confirmDelete.php?recordID=<?php echo $row rsLocations['CODE'], ?> 


Quando a página é executada, os valores do campo CODE do conjunto de registros são inseridos nas linhas correspondentes da tabela 
dinâmica. Por exemplo, caso Canberra, Austrália, o local da locação, apresente o código CBR, o seguinte URL é usado na linha Canberra 
da tabela dinâmica: 


confirmDelete.php?recordID=CBR 


9. (ASP) No campo Link do Inspetor de propriedades, adicione esta sequência de caracteres ao final do URL: 


?recordID=<%=(recordsetName.Fields.Item("fieldName").Value)%> 


O ponto de interrogação informa ao servidor de que se trata de um ou mais parâmetros de URL. A palavra recordiD é o nome do parâmetro 
do URL (você pode dar a ele o nome que quiser). Anote o nome do parâmetro do URL porque você o usará na página de exclusão 
posteriormente. 


A expressão após o sinal de igual é o valor do parâmetro. Nesse caso, o valor é gerado por uma expressão do ASP que retorna a ID de 
registro do conjunto de registros. É gerada uma ID diferente para cada linha da tabela dinâmica. Na expressão do ASP, substitua 
recordsetName pelo nome do seu conjunto de registros e fieldName pelo nome do campo do conjunto de registros que identifica com 
exclusividade cada registro. Na maior parte dos casos, o campo consistirá no número da ID de um registro. No seguinte exemplo, o campo 
consiste em códigos de local exclusivos: 


confirmDelete.asp?recordID=<%=(rsLocations.Fields.Item("CODE").Value)%> 


Quando a página é executada, os valores do campo CODE do conjunto de registros são inseridos nas linhas correspondentes da tabela 
dinâmica. Por exemplo, caso Canberra, Austrália, o local da locação, apresente o código CBR, o seguinte URL é usado na linha Canberra 
da tabela dinâmica: 


confirmDelete.asp?recordID=CBR 


10. Salve a página. 


Para criar visualmente os links (apenas em ASP) 
1. Na página de resultados, crie uma coluna na tabela usada para exibir os registros clicando dentro da última coluna da tabela e 
selecionando Modificar > Tabela > Inserir linhas ou colunas. 


2. Selecione as opções Colunas e Após coluna atual e clique em OK. 
Uma coluna é adicionada à tabela. 


3. Na coluna da tabela recém-criada, digite a sequência de caracteres Delete na linha que contém os alocadores de espaço do conteúdo 
dinâmico. Verifique se você digitou a sequência de caracteres na região com abas repetitivas. 


Você também pode inserir uma imagem com uma palavra ou símbolo a ser excluído. 
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4. Selecione a sequência de caracteres Delete para aplicar um link a ela. 


5. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Ir para página 
detalhada no menu pop-up. 


6. Na caixa Página detalhada, clique em Procurar e localize a página de exclusão. 
7. Na caixa Repassar parâmetro de URL, especifique o nome do parâmetro, como recordiD. 


Você pode inventar o nome que quiser, mas anote o nome, porque depois será usado na página de exclusão. 


8. Especifique o valor que você deseja passar para a página de exclusão selecionando um conjunto de registros e uma coluna nos menus 
pop-up Conjunto de registros e Coluna. Normalmente, o valor é exclusivo do registro como, por exemplo, a ID de chave exclusiva. 
9. Selecione a opção Parâmetros de URL. 
10. Clique em OK. 
Um link especial contorna o texto selecionado. Quando o usuário clica no link, o comportamento de servidor Ir para página detalhada passa 


um parâmetro do URL que contém a ID do registro para a página de exclusão especificada. Por exemplo, caso o parâmetro do URL se 
chame recordiD e a página de exclusão, confirmdelete.asp, quando o usuário clica no link, o URL permanece semelhante à seguinte: 


http:/Ayvww.mysite.com/confirmdelete.asp?recordlD=43 


A primeira parte do URL, http:/AMww.mysite.com/confirmdelete.asp, abre a página de exclusão. Já a segunda parte, ?recordID=43, é o 
parâmetro do URL. Ela informa à página de exclusão qual registro localizar e exibir. O termo recordiD é o nome do parâmetro do URL e 43 
é seu valor. Nesse exemplo, o parâmetro do URL contém o número da ID do registro, 43. 


' Re ” Para o início 
Criar a página de exclusão 


Depois de concluir a página que lista os registros, alterne para a página de exclusão. A página de exclusão mostra o registro e pergunta ao 
usuário se ele tem certeza de que deseja excluí-lo. Quando o usuário confirma a operação clicando no botão de formulário, o aplicativo da Web 
exclui o registro do banco de dados. 


Criar essa página consiste na criação de um formulário em HTML, na recuperação do registro a ser exibido no formulário, na exibição do registro 
no formulário e na adição da lógica para excluí-lo do banco de dados. Recuperar e exibir o registro consiste na definição de um conjunto de 
registros para manter um único registro — aquele que o usuário deseja excluir — e na ligação das colunas do conjunto ao formulário. 


Nota: A página de exclusão pode conter apenas um comportamento de servidor para edição do registro por vez. Por exemplo, você não pode 
adicionar um comportamento de servidor Inserir registro ou Atualizar registro à página de exclusão. 


Criar um formulário em HTML para exibir o registro 
1. Crie uma página e a salve como a página de exclusão especificada na seção anterior. 


Você especificou uma página de exclusão ao criar o link Excluir na seção anterior. Use esse nome ao salvar o arquivo pela primeira vez 
(por exemplo, deleteConfirm.cfm). 


2. Insira um formulário em HTML na página (Inserir > Formulário > Formulário). 
3. Adicione um campo de formulário oculto ao formulário. 


O campo de formulário oculto é obrigatório para armazenar a ID do registro passada pelo parâmetro de URL. Para adicionar um campo 
oculto, coloque o ponto de inserção no formulário e selecione Inserir > Formulário > Campo oculto. 


4. Adicione um botão ao formulário. 


O usuário clicará no botão para confirmar e excluir o registro exibido. Para adicionar um botão, coloque o ponto de inserção no formulário e 
selecione Inserir > Formulário > Botão. 


5. Melhore o design da página da forma que desejar e a salve. 


Recuperar o registro que o usuário deseja excluir 
1. No painel Ligações (Janela > Ligações), clique no botão de adição (+) e selecione Conjunto de registros (consulta) no menu pop-up. 


A caixa de diálogo Conjunto de registros ou Conjunto de dados simples é exibida. Caso seja exibida a caixa de diálogo Conjunto de 
registros avançada em seu lugar, clique em Simples. 


2. Nomeie o conjunto de registros e selecione uma fonte de dados, além da tabela do banco de dados que contém os registros que os 
usuários podem excluir. 


3. Na área Colunas, selecione as colunas da tabela (campos de registro) que deseja exibir na página. 


Para exibir apenas alguns dos campos de registro, clique em Selecionado e escolha os campos desejados clicando neles com a tecla 
Control pressionada (Windows) ou Command (Macintosh) na lista. 


Não se esqueça de incluir o campo da ID do registro, mesmo que você não vá exibi-lo. 


4. Complete a seção Filtro da seguinte forma para localizar e exibir o registro especificado no parâmetro do URL passado pela página de 
resultados: 
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* No primeiro menu pop-up da área Filtro, selecione a coluna do conjunto de registros que contém valores correspondentes ao valor do 
parâmetro do URL passado pela página com os links Excluir. Por exemplo, caso o parâmetro do URL contenha o número de uma ID de 
registro, selecione a coluna que contém os números da ID de registro. No exemplo abordado na seção anterior, a coluna do conjunto de 
registros chamada CODE contém os valores correspondentes ao valor do parâmetro do URL passado pela página com os links Excluir. 


* No menu pop-up ao lado do primeiro menu, selecione o sinal de igual, caso ele ainda não esteja selecionado. 


* No terceiro menu pop-up, selecione Parâmetro do URL. A página com os links Excluir usa um parâmetro de URL para passar 
informações à página de exclusão. 


e Na quarta caixa, digite o nome do parâmetro do URL passado pela página com os links Excluir. 


Recordset 


Home: | rsRecord 


Conexão: | GlobalCar 


Nome do, 
usuário” 


Senha! 


Tabela: | LOCATIONS 


Colunas: (*) Tudo (O Selecionado: 


Filtro: | CODE 


Parâmetro URL recordiD 


Ordenar: | Nenhuma) 


5. Clique em OK. 


O conjunto de registros é exibido no painel Ligações. 


Exibir o registro que o usuário deseja excluir 
1. Selecione as colunas do conjunto de registros (campos do registro) no painel Ligações e as arraste para a página de exclusão. 


Verifique se você inseriu esse conteúdo dinâmico somente leitura dentro dos limites do formulário. Para obter mais informações sobre como 
inserir conteúdo dinâmico em uma página, consulte Tornar texto dinâmico. 


Em seguida, você deve ligar a coluna da ID do registro ao campo de formulário oculto. 


2. Verifique se os Elementos invisíveis estão ativados (Exibir > Auxílios visuais > Elementos invisíveis) e, em seguida, clique no ícone do 
escudo amarelo que representa o campo de formulário oculto. 


O campo de formulário oculto é selecionado. 


3. No Inspetor de propriedades, clique no ícone do raio ao lado da caixa Valor. 
4. Na caixa de diálogo Dados dinâmicos, selecione a coluna da ID do registro no conjunto de registros. 


No seguinte exemplo, a coluna da ID do registro, CODE, contém códigos de armazenamento exclusivos. 
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Dados dinâmico 


junto de registros 


Con 
7 LOAATION NAME 
$ ADDRESS 
g am 
$ STATE COUNTRY 
$ REGION ID 
TELEPHONE 

g Fax 

bi ab CFParam 


» Nenhumía) v 


c <cloutput>HrsPlecord CODE </cfoutput 


Coluna da ID do registro selecionada 


5. Clique em OK e salve a página. 


BM Global Detail Page (GlobalCF/confirmDelete,cfm) 


Delete a Rental Location 


: Please confirm that you want to delete this record, You cannot 
undo the action, : 


Location Name: :: 


State or Country: 


Telephone: 


512x392, NKi4s 


Página de exclusão concluída 


Para o início 


Adicionar lógica para excluir o registro 


Depois de exibir o registro selecionado na página de exclusão, você deve adicionar lógica à página que exclui o registro do banco de dados 
quando o usuário clica no botão Confirmar exclusão. Você pode adicionar essa lógica de maneira rápida e fácil usando o comportamento de 
servidor Excluir registro. 


Para adicionar um comportamento de servidor para excluir o registro (ColdFusion, PHP) 
1. Verifique se a página de exclusão do ColdFusion ou PHP está aberta no Dreamweaver. 
2. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Excluir registro. 


3. Na caixa Primeiro verifique se a variável está definida, verifique se o Valor de chave primária está selecionado. 
Você especifica o valor de chave primária na caixa de diálogo. 


4. No menu pop-up Fonte de dados ou Conexão (ColdFusion), selecione uma conexão com o banco de dados para que o comportamento de 
servidor possa se conectar ao banco de dados afetado. 


5. No menu pop-up Tabela, selecione a tabela do banco de dados que contém os registros a serem excluídos. 


6. No menu pop-up Coluna de chave primária, selecione a coluna da tabela que contém as IDs de registro. 


O comportamento Excluir registro pesquisa a coluna em busca de uma correspondência. A coluna deve conter os mesmos dados da ID de 
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registro da coluna do conjunto de registros ligado ao campo de formulário oculto na página. 
Caso a ID de registro seja um numérica, selecione a opção Numérico. 


7. (PHP) No menu pop-up Valor de chave primária, selecione a variável na página que contém a ID de registro identificando o registro a ser 
excluído. 


A variável é criada pelo campo de formulário oculto. Ela tem o mesmo nome do atributo de nome do campo oculto e é um parâmetro de 
formulário ou de URL, dependendo do atributo de método do formulário. 


8. Em Após a exclusão, caixa Ir para ou Se obtiver êxito, caixa Ir para, especifique uma página a ser aberta após a exclusão do registro da 
tabela do banco de dados. 


Você pode especificar uma página que contenha uma breve mensagem de êxito para o usuário ou uma página listando os registros 
restantes para que o usuário possa verificar se o registro foi excluído. 


Litfen degigeenkerin tanimlandigmi denetleyn: | Birincil Anahtar Degeri se] 
veri Kaynaji: | GlebalCar ” | 
Kulnia Adi: a 
Sifre: | 
Tabio: | KONUMLAR v| 
Brrincil Anehtar Súturu: | KOD v ID] saysal 
Elrincil Anahtar Degeri: | Form Dediskenleri se” | hiddenReciD 


Silddikten Sonra Buraya Gt:  deleteOk htm 


9. Clique em OK e salve o trabalho. 


Para adicionar um comportamento de servidor para excluir o registro (ASP) 
1. Verifique se a página de exclusão de ASP está aberta no Dreamweaver. 
2. No painel Comportamentos de servidor (Janela > Comportamentos de servidor), clique no botão de adição (+) e selecione Excluir registro. 
3. No menu pop-up Conexão, selecione uma conexão com o banco de dados para que o comportamento de servidor possa se conectar ao 
banco de dados afetado. 
Clique no botão Definir caso você precise definir uma conexão. 


4. No menu pop-up Excluir da tabela, selecione a tabela do banco de dados que contém o registro a ser excluído. 
5. No menu pop-up Selecionar registro em, especifique o conjunto de registros que contém os registros a serem excluídos. 


6. No menu pop-up Coluna de chave exclusiva, selecione uma coluna de chave (normalmente a coluna da ID de registro) para identificar o 
registro na tabela do banco de dados. 


Caso o valor seja um número, selecione a opção Numérico. Uma coluna de chave normalmente aceita apenas valores numéricos, embora 
aceite valores de texto às vezes. 


7. No menu pop-up Excluir ao enviar, especifique o formulário em HTML com o botão Enviar que envia o comando de exclusão para o 
servidor. 


8. Em Após a exclusão, caixa Ir para, especifique uma página a ser aberta após a exclusão do registro da tabela do banco de dados. 


Você pode especificar uma página que contenha uma breve mensagem de êxito para o usuário ou uma página listando os registros 
restantes para que o usuário possa verificar se o registro foi excluído. 


9. Clique em OK e salve o trabalho. 


Teste as páginas de exclusão 
1. Carregue a pesquisa, os resultados e as páginas de exclusão do servidor Web, abra um navegador e procure um registro de teste 
descartável a ser excluído. 


Quando você clica em um link Excluir na página de resultados, a página de exclusão deve ser exibida. 


2. Clique no botão Confirmar para excluir o registro do banco de dados. 
3. Verifique se o registro foi excluído pesquisando-o novamente. O registro não deve mais aparecer na página de resultados. 


Mais tópicos da Ajuda 


(9) ex-nc-sa ) 
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Adição de conteúdo dinâmico a páginas 


Sobre a adição de conteúdo dinâmico 

Sobre o texto dinâmico 

Tornar texto dinâmico 

Tornar as imagens dinâmicas 

Tornar os atributos de HTML dinâmicos 

Tornar ActiveX, Flash e outros parâmetros de objeto dinâmicos 


ea - 2 As Para o início 
Sobre a adição de conteúdo dinâmico 
Depois de definir uma ou mais fontes de conteúdo dinâmico, você pode usá-las para adicionar conteúdo dinâmico à página. As fontes de 
conteúdo podem incluir uma coluna de um conjunto de registro, um valor enviado por um formulário em HTML, o valor contido em um objeto de 
servidor ou outros dados. 


No Dreamweaver, você pode colocar conteúdo dinâmico em praticamente qualquer lugar de uma página da Web ou código-fonte HTML. Você 
pode colocar conteúdo dinâmico no ponto de inserção, substituir uma sequência de caracteres de texto ou inseri-lo como um atributo HTML. Por 
exemplo, o conteúdo dinâmico pode definir o atributo src de uma imagem ou o atributo value de um campo de formulário. 


Você pode adicionar conteúdo dinâmico a uma página selecionando uma fonte de conteúdo no painel Ligações. O Dreamweaver insere um script 
do servidor no código da página que instrui o servidor a transferir os dados da fonte de conteúdo para o código HTML da página quando esta é 
solicitada pelo navegador. 


Normalmente, há mais de uma forma de tornar dinâmico um elemento de página. Por exemplo, para tornar uma imagem dinâmica você pode usar 
o painel Ligações, o Inspetor de propriedades ou o comando Imagem do menu Inserir. 


Por padrão, uma página em HTML pode exibir apenas um registro por vez. Para exibir os demais registros do conjunto de registros, você pode 
adicionar um link para percorrê-los individualmente ou pode criar uma região repetitiva a fim de exibir mais de um registro em uma única página. 


ça da É = 
Sobre o texto dinâmico ara o início 


O texto dinâmico adota qualquer formatação aplicada ao texto existente ou ao ponto de inserção. Por exemplo, caso um estilo de folhas de 
estilos em cascata (CSS) afete o texto selecionado, o conteúdo dinâmico que o substitui também é afetado pelo estilo. Você pode adicionar ou 
alterar o formato de texto do conteúdo dinâmico usando qualquer uma das ferramentas de formatação de texto do Dreamweaver. 


Você também pode aplicar um formato de dados ao texto dinâmico. Por exemplo, caso os dados consistam em dados, você pode especificar um 
determinado formato de data como, por exemplo, 04/17/00 para visitantes norte-americanos ou 17/04/00 para visitantes canadenses. 


RE VR Para o início 
Tornar texto dinâmico 


Você pode substituir o texto existente pelo texto dinâmico ou colocar texto dinâmico em um determinado ponto de inserção da página. 


Adicionar texto dinâmico 
1. Na Visualização de design, selecione o texto na página ou clique onde você deseja adicionar texto dinâmico. 
2. No painel Ligações (Janela > Ligações), selecione uma fonte de conteúdo na lista. Caso você selecione um conjunto de registros, 
especifique a coluna que você deseja no conjunto de registros. 


A fonte de conteúdo deve conter texto sem formatação (texto em ASCII). Texto sem formatação inclui HTML. Caso nenhuma fonte de 
conteúdo seja exibida na lista ou caso as fontes de conteúdo disponíveis não atendam às suas necessidades, clique no botão de adição (+) 
para definir uma nova. 

3. (Opcional) Selecione um formato de dados para o texto. 

4. Clique em Inserir ou arraste a fonte de conteúdo para a página. 
Um alocador de espaço de conteúdo dinâmico aparece. (Caso você tenha selecionado o texto na página, o alocador de espaço substitui a 


seleção do texto.) O alocador de espaço do conteúdo do conjunto de registros usa a sintaxe (RecordsetName.ColumnName!, em que 
Recordset é o nome do conjunto de registros e ColumnName é o nome da coluna que você escolheu no conjunto. 


Às vezes, o comprimento dos alocadores de espaço para texto dinâmico distorce o layout da página na janela Documento. Você pode 
resolver o problema usando chaves vazias como alocadores de espaço, como descrito no próximo tópico. 
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Exibir alocadores de espaço para texto dinâmico 
1. Selecione Editar > Preferências > Elementos invisíveis (Windows) ou Dreamweaver > Preferences > Invisible Elements (Macintosh). 
2. No menu pop-up Mostrar texto dinâmico como, selecione () e clique em OK. 


' PE Para o início 
Tornar as Imagens dinâmicas 


Você pode tornar dinâmicas as imagens na sua página. Por exemplo, suponhamos que você crie uma página para exibir itens à venda em um 
leilão beneficente. Cada página incluiria texto descritivo e foto de um item. O layout geral da página permaneceria o mesmo para todos os itens, 
mas a foto (e o texto descritivo) poderia mudar. 


1. Com a página aberta na Visualização de design (Exibir > Design), coloque o ponto de inserção onde você deseja que a imagem seja 
exibida na página. 

2. Selecione Inserir > Imagem. 
A caixa de diálogo Selecionar origem da imagem é exibida. 

3. Clique na opção Fontes de dados (Windows) ou no botão Data Source (Macintosh). 
É exibida uma lista de fontes de conteúdo. 


4. Selecione uma fonte de conteúdo na lista e clique em OK. 


A fonte de conteúdo deve ser um conjunto de registros que contém os caminhos dos arquivos de imagem. Dependendo da estrutura de 
arquivo do site, os caminhos podem ser absolutos, relativos ao documento ou à raiz. 


Nota: Atualmente, o Dreamweaver não dá suporte a imagens binárias armazenadas em um banco de dados. 


Caso nenhum registro seja exibido na lista ou caso os conjuntos de registros disponíveis não atendam às suas necessidades, defina um 
novo conjunto de registros. 


Tornar os atributos de HTML dinâmicos Para o início 


Você pode alterar dinamicamente a aparência de uma página ligando os atributos de HTML a dados. Por exemplo, você pode alterar a imagem 
do plano de fundo de uma tabela ligando o atributo background da tabela a um campo em um conjunto de registros. 


Você pode ligar atributos HTML usando o painel Ligações ou o Inspetor de propriedades. 


Tornar atributos de HTML dinâmicos usando o painel Ligações 
1. Abra o painel Ligações escolhendo Janela > Ligações. 


2. Verifique se o painel Ligações lista a fonte de dados que você deseja usar. 


A fonte de conteúdo deve conter dados apropriados ao atributo de HTML que você deseja ligar. Caso nenhuma fonte de conteúdo seja 
exibida na lista ou caso as fontes de conteúdo disponíveis não atendam às suas necessidades, clique no botão de adição (+) para definir 
uma nova fonte de dados. 


3. Na Visualização de design, selecione um objeto HTML. 


Por exemplo, para selecionar uma tabela em HTML, clique dentro dela e, depois, clique na tag <table> no seletor de tags na parte inferior 
da janela Documento. 


4. No painel Ligações, selecione uma fonte de conteúdo na lista. 
5. Na caixa Ligar a, selecione um atributo de HTML no menu pop-up. 
6. Clique em Ligar. 


Na próxima vez em que a página for executada no servidor de aplicativo, o valor da fonte de dados será vinculado ao atributo de HTML. 


Tornar atributos de HTML dinâmicos usando o Inspetor de propriedades 
1. Na Visualização de design, selecione um objeto HTML e abra o Inspetor de propriedades (Janela > Propriedades). 


Por exemplo, para selecionar uma tabela em HTML, clique dentro dela e, depois, clique na tag <table> no seletor de tags na parte inferior 
da janela Documento. 


2. Como você liga uma fonte de conteúdo dinâmico ao atributo de HTML depende de onde ela está localizada. 


e Caso o atributo que você deseja ligar tenha um ícone de pasta próximo a ele no Inspetor de propriedades, clique no ícone de pasta 
para abrir uma caixa de diálogo de seleção do arquivo e, em seguida, clique na opção Fontes de dados para exibir uma lista das fontes 
de dados. 


e Caso o atributo que você deseja ligar não tenha um ícone de pasta próximo a ele, clique na aba Lista (a aba mais abaixo das duas) à 
esquerda do inspetor. 


A visualização Lista do Inspetor de propriedades é exibida. 
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e Caso o atributo que você deseja ligar não esteja listado na visualização Lista, clique no botão de adição (+) e, em seguida, digite o 
nome do atributo ou clique no botão de seta pequeno e selecione o atributo no menu pop-up. 


3. Para tornar o valor do atributo dinâmico, clique no atributo e, em seguida, clique no ícone do raio ou no ícone da pasta ao final da linha do 
atributo. 


Caso você tenha clicado no ícone do raio, uma lista de fontes de dados é exibida. 


Caso tenha clicado no ícone da pasta, uma caixa de diálogo para seleção de arquivo é exibida. Selecione a opção Fontes de dados para 
exibir uma lista das fontes de conteúdo. 


4. Selecione uma fonte de conteúdo na lista de fontes de conteúdo e clique em OK. 


A fonte de conteúdo deve manter dados apropriados ao atributo de HTML que você deseja ligar. Caso nenhuma fonte de conteúdo seja 
exibida na lista ou caso as fontes de conteúdo disponíveis não atendam às suas necessidades, defina uma nova. 


Na próxima vez em que a página for executada no servidor de aplicativo, o valor da fonte de dados será vinculado ao atributo de HTML. 


= a ã O P, iníci 
Tornar ActiveX, Flash e outros parâmetros de objeto dinâmicos PR 


Você pode tornar os parâmetros de applets Java e os plug-ins dinâmicos, bem como os parâmetros dos objetos de ActiveX, Flash, Shockwave, 
Director e Generator. 


Antes de começar, verifique se os campos do conjunto de registros mantêm dados apropriados aos parâmetros de objeto que você deseja ligar. 


1. Na Visualização de design, selecione um objeto da página e abra o Inspetor de propriedades (Janela > Propriedades). 


9) 


. Clique no botão Parâmetros. 
3. Caso o parâmetro não seja exibido na lista, clique no botão de adição (+) e digite um nome de parâmetro na coluna Parâmetro. 


ES 


. Clique na coluna Valor do parâmetro e, depois, clique no ícone do raio para especificar um valor dinâmico. 
É exibida uma lista de fontes de dados. 
5. Selecione uma fonte de dados na lista e clique em OK. 


A fonte de dados deve manter dados apropriados ao parâmetro de objeto que você deseja ligar. Caso nenhuma fonte de dados seja 
exibida na lista ou caso as fontes de dados disponíveis não atendam às suas necessidades, defina uma nova. 


Mais tópicos da Ajuda 


(65) ev-nc-sa ] 
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Produto vetorial 
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Trabalho com o Flash e Dreamweaver 


Edição de um arquivo SWF do Dreamweaver no Flash 


Edição de um arquivo SWF do Dreamweaver no Flash iii 


Se você tem o Flash e o Dreamweaver instalados, pode selecionar um arquivo SWF em um documento do Dreamweaver e usar o Flash para 
editá-lo. O Flash não edita diretamente o arquivo SWF; edita o documento de origem (arquivo FLA) e reexporta o arquivo SWF. 


1. No Dreamweaver, abra o Inspetor de propriedades (Janela > Propriedades). 


2. No documento do Dreamweaver, siga um destes procedimentos: 
e Clique no espaço reservado para o arquivo SWF para selecioná-lo; então, no Inspetor de propriedades, clique em Editar. 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no espaço reservado para o arquivo 
SWF, e então selecione Editar com Flash no menu de contexto. 


O Dreamweaver muda o foco para o Flash e o Flash tenta localizar o arquivo de criação do Flash (FLA) para o arquivo SWF 
selecionado. Se o Flash não conseguir localizar o arquivo de criação do Flash, será solicitado que você o localize. 


Nota: seo arquivo FLA ou o arquivo SWF estiver bloqueado, verifique o arquivo no Dreamweaver. 
3. No Flash, edite o arquivo FLA. A janela Documento do Flash indica que você está modificando o arquivo a partir do Dreamweaver. 
4. Quando terminar a edição, clique em Concluído. 


O Flash atualiza o arquivo FLA, reexporta-o como um arquivo SWF e é encerrado. Então, o foco retorna ao documento do Dreamweaver. 


Nota: para atualizar o arquivo SWF e manter o Flash aberto, no Flash, selecione Arquivo > Atualizar para Dreamweaver. 


5. Para exibir o arquivo atualizado no documento, clique em Reproduzir no Inspetor de propriedades do Dreamweaver ou pressione F12 para 
visualizar a página em uma janela do navegador. 


(69) ex-nc-sa ] 
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Trabalho com o Fireworks e Dreamweaver 


Inserir uma imagem do Fireworks 

Editar uma imagem ou tabela do Fireworks a partir do Dreamweaver 

Otimizar uma imagem do Fireworks a partir do Dreamweaver 

Usar o Fireworks para modificar os alocadores de espaço de imagem do Dreamweaver 
Sobre os menus pop-up do Fireworks 

Editar os menus pop-up do Fireworks no Dreamweaver 

Editar um menu pop-up criado no Fireworks MX 2004 ou anterior 

Especificar as preferências de início e edição dos arquivos de origem do Fireworks 
Inserir código HTML do Fireworks em um documento do Dreamweaver 

Colar o código HTML do Fireworks no Dreamweaver 

Atualizar o código HTML do Fireworks colocado no Dreamweaver 

Criar um álbum de fotos na Web 


E A a Para o início 
Inserir uma imagem do Fireworks 


O Dreamweaver e o Fireworks reconhecem e compartilham muitos dos mesmos procedimentos de edição de arquivos, incluindo alterações em 
links, mapas de imagem, fatias de tabela e muito mais. Juntos, esses dois aplicativos fornecem um fluxo de trabalho dinamizado para edição, 
otimização e colocação de arquivos gráficos em páginas HTML da Web. 


Você pode colocar um gráfico exportado do Fireworks diretamente em um documento do Dreamweaver usando o comando Inserir imagem ou 
criar um novo gráfico do Fireworks a partir de um alocador de espaço de imagem do Dreamweaver. 


1. No documento do Dreamweaver, coloque o ponto de inserção onde deseja que a imagem seja exibida e siga um destes procedimentos: 
* Selecione Inserir > Imagem. 
e Na categoria Comum do painel Inserir, clique no botão Imagem ou arraste-o até o documento. 


2. Navegue até o arquivo exportado desejado do Fireworks e clique em OK (Windows) ou em Abrir (Macintosh). 
Nota: Se o arquivo do Fireworks não estiver no site atual do Dreamweaver, uma mensagem será exibida perguntando se você deseja 
copiar o arquivo na pasta raiz. Clique em Sim. 


É E E E P iníci 
Editar uma imagem ou tabela do Fireworks a partir do Dreamweaver didi ai 


Ao abrir e editar uma imagem ou uma fatia da imagem que faz parte de uma tabela do Fireworks, o Dreamweaver inicia o Fireworks, que abre o 
arquivo PNG a partir do qual a imagem ou a tabela foi exportada. 


Nota: Esse processo presume que o Fireworks tenha sido definido como o principal editor de imagens externas para arquivos PNG. 
Normalmente, o Fireworks também é definido como o editor padrão de arquivos JPEG e GIF, embora o Photoshop possa ser definido como o 
editor padrão desses tipos de arquivo. 

Quando a imagem faz parte de uma tabela do Fireworks, você pode abrir a tabela inteira do Fireworks para edição contanto que o comentário <!- 
-fw table--> exista no código HTML. Se o arquivo PNG de origem tiver sido exportado a partir do Fireworks para um site do Dreamweaver com a 
configuração Estilo HTML e imagens do Dreamweaver, o comentário da tabela do Fireworks será automaticamente inserido no código HTML. 


1. No Dreamweaver, abra o Inspetor de propriedades (Janela > Propriedades) se ainda não estiver aberto. 


2. Clique na imagem ou na fatia da imagem para selecioná-la. 


Ao selecionar uma imagem que foi exportada a partir do Fireworks, o Inspetor de propriedades identifica a seleção como uma imagem ou 
tabela do Fireworks e exibe o nome do arquivo PNG de origem. 


3. Para iniciar o Fireworks para edição, siga um destes procedimentos: 
e No Inspetor de propriedades, clique em Editar. 
e Mantenha pressionada a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes na imagem selecionada. 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) na imagem selecionada e escolha 
Editar com Fireworks no menu de contexto. 


Nota: Se o Fireworks não conseguir localizar o arquivo de origem, você deverá localizar o arquivo PNG de origem. Ao trabalhar com o 
arquivo de origem do Fireworks, as alterações são salvas tanto no arquivo de origem quanto no arquivo exportado; caso contrário, 
somente o arquivo exportado será atualizado. 


4. No Fireworks, edite o arquivo PNG de origem e clique em Concluído. 
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O Fireworks salva as alterações no arquivo PNG, exporta a imagem atualizada (ou o HTML e as imagens) e volta ao Dreamweaver. No 
Dreamweaver, a imagem ou tabela atualizada é exibida. 


Para assistir a um tutorial sobre a integração do Dreamweaver e do Fireworks, consulte www.adobe.com/go/vid0o188 br. 


tas E E n P, iníci 
Otimizar uma imagem do Fireworks a partir do Dreamweaver ad 


Você pode usar o Dreamweaver para fazer rápidas alterações nas imagens e animações do Fireworks. No Dreamweaver, você pode alterar 
configurações de otimização, configurações de animação e o tamanho e a área da imagem exportada. 


1. No Dreamweaver, selecione a imagem desejada e siga um destes procedimentos: 
e Selecione Comando > Otimizar imagem 
e Clique no botão Editar configurações de imagem no Inspetor de propriedades. 
2. Faça suas edições na caixa de diálogo Visualização da imagem: 
e Para editar as configurações de otimização, clique na aba Opções. 
e Para editar o tamanho e a área da imagem exportada, clique na aba Arquivo. 


3. Ao terminar, clique em OK. 


. dies E P, iníci 
Usar o Fireworks para modificar os alocadores de espaço de imagem do Dreamweaver dd 


Você pode criar um alocador de espaço de imagem em um documento do Dreamweaver e, em seguida, iniciar o Fireworks para projetar uma 
imagem gráfica ou uma tabela do Fireworks para substituí-lo. 


Para criar uma nova imagem de um alocador de espaço, é necessário instalar o Dreamweaver e o Fireworks no seu sistema. 


1. Verifique se o Fireworks já está definido como o editor de imagens para arquivos PNG. 
2. Na janela Documento, clique no alocador de espaço de imagem para selecioná-lo. 
3. Inicie o Fireworks no modo Edição a partir do Dreamweaver seguindo um destes procedimentos: 


e No Inspetor de propriedades, clique em Criar. 
* Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no alocador de espaço de imagem. 


e Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) no alocador de espaço de imagem e, 
em seguida, selecione Criar imagem no Fireworks. 


4. Use as opções do Fireworks para criar a imagem. 


O Fireworks reconhece as seguintes configurações de alocador de espaço de imagem, que podem ser definidas enquanto você trabalha 
com o alocador no Dreamweaver: tamanho da imagem (relacionado ao tamanho de tela de desenho do Fireworks), ID da imagem (usada 
pelo Fireworks como o nome de documento padrão para o arquivo de origem e o arquivo de exportação criados) e o alinhamento do texto. 
O Fireworks também reconhece links e algumas sobreposições (como imagem trocada, menu pop-up e texto) que você anexou ao alocador 
de espaço de imagem ao trabalhar no Dreamweaver. 


Nota: Embora o Fireworks não mostre os links adicionados a um alocador de espaço de imagem, eles são preservados. Se você desenhar 
um ponto ativo e adicionar um link no Fireworks, o link adicionado ao alocador de imagem no Dreamweaver não será excluído; no entanto, 
se uma fatia da nova imagem for cortada no Fireworks, o link no documento do Dreamweaver será excluído quando o alocador de espaço 
de imagem for substituído. 


O Fireworks não reconhece as seguintes configurações de alocador de espaço de imagem: alinhamento da imagem, cor, Vspace e Hspace 
e mapas. Essas configurações estão desativadas no Inspetor de propriedades do alocador de espaço de imagem. 


5. Quando terminar, clique em Concluído para exibir a solicitação para salvar. 
6. Na caixa de texto Salvar em, selecione a pasta definida como a pasta do site local do Dreamweaver. 


Se o alocador de espaço de imagem tiver sido nomeado quando foi inserido no documento do Dreamweaver, o Fireworks preencherá a 
caixa Nome do arquivo com esse nome. Você pode alterar o nome. 


7. Clique em Salvar para salvar o arquivo PNG. 


A caixa de diálogo Exportar é exibida. Use essa caixa de diálogo para exportar a imagem como um arquivo GIF ou JPEG ou, no caso de 
imagens segmentadas, como HTML e imagens. 


8. Em Salvar em, selecione a pasta do site local do Dreamweaver. 
A caixa Nome é exibida automaticamente com o nome usado para o arquivo PNG. Você pode alterar o nome. 


9. Em Salvar como tipo, selecione o tipo do arquivo que deseja exportar; por exemplo, Apenas imagens ou HTML e imagens. 
10. Clique em Salvar para salvar o arquivo exportado. 
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O arquivo é salvo e o foco volta para o Dreamweaver. No documento do Dreamweaver, o arquivo exportado ou a tabela do Fireworks 
substitui o alocador de espaço de imagem. 


ERA 
Sobre os menus pop-up do Fireworks PESTE, 


O Fireworks permite criar de modo rápido e fácil menus pop-up baseados em CSS. 

Além de serem extensíveis e rápidos de baixar, os menus pop-up criados com o Fireworks oferecem as seguintes vantagens: 
e Os itens de menu podem ser indexados por mecanismos de pesquisa. 
e Os itens de menu podem ser lidos por leitores de tela, deixando as páginas mais acessíveis. 
* O código gerado pelo Fireworks está em conformidade com os padrões e pode ser validado. 


Você pode editar os menus pop-up do Fireworks com o Dreamweaver ou o Fireworks, mas não com ambos. As alterações feitas no 
Dreamweaver não são preservadas no Fireworks. 


- , Para o início 
Editar os menus pop-up do Fireworks no Dreamweaver iii 
Você pode criar um menu pop-up no Fireworks 8 ou posterior e, em seguida, editá-lo com o Dreamweaver ou o Fireworks (usando a edição 
completa), mas não com ambos. Se você editar os menus no Dreamweaver e, em seguida, editá-los no Fireworks, todas as edições anteriores, 
exceto a do conteúdo do texto, serão perdidas. 


Se preferir editar os menus com o Dreamweaver, use o Fireworks para criar o menu pop-up e use o Dreamweaver exclusivamente para editar e 
personalizar o menu. 


Se preferir editar os menus no Fireworks, use o recurso de edição completa no Dreamweaver, mas não edite os menus diretamente no 
Dreamweaver. 


1. No Dreamweaver, selecione a tabela do Fireworks que contém o menu pop-up e, em seguida, clique em Editar no Inspetor de 
propriedades. 


O arquivo PNG de origem é aberto no Fireworks. 
2. No Fireworks, edite o menu com o Editor de menu pop-up e clique em Concluído na barra de ferramentas do Fireworks. 
O Fireworks envia o menu pop-up editado novamente para o Dreamweaver. 


Se você tiver criado um menu pop-up no Fireworks MX 2004 ou anterior, poderá editá-lo no Dreamweaver usando a caixa de diálogo 
Mostrar menu pop-up, disponível no painel Comportamentos. 


Editar um menu pop-up criado no Fireworks MX 2004 ou anterior didi 


1. No Dreamweaver, selecione o ponto ativo ou a imagem que aciona o menu pop-up. 
2. No painel Comportamentos (Shift + F3), clique duas vezes em Mostrar menu pop-up na lista Ações. 


3. Faça as alterações na caixa de diálogo Menu pop-up e clique em OK. 


Especificar as preferências de início e edição dos arquivos de origem do Fireworks cisididi 
Ao usar o Fireworks para editar imagens, as imagens de suas páginas da Web normalmente são exportadas pelo Fireworks a partir de um 
arquivo PNG de origem. Ao abrir um arquivo de imagem no Dreamweaver para editá-lo, o Fireworks abre automaticamente o arquivo PNG de 
origem, solicitando sua localização caso não o encontre. Se preferir, você pode definir preferências no Fireworks para que o Dreamweaver abra a 
imagem inserida, que o Fireworks permita o uso do arquivo de imagem inserido ou o arquivo de origem do Fireworks sempre que uma imagem for 
aberta no Dreamweaver. 


Nota: O Dreamweaver reconhece as preferências de início e edição do Fireworks somente em alguns casos. Especificamente, você deve abrir e 
otimizar uma imagem que não faça parte de uma tabela do Fireworks e contenha um caminho correto de Design Notes até um arquivo PNG de 
origem. 
1. No Fireworks, selecione Editar > Preferências (Windows) ou Fireworks > Preferências (Macintosh) e clique na aba Iniciar e editar (Windows) 
ou selecione Iniciar e editar no menu pop-up (Macintosh). 


2. Especifique as opções de preferência a serem usadas ao editar ou otimizar as imagens do Fireworks colocadas em um aplicativo externo: 
Sempre usar o PNG de origem Abra automaticamente o arquivo PNG do Fireworks definido na Design Note como a origem da imagem 
colocada. As atualizações são feitas no arquivo PNG de origem e na imagem colocada correspondente. 


Nunca usar o PNG de origem Abra automaticamente a imagem colocada do Fireworks, independentemente da existência de um arquivo 
PNG de origem. As atualizações são feitas somente na imagem colocada. 


Perguntar ao iniciar Uma mensagem é exibida perguntando se o arquivo PNG de origem deve ser aberto. Você também pode especificar 
preferências globais de início e edição nessa mensagem. 
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ad ERR 
Inserir código HTML do Fireworks em um documento do Dreamweaver RN 


No Fireworks, você pode usar o comando Exportar para exportar e salvar arquivos otimizados de imagem e HTML em um local dentro de uma 
pasta do site do Dreamweaver. Você pode inserir o arquivo no Dreamweaver. O Dreamweaver permite inserir o código HTML gerado pelo 
Fireworks, completo com as imagens associadas, as fatias e JavaScript, em um documento. 

1. No documento do Dreamweaver, coloque o ponto de inserção onde você deseja inserir o código HTML do Fireworks. 


2. Siga um destes procedimentos: 
e Selecione Inserir > Objetos de imagem > HTML do Fireworks. 
e Na categoria Comum do painel Inserir, clique no botão Imagens e escolha Inserir HTML do Fireworks no menu pop-up. 


3. Clique em Procurar para selecionar um arquivo HTML do Fireworks. 


4. Se não for necessário usar mais o arquivo, selecione Excluir arquivo após inserção. A seleção dessa opção não afeta o arquivo PNG de 
origem associado ao arquivo HTML. 
Nota: Se o arquivo HTML estiver em uma unidade de rede, ele será excluído permanentemente, não será movido para a Lixeira. 


5. Clique em OK para inserir o código HTML, junto com as imagens associadas, as fatias e JavaScript, no documento do Dreamweaver. 


a NR 
Colar o código HTML do Fireworks no Dreamweaver PR RRAÇE 


Uma maneira rápida de colocar as imagens e as tabelas geradas pelo Fireworks no Dreamweaver é copiar e colar o código HTML do Fireworks 
diretamente em um documento do Dreamweaver. 


Copiar e colar o código HTML do Fireworks no Dreamweaver 
1. No Fireworks, selecione Editar > Copiar código HTML. 
2. Siga o assistente que o orientará para escolher as configurações de exportação do HTML e das imagens. Quando solicitado, especifique a 
pasta do site do Dreamweaver como destino das imagens exportadas. 
O assistente exporta as imagens para o destino especificado e copia o código HTML na Área de transferência. 


3. No documento do Dreamweaver, coloque o ponto de inserção onde você deseja colar o código HTML e selecione Editar > Colar HTML do 
Fireworks. 


Todo o código HTML e JavaScript associado aos arquivos de Fireworks exportados é copiado no documento do Dreamweaver e todos os 
links de imagens são atualizados. 


Exportar e colar o código HTML do Fireworks no Dreamweaver 
1. No Fireworks, selecione Arquivo > Exportar. 
Especifique a pasta do site do Dreamweaver como destino das imagens exportadas. 
No menu pop-up Exportar, selecione HTML e imagens. 
No menu pop-up HTML, selecione Copiar para área de transferência e, em seguida, clique em Exportar. 
No documento do Dreamweaver, coloque o ponto de inserção onde você deseja colar o código HTML exportado e selecione Editar > Colar 
HTML do Fireworks. 


arm 


Todo o código HTML e JavaScript associado aos arquivos de Fireworks exportados é copiado no documento do Dreamweaver e todos os 
links de imagens são atualizados. 


no RE 
Atualizar o código HTML do Fireworks colocado no Dreamweaver PRSPENNNE 


No Fireworks, o comando Arquivo > Atualizar HTML fornece uma alternativa à técnica de início e edição de atualização dos arquivos do Fireworks 
colocados no Dreamweaver. Com o recurso Atualizar HTML, é possível editar uma imagem PNG de origem no Fireworks e atualizar 
automaticamente o código HTML exportado e os arquivos de imagem colocados em um documento do Dreamweaver. Esse comando permite 
atualizar os arquivos do Dreamweaver mesmo quando o Dreamweaver não está em execução. 

1. No Fireworks, abra o arquivo PNG de origem e faça suas edições. 
Selecione Arquivo > Salvar. 
No Fireworks, selecione Arquivo > Atualizar HTML. 
Navegue até o arquivo do Dreamweaver que contém o HTML que deseja atualizar e clique em Abrir. 
Navegue até a pasta de destino onde deseja colocar os arquivos de imagem atualizados e clique em Selecionar (Windows) ou Escolher 
(Macintosh). 


Ron 


O Fireworks atualiza o código HTML e JavaScript no documento do Dreamweaver. O Fireworks também exporta as imagens atualizadas 
associadas ao HTML e coloca essas imagens na pasta de destino especificada. 
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Se o Fireworks não conseguir encontrar o código HTML correspondente a ser atualizado, você poderá inserir o novo código HTML no 
documento do Dreamweaver. O Fireworks coloca a seção JavaScript do novo código no começo do documento e coloca a tabela ou link 
HTML da imagem no final. 


é sê P iníci 
Criar um álbum de fotos na Web did 


O recurso Criar álbum de fotografias na Web está obsoleto no Dreamweaver CS5. 


Mais tópicos da Ajuda 
Usar um editor de imagens externas 


Tutorial do Dreamweaver e do Fireworks 


Configuração das opções da caixa de diálogo Visualização da imagem 


(5) ex-nc-sa ) 
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Trabalho com o Device Central e Dreamweaver 


Uso do Adobe Device Central com o Dreamweaver 
Dicas para criação de conteúdo da Web para dispositivos móveis usando o Dreamweaver 


E Para o início 
Uso do Adobe Device Central com o Dreamweaver 
O Device Central habilita os designers e desenvolvedores da Web do Dreamweaver a visualizarem a aparência dos arquivos do Dreamweaver em 
uma ampla variedade de dispositivos móveis. O Device Central usa a Renderização em Tela Pequena do Opera”"M para proporcionar aos 
designers e desenvolvedores uma impressão da aparência da página da Web em uma tela pequena. Ela também habilita os designers e 
desenvolvedores a testarem se o CSS comporta-se corretamente. 


Por exemplo, um desenvolvedor da Web pode ter um cliente que deseja tornar o site da Web disponível para celulares. O desenvolvedor da Web 
pode usar o Dreamweaver para criar páginas preliminares e usar o Device Central para testar a aparência das páginas em dispositivos 
diferentes. 


5 a ai E E Eis 2 ê P. iníci 
Dicas para criação de conteúdo da Web para dispositivos móveis usando o Dreamweaver ris 


O Device Central visualiza páginas da Web criadas no Dreamweaver usando a Renderização em Tela Pequena do Opera. Essa visualização 
pode proporcionar uma boa ideia da aparência de uma página da Web em um dispositivo móvel. 

Nota: a Renderização em Tela Pequena do Opera pode ou não estar pré-instalado em qualquer dispositivo emulador individual. O Device 
Central simplesmente proporciona uma visualização da aparência do conteúdo, caso a Renderização em Tela Pequena do Opera estivesse 
instalado. 


Use as seguintes dicas para garantir que as páginas da Web criadas no Dreamweaver sejam exibidas corretamente em dispositivos móveis: 


e Se você usar estrutura do AdobeQ Spry para desenvolver conteúdo, adicione a seguinte linha de HTML às páginas para que elas possam 
renderizar CSS e executar JavaScript'” corretamente no Device Central: 


<link href="SpryAccordion.css" media="screen" rel="stylesheet" type="text/css"/> 
<link href="SpryAccordion2.css" media="handheld" rel="stylesheet" type="text/css"/> 


* A Renderização em Tela Pequena do Opera não oferece suporte a quadros, pop-ups, sublinhados, tachados, linhas sobrepostas, 
intermitências e letreiros. Tente evitar esses elementos de projeto. 


e Mantenha as páginas da Web simples para dispositivos móveis. Em especial, use um número mínimo de fontes, tamanhos de fontes e 
cores. 


e A redução de tamanhos de imagem e a redução do número de cores necessárias aumentam as chances de que as imagens sejam exibidas 
como planejado. Use CSS ou HTML para especificar uma altura e uma largura exatas para cada imagem usada. Forneça texto alternativo 
para todas as imagens. 


Nota: o site da Web do software Opera é uma boa fonte de informações sobre a otimização de páginas da Web para dispositivos móveis. 
Para obter mais dicas e técnicas sobre como criar conteúdo para celulares e outros dispositivos móveis, consulte 
www.adobe.com/go/learn cs mobilewiki br. 


Mais tópicos da Ajuda 
[0] Ajuda do Adobe Device Central 
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Trabalho com o ConnectNow e Dreamweaver 


Trabalho com o ConnectNow 


EG 
Trabalho com o ConnectNow ienedla ici 


O Adobe ConnectNow fornece uma sala de reuniões online segura e pessoal onde você pode encontrar e colaborar com outras pessoas via 
Web em tempo real. Com o ConnectNow, é possível compartilhar e fazer comentários na tela do computador, enviar mensagens de bate-papo e 
comunicar-se usando áudio integrado. Você também pode transmitir vídeos ao vivo, compartilhar arquivos, obter comentários de reuniões e 
controlar o computador de um participante. 


É possível acessar o ConneciNow diretamente na interface do aplicativo. 
1. Escolha Arquivo > Compartilhar minha tela. 


2. Na caixa de diálogo Conectar-se ao Adobe CS Live, digite seu endereço de email e senha e clique em Entrar. Caso não tenha uma ID da 
Adobe, clique no botão Criar ID da Adobe. 


3. Para compartilhar sua tela, clique no botão Compartilhar tela do meu computador na parte central da janela do aplicativo ConnectNow. 
Para obter instruções completas sobre como usar o ConnectNow, consulte a Ajuda do Adobe ConneciNow. 


Para assistir a um tutorial em vídeo sobre como usar o ConnectNow, consulte Uso do ConnectNow para compartilhar a tela (7:12). (Essa 
demonstração fica localizada no Dreamweaver.) 


(69) ex-nc-sa ] 
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Trabalho com o Adobe Bridge e Dreamweaver 


Sobre o Adobe Bridge 

Iniciar o Adobe Bridge a partir do Dreamweaver 
Inserção de arquivos do Adobe Bridge no Dreamweaver 
Colocar um arquivo do Adobe Bridge na sua página 
Arrastar um arquivo do Bridge na página 

Iniciar o Dreamweaver a partir do Adobe Bridge 


Para o início 


Sobre o Adobe Bridge 


O Dreamweaver fornece integração contínua com o Adobe Bridge, o navegador de arquivos de várias plataformas incluído nos componentes do 
Adobe Creative Suite 5. O Adobe Bridge o ajuda a localizar, organizar e procurar os ativos necessários para você criar conteúdo de impressão, 
da Web, de vídeo e móvel. Você pode iniciar o Adobe Bridge em qualquer componente do Creative Suite (exceto o Acrobat 9) e usá-lo para 
acessar tipos de ativos que sejam ou não da Adobe. 


No Adobe Bridge, é possível: 


e Visualizar, pesquisar, classificar e processar arquivos sem abrir aplicativos individuais do Creative Suite. Você pode também editar os 
metadados de arquivos e usar o Adobe Bridge para inserir os arquivos em seus documentos, projetos ou composições. 


* Importar e editar fotos de um cartão de câmera digital, agrupe as fotos relacionadas em pilhas e abra e edite arquivos Raw da câmera, sem 
iniciar o Photoshop. 


e Realizar tarefas automatizadas, como comandos de lote. 


e Sincronizar configurações de cor entre componentes do Creative Suite gerenciados com cores. 


ss . ) = Fa 
Iniciar o Adobe Bridge a partir do Dreamweaver arare.inicio 


Você pode iniciar o Adobe Bridge a partir do Dreamweaver para visualizar arquivos antes de colocá-los ou arrastá-los no layout da página. 
*& Você pode iniciar o Adobe Bridge de diversas maneiras diferentes: 

* Selecione Arquivo > Navegar no Bridge. 

e Clique no botão Navegar no Bridge na barra de ferramentas Padrão. 

e Pressione o atalho de Navegar no Bridge no teclado: Control + Alt + O (Windows) ou Command + Option + O (Macintosh). 


O Adobe Bridge é aberto no modo Procurar arquivo, mostrando o conteúdo da pasta aberta pela última vez no Dreamweaver. Se o Adobe Bridge 
já estava aberto, ele se tornará a janela ativa. 


Nota: O Adobe Bridge apenas é instalado com o Dreamweaver CS5 quando você instala o Creative Suite CS5; ele não está incluído na versão 
independente do Dreamweaver CS5. Entretanto, o Adobe Bridge estará incluído se você tiver instalado previamente o Dreamweaver CS3 ou 
CS4. Assim, se você ainda tiver o Adobe Bridge instalado nessas versões, o Dreamweaver CS5 poderá acessá-lo e usá-lo. 


” ê é P. iníci 
Inserção de arquivos do Adobe Bridge no Dreamweaver iai 


Você pode inserir arquivos nas páginas do Dreamweaver inserindo-os ou arrastando-os a partir do Adobe Bridge para sua página. O documento 
do Dreamweaver no qual deseja inserir o arquivo deve estar aberto e na Visualização de design para usar esse recurso. 


É possível inserir a maioria dos tipos de arquivo nas páginas, mas o Dreamweaver trata cada um deles de modo diferente: 


e Se for inserida uma imagem habilitada para a Web (JPEG, GIF ou PNG), o Dreamweaver inserirá os arquivos de imagem diretamente na 
sua página e colocará uma cópia na pasta de imagens padrão do site. 


e Se você inserir um arquivo PSD do Photoshop, será necessário definir as configurações de otimização para que o Dreamweaver possa 
colocar o arquivo na sua página. 


e Se for inserido um arquivo que não seja de imagem, como mp3, PDF ou um tipo de arquivo desconhecido, o Dreamweaver inserirá um link 
para o arquivo de origem. 


e Se for inserido um arquivo HTML, o Dreamweaver inserirá um link para o arquivo de origem. 


* (Somente Windows) Se o Microsoft Office estiver instalado e você estiver inserido um arquivo do Microsoft Word ou Excel, especifique se 
deseja inserir o arquivo propriamente dito ou um link para o arquivo de origem. Se desejar inserir o arquivo, especifique até que ponto a 
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formatação do arquivo deve ser mantida. 


E E E a P, iníci 
Colocar um arquivo do Adobe Bridge na sua página ici 


1. No Dreamweaver (Visualização de design), coloque o ponto de inserção na página onde você deseja inserir o arquivo. 
No Adobe Bridge, selecione o arquivo e escolha Arquivo > Inserir em Dreamweaver. 
Se o arquivo não estiver na pasta raiz do site, copie-o para essa pasta. 


Se você tiver definido Editar > Preferências > Acessibilidade para mostrar atributos ao inserir imagens, a caixa de diálogo Atributos de 
acesso a tag de imagem será exibida quando imagens habilitadas para a Web, como JPEG e GIF, forem inseridas. 


P ON 


Nota: Se o ponto de inserção estiver na Visualização de código, o Adobe Bridge será iniciado normalmente, mas não poderá colocar o arquivo. 
Os arquivos só podem ser colocados na Visualização de design. 


p E Pa” Para o início 
Arrastar um arquivo do Bridge na página 


No Dreamweaver (Visualização de design), coloque o ponto de inserção na página onde você deseja inserir a imagem. 
Inicie o Adobe Bridge se ainda não estiver aberto. 

No Adobe Bridge, selecione um ou mais arquivos e arraste-os para a página do Dreamweaver. 

Se o arquivo não estiver na pasta raiz do site, copie-o nessa pasta. 


Se você tiver definido Editar > Preferências > Acessibilidade para mostrar atributos ao inserir imagens, a caixa de diálogo Atributos de 
acesso a tag de imagem será exibida quando imagens aceitas pela Web, como JPEG e GIF, forem inseridas. 


GE wM R 


Nota: Se o ponto de inserção estiver na Visualização de código, o Adobe Bridge será iniciado normalmente, mas não poderá colocar o arquivo. 
Os arquivos só podem ser colocados na Visualização de design. 


Wo a ; Para o início 
Iniciar o Dreamweaver a partir do Adobe Bridge E 
* Selecione um arquivo no Adobe Bridge e siga um destes procedimentos: 


* Selecione Arquivo > Abrir com > Adobe Dreamweaver. 


e Clique com o botão direito do mouse (com a tecla Control pressionada no Macintosh) e escolha Abrir com > Adobe Dreamweaverno menu 
de contexto. 


Nota: Se o Dreamweaver já estiver aberto, essa ação ativa o programa. Se o Dreamweaver não estiver aberto, o Adobe Bridge o inicia, 
ignorando a tela de boas-vindas. 
Mais tópicos da Ajuda 


Creative Suite 5 - Bridge 


Criação de Objetos Inteligentes 
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Uso do Dreamweaver com serviços Adobe Online 


BrowserLab 
Business Catalyst InContext Editing 


Os serviços on-line da Adobe são aplicativos da Web hospedados que funcionam de maneira semelhante às ferramentas de área de trabalho 
tradicionais. No entanto, a vantagem dos serviços on-line é que eles estão sempre atualizados, por serem hospedados na Web e não em seu 
computador. 


O Dreamweaver se integra diretamente com o AdobeQ BrowserLab e o AdobeQ Business Catalyst InContext Editing. A ajuda para trabalhar com 
esses serviços está incluída nas seções da Ajuda a seguir. 


O Dreamweaver também se integra com os serviços on-line do AdobeQ CS Live (que inclui o BrowserLab). Para obter mais informações sobre o 
trabalho com o CS Live, consulte Uso do Adobe CS Live. 


Para obter mais informações sobre o gerenciamento dos serviços on-line da Adobe, consulte o site da Adobe em 
www.adobe.com/go/learn creativeservices br. 


Para o início 
BrowserLab 
O Adobe BrowserLab permite que você visualize o conteúdo da Web local no Dreamweaver, sem que seja necessário postá-lo primeiro em um 
servidor de acesso público. É possível visualizar arquivos a partir do seu site local Dreamweaver ou de um servidor remoto ou de teste. 


Para obter informações sobre como usar o serviço on-line BrowserLab, incluindo informações sobre como usar o BrowserLab com o 
Dreamweaver, consulte www.adobe.com/go/lr abl br. 


Para o início 


Business Catalyst InContext Editing 


Business Catalyst InContext Editing 

O Adobe Business Catalyst InContext Editing é um componente de edição do Adobe Business Catalyst que permite aos usuários fazerem 
alterações simples de conteúdo em um navegador da Web. Para alterar uma página da Web, basta aos usuários navegarem para a página, fazer 
logon no InContext Editing e editar a página. As opções de edição são simples e elegantes e o respectivo uso não exige nenhum conhecimento 
anterior de código HTML nem edição na Web. 


No entanto, antes de habilitar a realização de alterações ao vivo pelos usuários na Web, você precisa usar o Dreamweaver para tornar suas 
páginas HTML editáveis. Isso pode ser feito com a especificação de regiões na página que você deseja permitir que os usuários editem. Por 
exemplo, você pode ter uma página de notícias com títulos e balões para os artigos. Você pode selecionar esse conteúdo e transformá-lo em 
uma região editável do InContext Editing de forma que quando um usuário se conectar ao InContext Editing, possa editar os títulos e os balões 
diretamente em um navegador. 


Esta documentação explica como trabalhar com as regiões editáveis do InContext Editing no Dreamweaver; mas a Adobe também fornece outros 
recursos para ajudá-lo a trabalhar com o InContext Editing: 


e Para obter documentação sobre o uso do InContext Editing para editar páginas em um navegador, consulte 
www.adobe.com/go/learn dw incontextediting browser br. 


e Para obter documentação sobre o trabalho com o Painel de administração do InContext Editing, consulte 
www.adobe.com/go/learn dw incontextediting administration guide br. 


Para obter mais informações sobre o Adobe Business Catalyst, visite www.businesscatalyst.com. 
Nota: O Adobe AIR não fornece suporte para o Adobe Business Catalyst InContext Editing. Se você usar o AIR Extension para Dreamweaver 


para exportar um aplicativo que contém regiões do InContext Editing, os recursos do InContext Editing não funcionarão. 


Criar uma região editável do InContext Editing 

Uma região editável do InContext Editing consiste em um par de tags HTML incluindo o atributo ice:editable na tag de abertura. A região editável 
define uma área na página que pode ser editada diretamente por um usuário em um navegador. 

Nota: Se você estiver adicionando uma região editável do InContext Editing a uma página baseada em um modelo do Dreamweaver, essa nova 
região editável deve existir dentro de uma região que já é editável. 


1. Siga um destes procedimentos: 
* Selecione uma tag div, th ou td que você deseje transformar em uma região editável. 


* Posicione o ponto de inserção onde você pretende inserir uma nova região editável na página. 
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e Selecione exatamente uma região editável em um modelo do Dreamweaver (arquivo DWT). 

e Selecione outro conteúdo na página que você deseje tornar editável (por exemplo, um bloco de texto). 
2. Escolha Inserir > InContext Editing > Criar região editável. 
3. As opções variam dependendo de sua seleção. 


e Se você tiver selecionado uma tag div, th ou td, o Dreamweaver a transformará em uma região editável sem a necessidade de outras 
etapas. 


e Se estiver inserindo uma nova região editável em branco, siga um destes procedimentos: 


e Selecione Inserir nova região editável no ponto de inserção atual e clique em OK. O Dreamweaver insere uma tag div no seu código 
com o atributo ice:editable na tag de abertura. 


e Selecione Transformar a tag-mãe em uma região editável se quiser que o Dreamweaver transforme a tag-mãe da seleção no 
elemento de contêiner da região. Somente algumas tags HTML podem ser transformadas: div, th e td. 


Nota: Esta segunda opção está disponível somente quando o nó pai atende aos critérios exatos para transformação. Por exemplo, 
ele deve ser uma das tags transformáveis listadas e não deve estar sujeito a nenhum dos erros listados em Mensagens de erro do 
InContext Editing. 


e Se você selecionou uma região editável de modelo do Dreamweaver, clique em OK na caixa de diálogo Criar região editável. O 
Dreamweaver coloca a região editável de modelo entre as tags div que atuam como um contêiner para a nova região editável do 
InContext Editing. 


e Se você tiver selecionado outro conteúdo que deseje tornar editável, siga um destes procedimentos: 


e e Selecione Delimitar a seleção atual com uma tag DIV e transformá-la se quiser delimitar sua seleção com uma tag div e transformá- 
la em uma região editável. A tag div com a qual o Dreamweaver delimita o conteúdo atua como contêiner da região editável. 
Nota: Adicionar tags div às páginas pode alterar o processamento das páginas e os efeitos das regras de CSS. Por exemplo, se 
você tiver um regra de CSS que aplica uma borda vermelha ao redor das tags div, verá uma borda vermelha ao redor de sua 
seleção atual quando o Dreamweaver colocá-la entre as tags div e transmiti-la. Se você quiser evitar esse tipo de conflito, poderá 
reescrever as regras de CSS que afetam a seleção atual ou desfazer a transformação (Editar > Desfazer) e, em seguida, selecionar 
e transformar uma tag suportada que o Dreamweaver não precisa colocá-la entre as tags div. 


e Selecione Transformar a tag-mãe em uma região editável se quiser que o Dreamweaver transforme a tag-mãe da seleção no 
elemento de contêiner da região editável. Somente algumas tags HTML podem ser transformadas: div, th e td. 


4. Na Visualização de design, clique na aba azul da região editável para selecioná-la, se ainda não estiver selecionada. 
Nota: Se você estiver trabalhando e um modelo do Dreamweaver, certifique-se de selecionar a região editável InContext Editing (a região 
do contêiner) e não a região editável de modelo do Dreamweaver. 


5. Selecione ou cancele a seleção de opções no Inspetor de propriedades da região editável. As opções que você selecionar estarão 
disponíveis para um usuário que editar o conteúdo da região editável em um navegador. Por exemplo, se você selecionar a opção Negrito, 
o usuário poderá formatar o texto em negrito; se você selecionar as opções Lista numerada e Lista com marcadores, o usuário poderá criar 
listas numeradas e com marcadores; se você selecionar a opção Link, o usuário poderá criar links; e assim por diante. Passe o mouse 
sobre o ícone de cada opção para ver uma dica de ferramenta indicando a função ativada pela opção. 


6. Salve a página. 


Se for a primeira vez que você adiciona funções do InContext Editing a uma página, o Dreamweaver informará sobre o acréscimo dos 
arquivos de suporte do InContext Editing ao seu site: ice.conf.js, ice.js e ide.html. Certifique-se de carregar esses arquivos no servidor 
quando carregar sua página. Caso contrário, os recursos do InContext Editing não funcionarão em um navegador. 


Criar uma região repetitiva do InContext Editing 

Uma região repetitiva do InContext Editing consiste em um par de tags HTML incluindo o atributo ice:repeating na tag de abertura. A região 
repetitiva define uma área na página que um usuário pode "repetir" e à qual pode adicionar conteúdo ao fazer a edição em um navegador. Por 
exemplo, se você tem um cabeçalho e, em seguida, um parágrafo de texto, pode transformar esses elementos em uma região repetitiva que um 
usuário poderá duplicar em uma página. 
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Título 1 


Título 2 


+ 


Título 3 


Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent 


aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at 
nonummy quam ante ac quam. Maecenas uma purus, fermentum id 
molestie in, commodo porttitor, felis. Nam blandit quam ut lacus 


As regiões repetitivas, como são vistas em uma janela de navegador editável do InContext Editing. A região inferior é selecionada e pode ser 
duplicada novamente, excluída ou movida para cima e para baixo. 


Além de adicionar regiões repetitivas com base na região original, você também pode oferecer ao usuário a opção de excluir regiões, adicionar 
regiões completamente novas (não baseadas no conteúdo da região original) e mover as regiões para cima ou para baixo. 


Quando você cria uma região repetitiva, o Dreamweaver a delimita em outro contêiner, chamado de grupo de regiões repetitivas. Esse contêiner 
— uma tag div com o atributo ice:repeatinggroup adicionado à tag de abertura — atua como contêiner de todas as regiões repetitivas editáveis 
que um usuário pode adicionar ao grupo. Você não pode mover as regiões repetitivas para fora de seus contêineres de grupos de regiões 
repetitivas. Além disso, você não deve adicionar manualmente tags de grupos de regiões repetitivas à sua página. O Dreamweaver as adiciona 
automaticamente quando necessário. 


Nota: Ao criar uma região repetitiva a partir de uma linha da tabela (tag tr), o Dreamweaver aplica o atributo de grupo de regiões repetitivas à 
tag-mãe (por exemplo, a tag table) e não insere uma tag div. 


Se você estiver trabalhando em uma página que contém um grupo de regiões repetitivas e tentar adicionar uma região repetitiva imediatamente 
depois de um grupo existente, o Dreamweaver detectará que o grupo de regiões repetitivas precede a região que você está tentando adicionar e 
apresenta a opção de adicionar a nova região ao grupo existente. Você pode optar por adicionar a nova região repetitiva ao grupo existente ou 
criar um grupo de regiões repetitivas totalmente novo. 


Nota: Se você estiver adicionando uma região repetitiva do InContext Editing a uma página baseada em um modelo do Dreamweaver, essa 
nova região repetitiva deve existir dentro de uma região que já é editável. 


Para criar uma região repetitiva no Dreamweaver, siga estas etapas. 
1. Siga um destes procedimentos: 


* Selecione uma tag que você deseja transformar em uma região repetitiva. A lista de tags possíveis é extensa: a, abbr, acronym, 
address, b, big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, hi, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, 
ol, p, pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul e var. 


Nota: Somente as tags div podem conter atributos de região editável e repetitiva simultaneamente. 
e Posicione o ponto de inserção onde você pretende inserir uma nova região repetitiva na página. 
e Selecione exatamente uma região repetitiva em um modelo do Dreamweaver (arquivo DWT). 
* Selecione outro conteúdo na página que você deseje tornar repetível (por exemplo, um cabeçalho e um bloco de texto). 
2. Escolha Inserir > InContext Editing > Criar região repetitiva. 
3. As opções variam dependendo de sua seleção. 


e Se você tiver selecionado uma tag transformável, o Dreamweaver a transformará em uma região repetitiva sem a necessidade de outras 
etapas. 


* Se estiver inserindo uma nova região repetitiva em branco, siga um destes procedimentos: 
* Selecione Inserir nova região repetitiva no ponto de inserção atual e clique em OK. 


e Selecione Transformar a tag-mãe em uma região repetitiva se quiser que o Dreamweaver transforme a tag-mãe da seleção no 
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elemento de contêiner da região. Somente algumas tags HTML podem ser transformadas: a, abbr, acronym, address, b, big, 
blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, h1, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, pre, g, 
s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul e var. 


Nota: Esta segunda opção está disponível somente quando o nó pai atende aos critérios exatos para transformação. Por exemplo, 
ele deve ser uma das tags transformáveis listadas e não deve estar sujeito a nenhum dos erros listados em Mensagens de erro do 
InContext Editing. 


e Se você selecionou uma região repetitiva de modelo do Dreamweaver, clique em OK na caixa de diálogo Criar região repetitiva. O 
Dreamweaver coloca a região repetitiva de modelo entre as tags div que atuam como um contêiner para a nova região repetitiva do 
InContext Editing. 


e Se você tiver selecionado outro conteúdo que deseje tornar repetível, siga um destes procedimentos: 


e Selecione Delimitar a seleção atual com uma tag DIV e transformá-la se quiser delimitar sua seleção com uma tag div e transformá- 
la em uma região repetitiva. A tag div com a qual o Dreamweaver delimita o conteúdo atua como contêiner da região repetitiva. 


e Selecione Transformar a tag-mãe em uma região repetitiva se quiser que o Dreamweaver transforme a tag-mãe da seleção no 
elemento de contêiner da região repetitiva. Somente algumas tags HTML podem ser transformadas: a, abbr, acronym, address, b, 
big, blockquote, center, cite, code, dd, dfn, dir, div, dl, dt, em, font, hi, h2, h3, h4, h5, h6, hr, i, img, ins, kbd, label, li, menu, ol, p, 
pre, q, s, samp, small, span, strike, strong, sub, sup, table, tbody, tr, tt, u, ul e var. 


4. Na Visualização de design, clique na aba azul da região repetitiva para selecioná-la, se ainda não estiver selecionada. Observe que o 
Dreamweaver obriga você a selecionar a aba do grupo de regiões repetitivas. Isso ocorre porque todas as regiões repetitivas existem em 
um grupo de regiões repetitivas, e você precisa definir opções para essas regiões configurando as opções do grupo inteiro. 


5. Selecione ou cancele a seleção de opções no Inspetor de propriedades do grupo de regiões repetitivas. Há duas opções disponíveis: 
Reordenar e Adicionar/remover. Quando você seleciona Reordenar, os usuários podem mover as regiões repetitivas para cima ou para 
baixo durante a edição em um navegador. Quando você seleciona Adicionar/remover, os usuários podem adicionar ou remover regiões 
repetitivas durante a edição em um navegador. Ambas as opções são selecionadas por padrão, e você sempre deve selecionar pelo menos 
uma delas. 


6. Salve a página. 


Se for a primeira vez que você adiciona funções do InContext Editing a uma página, o Dreamweaver informará sobre o acréscimo dos 
arquivos de suporte do InContext Editing ao seu site: ice.conf.js, ice.js e ide.html. Certifique-se de carregar esses arquivos no servidor 
quando carregar sua página. Caso contrário, os recursos do InContext Editing não funcionarão em um navegador. 


Excluir uma região 
É melhor excluir uma região usando o Inspetor de propriedades da região. O uso do Inspetor de propriedades da região garante a exclusão de 
todo o código associado a ela. 


1. Selecione uma região editável, uma região repetitiva ou um grupo de regiões repetitivas. 


2. No Inspetor de propriedades da região, clique no botão Remover região. 


Especificar classes de CSS para formatação 
O InContext Editing gerencia as classes CSS disponíveis. O recurso foi retirado do Dreamweaver CS5. 


Mensagens de erro do InContext Editing 


Não é possível aplicar o InContext Editing às tags que contêm tags de script ou bloco(s) de código do servidor. 

Se a sua seleção contiver código do servidor, o Dreamweaver não permitirá que você a transforme em uma região editável ou repetitiva. Essa 
questão tem relação com a forma como o InContext Editing salva as páginas editáveis quando o usuário está trabalhando no navegador. Quando 
um usuário salva a página após a edição, o InContext Editing remove da região o código do servidor. 


A seleção atual não pode ser transformada nem ter quebra automática com uma tag DIV, pois o nó-pai não permite DIV 

como tag-filha 

Quando a seleção que deseja transformar em sua página não pode ser transformada diretamente, o Dreamweaver precisa colocar a seleção 
entre as tags div que atuam como o contêiner para a nova região editável ou repetitiva. Por essa razão, as tags-mãe daquilo que deseja 
transformar devem permitir as tags div como filhas. Se a tag-mãe da tag que você está tentando transformar não permitir tags div filhas, o 
Dreamweaver não permitirá que você realize a transformação. 


A seleção atual já contém ou está dentro de uma Região editável. Regiões editáveis aninhadas não são permitidas. 
Se a sua seleção estiver dentro de uma região editável ou se houver uma região editável dentro da seleção, o Dreamweaver não permitirá que 
você realize a transformação. O InContext Editing não oferece suporte a regiões editáveis aninhadas. 


Regiões editáveis não devem conter Regiões repetitivas nem Grupos de regiões repetitivas. 
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As regiões editáveis do InContext Editing não podem conter nenhum outro recurso do InContext Editing. Se você tentar adicionar uma região 
repetitiva ou um grupo de regiões repetitivas a uma região editável, o Dreamweaver não permitirá que você realize a transformação. 


Regiões repetitivas não devem conter Regiões editáveis nem Grupos de regiões repetitivas. 

As regiões editáveis do InContext Editing não podem conter nenhum outro recurso do InContext Editing. Se você tentar adicionar uma região 
repetitiva ou um grupo de regiões repetitivas a uma região editável, o Dreamweaver não permitirá que você realize a transformação. Além disso, o 
Dreamweaver não transformará um elemento em uma região editável ou repetitiva se ele já contiver um grupo de regiões repetitivas. 


A seleção atual já contém ou está dentro de uma Região repetitiva. Regiões repetitivas aninhadas não são permitidas. 
Se a sua seleção estiver dentro de uma região repetitiva ou se houver uma região repetitiva dentro da seleção, o Dreamweaver não permitirá que 
você realize a transformação. O InContext Editing não oferece suporte a regiões repetitivas aninhadas. 


A seleção deve conter exatamente uma região editávellrepetitiva de modelo do Dreamweaver ou estar em qualquer 

região editável de modelo do Dreamweaver. 

Ao trabalhar com arquivos de modelo do Dreamweaver (arquivos .dwt), você precisa seguir algumas regras. Para transformar uma região 
editável/repetitiva de modelo do Dreamweaver em uma região editável/repetitiva do InContext Editing, você precisa selecionar exatamente uma 
região editável/repetitiva de modelo do Dreamweaver na página e transformá-la. Para transformar outra seleção na página (por exemplo, um bloco 
de texto), a seleção precisa estar dentro de uma região editável de modelo do Dreamweaver. 


Somente tags DIV podem ter os recursos Região editável e Região repetitiva aplicados ao mesmo tempo. 


Se a sua seleção não for uma tag div e já tiver um atributo de região repetitiva aplicado a ela, o Dreamweaver não permitirá que você aplique 
também o atributo de região editável à tag. Somente as tags div podem ter atributos de região editável e repetitiva aplicados simultaneamente. 


O Dreamweaver detectou que a tag Grupo de regiões repetitivas precede a Região repetitiva 

Todas as regiões repetitivas do InContext Editing precisam existir dentro de um grupo de regiões repetitivas. Quando você adiciona uma nova 
região repetitiva a uma página, o Dreamweaver detecta se já existe um grupo de regiões repetitivas imediatamente anterior. Se existir, o 
Dreamweaver oferecerá a você a opção de adicionar a nova região repetitiva ao grupo de regiões repetitivas já existente, ou então criar um novo 
grupo de regiões repetitivas para conter a nova região repetitiva. 


[E5) ev-nc-sa ] 
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Importação de documentos do Microsoft Office (somente Windows) 


Você pode inserir o conteúdo completo de um documento do Microsoft Word ou Excel em uma página da Web nova ou existente. Durante a 
importação de um documento do Word ou Excel, o Dreamweaver recebe o HTML convertido e o insere na página da Web. O tamanho do 
arquivo, depois que o Dreamweaver recebe o HTML convertido, deve ser inferior a 300K. 


Em vez de importar o conteúdo total de um arquivo, você também pode colar partes de um documento do Word e preservar a formatação. 


Nota: Se você usa o Microsoft Office 97, não é possível importar o conteúdo de um documento do Word ou Excel; insira um link para o 
documento. 


1. Abra a página da Web na qual você deseja inserir o documento do Word ou Excel. 
2. Na Visualização de design, siga um destes procedimentos para selecionar o arquivo: 


e Arraste o arquivo de seu local atual para a página em que o conteúdo deve aparecer. 
* Selecione Arquivo > Importar > Documento do Word ou Arquivo > Importar > Documento do Excel. 


3. Na caixa de diálogo Inserir documento, vá até o arquivo desejado, selecione qualquer opção de formatação no menu pop-up Formatação 
exibido na parte inferior da caixa de diálogo e clique em Abrir. 
Apenas texto Insere texto sem formatação. Se o texto original for formatado, toda a formatação será removida. 


Texto com estrutura Insere um texto que retenha a estrutura, mas não retenha a formatação básica. Por exemplo, você pode colar o texto 
e reter a estrutura de parágrafos, listas e tabelas, sem reter o negrito, o itálico e outras formatações. 


Texto com estrutura e formatação básica Insere um texto HTML estruturado e simples (por exemplo, parágrafos e tabelas, assim como 
um texto formatado com a tag b, i, u, strong, em, hr, abbr ou acronym). 


Texto com estrutura e formatação integral Insere um texto que retenha a estrutura, a formatação HTML e os estilos CSS. 


Limpar espaçamento de parágrafo do Word Elimina o espaço extra entre os parágrafos quando você cola o texto, caso tenha 
selecionado Texto com estrutura ou Formatação básica. 


O conteúdo do documento do Word ou Excel é exibido na página. 
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Complementos 


Os complementos são novos recursos que podem ser adicionados facilmente ao Dreamweaver. Você pode usar muitos tipos de complementos; 
por exemplo, existem complementos que permitem reformatar tabelas, conectar-se com bancos de dados back-end ou ajudar a gravar scripts 
para navegadores. 


Nota: para instalar complementos aos quais todos os usuários tenham acesso em um sistema operacional de vários usuários, você deve estar 
conectado como Administrador (Windows) ou root (Mac OS X). Para obter mais informações sobre como usar o Dreamweaver em sistemas de 
vários usuários, clique aqui. 


ERR 
Uso de complementos no Dreamweaver Cio 


Clique em Janela > Buscar complementos para procurar e instalar os complementos. Quando você clica em Buscar complementos, a página 
Complementos da Adobe Creative Cloud é exibida. 


Na página Complementos da Adobe Creative Cloud, clique em Dreamweaver à esquerda para exibir complementos específicos do Dreamweaver. 
Você também pode usar a caixa de pesquisa à direita para procurar um complemento específico. 


o Casey — 
Acps E Services Adé-ons 
Õ 
Welcome to Creative Cloud Add-ons! 
Searcn for, discover, and install plug-ins, extensions, and other content for Adobe products 


Featured Add-ons 


[E] FioxiLayouts 2 


Drag & drop tayout editor 


PHP Form Mail FlexiLayouts 2 
Limecraft Studio Extend Stodio 
m o pe e a e e MA je= 


Parallax 
HTMLS Slider 


E o 


HTMLS Parallax Slider 
DMXzone com 


Horiz | Menu Advan 
CSSMenuTocis 


[1] Lightbox Advance Asp ASP 5 Support [—s Horizontal Menu Advancer 
a K E 

(Ce pps q 

m 


Página Complementos da Adobe Creative Cloud 


Importante: antes de instalar os complementos, certifique-se de que você tenha ativado a sincronização de arquivos para sua conta da Adobe 
Creative Cloud. Consulte Ativar sincronização de arquivos na Adobe Creative Cloud para obter mais detalhes. 


Siga as instruções na tela para instalar o complemento. 


Para exibir os complementos instalados ou compartilhados, clique em Todas as suas compras e itens compartilhados em Meus suplementos. 
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InDesier Lightbox Advancer ASP ASP JS Support 
[ “e : E Edi 
Dreamweaver a SUPPORT 


After Effect Es JQuery Accordion Slider E ASP Binding Formatter 


More. 


My Add-ons 


All your purchases [Du [Dw 


and shared items 


Become a Producer 


E PHP TwoTables Manager Ea PHP Upload Resize 
Do you produce 


content for Creative 


Página Complementos da Adobe Creative Cloud - Meus complementos 


Para o início 


Ativar a sincronização de arquivos na Adobe Creative Cloud 


Antes de instalar os complementos na Adobe Creative Cloud, certifique-se de ativar a sincronização de arquivos em seu cliente Adobe Creative 
Cloud. 


1. Clique em * na bandeja do sistema para abrir o cliente Adobe Creative Cloud. 


2. Clique em e depois em Preferências. 
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View Updates & Requests 


Preferences 


Help 


nstall or update an application 
Pinto Notification Area... 
Sync files to Creative Cloud Qui 


Sync fonts from Typekit 


Link your account with Behance 


You installed Extension Manager CC | View tutorials 


[65] You updated Creative Cloud | What's New? 


Preferências no cliente Adobe Creative Cloud 


3. Na guia Arquivos, defina Sincronização ativada/desativada como Ativada. 
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to Creative Cloud, but will not delete them locally. 


Folder location C:lUsersicasey | 


Transfer Speed Download 


Upload 


Show/Hide Notifications 
OS Notifications 
Home Feed 


Sincronização de arquivos no cliente Adobe Creative Cloud 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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Integração com vários aplicativos 


Sobre a integração com Photoshop, Flash e Fireworks 


Sobre a integração com Photoshop, Flash e Fireworks iii 


Photoshop, Fireworks e Flash são ferramentas avançadas de desenvolvimento da Web para criação e gerenciamento de arquivos gráficos e SWF. 
Você pode integrar o Dreamweaver nessas ferramentas para simplificar seu fluxo de trabalho de design da Web. 


Nota: Há também um integração limitada com alguns outros aplicativos. Por exemplo, é possível exportar um arquivo do InDesign como XHTML 
e continuar trabalhando com ele no Dreamweaver. Para assistir a um tutorial sobre esse fluxo de trabalho, consulte 
www. adobe.com/go/vidO202 br. 


Você pode inserir facilmente imagens e conteúdo criados com o Adobe Flash (arquivos SWF e FLV) em um documento do Dreamweaver. Você 
também pode editar uma imagem ou arquivo SWF no editor original depois de inseri-los em um documento do Dreamweaver. 


Nota: Para usar o Dreamweaver junto com esses aplicativos da Adobe, é necessário instalar esses aplicativos no seu computador. 


Para Fireworks e Flash, a integração entre produtos é obtida através de edição completa. A edição Roundtrip assegura que as atualizações de 
código sejam transferidas corretamente entre o Dreamweaver e esses outros aplicativos (por exemplo, para preservar os comportamentos de 
sobreposição ou os links para outros arquivos). 


O Dreamweaver também se baseia nas Design Notes para integração entre produtos. Design Notes são pequenos arquivos que permitem que o 
Dreamweaver localize o documento de origem de uma imagem ou de um arquivo SWF exportados. Ao exportar arquivos do Fireworks, do Flash 
ou do Photoshop diretamente para um site definido do Dreamweaver, as Design Notes que contêm referências ao arquivo de criação PSD, PNG 
ou do Flash (FLA) original são exportadas automaticamente para o site junto com o arquivo habilitado para a Web (GIF, JPEG, PNG ou SWF). 


Além das informações sobre o local, as Design Notes contêm outras informações pertinentes sobre os arquivos exportados. Por exemplo, ao 
exportar uma tabela do Fireworks, o Fireworks grava uma Design Note para cada arquivo de imagem exportado da tabela. Se o arquivo 
exportado tiver pontos ativos ou sobreposições, as Design Notes incluirão informações sobre seus scripts. 


Como parte da operação de exportação, o Dreamweaver cria a pasta named notes na mesma pasta do ativo exportado. Essa pasta contém as 
Design Notes que o Dreamweaver precisa para ser integrado no Photoshop, no Flash ou no Fireworks. 


Nota: Para usar as Design Notes, verifique se elas não estão desativadas para o site do Dreamweaver. Elas estão ativadas por padrão. No 
entanto, mesmo se estiverem desativadas, quando um arquivo de imagem do Photoshop for inserido, o Dreamweaver criará uma Design Note 
para armazenar o local do arquivo PSD de origem. 

Para assistir a um tutorial sobre a integração do Dreamweaver e do Fireworks, consulte www.adobe.com/go/vid0188 br. 


Para assistir a um tutorial sobre a integração do Dreamweaver e do Photoshop, consulte www.adobe.com/go/lrvid4043 dw br. 


Mais tópicos da Ajuda 
Tutorial do Dreamweaver e do InDesign 


(9) ex-nc-sa ) 
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AIR Extension para Dreamweaver 


Instalação do AIR Extension para Dreamweaver 

Criação de um aplicativo AIR no Dreamweaver 

Assinar um aplicativo com um certificado digital 

Edição de tipos de arquivos AIR associados 

Edição das configurações do aplicativo AIR 

Visualização de uma página da Web em um aplicativo AIR 
Uso das dicas de código do AIR e da codificação por cores 
Acesso à documentação do Adobe AIR 


O AdobeQ AIRO Extension for Dreamweaverê permite transformar um aplicativo baseado na Web em um aplicativo desktop. Os usuários podem, 
assim, executar o aplicativo em seus desktops e, em alguns casos, sem uma conexão com a Internet. 


Você pode usar a extensão com o Dreamweaver CS3 e posterior. Não é compatível com o Dreamweaver 8. 


Nota: O Adobe AIR não fornece suporte para o Adobe InContext Editing. Se você usar o AIR Extension para Dreamweaver para exportar um 
aplicativo que contém regiões do InContext Editing, os recursos do InContext Editing não funcionarão. 


Ei - P, iníci 
Instalação do AIR Extension para Dreamweaver o a 


O AIR Extension para Dreamweaver o ajuda a criar aplicativos ricos da Internet para o desktop. Por exemplo, você pode ter um conjunto de 
páginas da Web que interagem uma com a outra para exibir dados XML. Você pode usar o Adobe AIR Extension para Dreamweaver para 
compactar esse conjunto de páginas em um pequeno aplicativo que pode ser instalado no computador de um usuário. Quando o usuário executar 
o aplicativo a partir do desktop, o aplicativo será carregado e exibirá o protótipo na sua própria janela, independentemente de um navegador. O 
usuário pode então procurar o site localmente no seu computador, sem uma conexão com a Internet. 


Páginas dinâmicas, como páginas do AdobeQ ColdFusionQ e páginas PHP não são executadas em Adobe AIR. O tempo de execução funciona 
apenas com HTML e JavaScript. No entanto, você pode usar JavaScript em suas páginas para chamar qualquer serviço da Web exposto na 
Internet, incluindo os serviços ColdFusion ou gerados por PHP, com métodos Ajax, como XMLHTTPRequest ou APIs específicas do Adobe AIR. 


Requisitos do sistema 
Para usar o Adobe AIR Extension para Dreamweaver, o software a seguir deverá ser instalado e adequadamente configurado: 


e Dreamweaver CS3 ou posterior 
e AdobeQ Extension Manager CS3 ou posterior 
e Java JRE 1.4 ou posterior (necessário para criação do arquivo Adobe AIR). O Java JRE está disponível em http://java.sun.com/. 


Os requisitos precedentes existem apenas para criação e visualização de aplicativos Adobe AIR no Dreamweaver. Para instalar e executar 
um aplicativo Adobe AIR no desktop, é necessário também instalar o Adobe AIR no computador. Para baixar o tempo de execução, consulte 
www.adobe.com/go/air br. 


Instale o Adobe AIR Extension para Dreamweaver 
1. Baixe o Adobe AIR Extension para Dreamweaver aqui: http:/Avww.adobe.com/producis/air/tools/ajax/. 
2. Clique duas vezes no arquivo de extensão .mxp no Windows Explorer (Windows) ou no Finder (Macintosh). 
3. Siga as instruções na tela para instalar a extensão. 
4. Depois de ter concluído, reinicie o Dreamweaver. 


Para obter informações sobre como usar o Adobe AIR Extension para Dreamweaver, consulte Como usar o AIR Extension para 
Dreamweaver. 


a o Ra 
Criação de um aplicativo AIR no Dreamweaver PRP SNENE 


Para criar um aplicativo AIR baseado em HTML no Dreamweaver, você seleciona um site existente para compactar como um aplicativo AIR. 
1. Certifique-se de que as páginas da Web que deseja compactar em um aplicativo estejam contidas em um site definido do Dreamweaver. 
2. No Dreamweaver, abra a página inicial do conjunto de páginas que deseja compactar. 


3. Selecione Site > Configurações do aplicativo AIR. 
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4. Conclua a caixa de diálogo Configurações do aplicativo AIR e do instalador e clique em Criar arquivo AIR. 
Para obter mais informações, consulte as opções da caixa de diálogo listadas a seguir. 


Na primeira vez que você cria um arquivo Adobe AIR, o Dreamweaver cria um arquivo aplicativo.xml na pasta raiz do site. Esse arquivo 
serve como um manifesto, definindo várias propriedades do aplicativo. 


A seguir, há uma descrição das opções na caixa de diálogo Configurações do aplicativo AIR e do instalador: 


Nome do arquivo do aplicativo é o nome usado para o arquivo executável do aplicativo. Por padrão, a extensão usa o nome do site do 
Dreamweaver para nomear o arquivo. Você pode alterar o nome, se preferir. No entanto, no nome deve conter apenas caracteres válidos 
para nomes de arquivos ou de pastas. (Ou seja, pode conter apenas caracteres ASCII e não pode terminar com um ponto.) Essa 
configuração é obrigatória. 


Nome do aplicativo é o nome que é exibido nas telas de instalação quando os usuários instalam o aplicativo. Novamente, a extensão 
especifica o nome do site do Dreamweaver por padrão. Essa configuração não tem restrições de caractere e não é obrigatória. 


ID do aplicativo identifica o aplicativo com uma ID exclusiva. Você pode alterar a ID padrão se preferir. Não use espaços ou caracteres 
especiais no ID. Os únicos caracteres válidos são 0-9, a-z, A-Z, . (ponto) e - (traço). Essa configuração é obrigatória. 


Versão especifica o número da versão do aplicativo. Essa configuração é obrigatória. 


Conteúdo inicial especifica a página inicial do aplicativo. Clique no botão Navegar para navegar para a página inicial e selecioná-la. O 
arquivo escolhido deve residir dentro da pasta raiz do site. Essa configuração é obrigatória. 


Descrição permite especificar uma descrição do aplicativo a ser exibida quando o usuário instalar o aplicativo. 


Copyright permite especificar um copyright que é exibido nas informações em Sobre para aplicativos Adobe AIR instalados no Macintosh. 
Essas informações não são usadas para aplicativos instalados no Windows. 


Estilo da janela especifica o estilo da janela (ou cromo) que será utilizado na interface de usuário quando o usuário executar o aplicativo 
no computador. O Cromo do sistema rodeia o aplicativo com o controle de janelas padrão do sistema operacional. O Cromo personalizado 
(opaco) elimina o cromo padrão do sistema e permite criar um cromo do seu próprio aplicativo. (Você cria o cromo personalizado 
diretamente na página HTML compactada.) O cromo personalizado (transparente) é como o cromo personalizado (opaco), mas adiciona 
recursos transparentes às bordas da página, permitindo janelas de aplicativo não retangulares. 


Tamanho da janela especifica as dimensões da janela do aplicativo quando ela é aberta. 


ícone permite selecionar imagens personalizadas para os ícones de aplicativos. (As imagens padrão são imagens Adobe AIR que vêm com 
a extensão.) Para usar imagens personalizadas, clique no botão Selecionar imagens de ícones. Na caixa de diálogo Imagens de ícones que 
é exibida, clique na pasta para cada tamanho de ícone e selecione o arquivo de imagem que utilizará. o AIR oferece suporte a arquivos 
PNG de imagens de ícones de aplicativos. 

Nota: As imagens personalizadas selecionadas devem residir no site do aplicativo e seus caminhos devem ser relativos à raiz do site. 


Tipos de arquivos associados permite associar tipos de arquivos ao seu aplicativo. Para obter mais informações, consulte a seção a 
seguir. 


Atualizações de aplicativos determina se o instalador de aplicativo do Adobe AIR ou o próprio aplicativo executa atualizações para novas 
versões dos aplicativos Adobe AIR. A caixa de seleção é marcada por padrão, o que faz com que o instalador de aplicativo do Adobe AIR 
execute atualizações. Se quiser que seu aplicativo execute suas próprias atualizações, desmarque a caixa de seleção. Tenha em mente 
que se desmarcar a caixa de seleção, você precisará escrever um aplicativo que execute atualizações. 


Arquivos incluídos especifica quais arquivos ou pastas serão incluídos no aplicativo. Você pode adicionar arquivos HTML e CSS, arquivos 
de imagem e arquivos de bibliotecas JavaScript. Clique no botão de adição (+) para adicionar arquivos e no ícone de pasta para adicionar 
pastas. Não inclua certos arquivos como as mmServerScripts, notes, e assim por diante. Para excluir um arquivo ou uma pasta da lista, 
selecione o arquivo ou a pasta e clique no botão de subtração (-). 


Assinatura digital Clique em Definir para assinar o aplicativo com uma assinatura digital. Essa configuração é obrigatória. Para obter mais 
informações, consulte a seção a seguir. 


Pasta de menu do programa especifica um subdiretório no menu Iniciar do Windows em que você deseja que o atalho do aplicativo seja 
criado. (Não aplicável no Macintosh.) 


Destino especifica onde salvar o novo instalador de aplicativos (arquivo .air). O local padrão é a raiz do site. Clique no botão Procurar para 
selecionar um local diferente. O nome de arquivo padrão se baseia no nome do site, com uma extensão .air adicionada. Essa configuração 
é obrigatória. 


A seguir há um exemplo da caixa de diálogo com algumas opções básicas definidas: 


669 


AIR Application and Installer Settings 


: | airdemo 


| airDemo.html 


Copyright: 

Window style: [System Chrome na 14] 

Window size: Width: | 800 | Height:| 600 | 

Icon: 
Associated File Types: 

Appiication Updates: [7] Handied by AIR application instaler 
Instaler settings 
Included files: |+) =] 15 


[B) application.xml 
[B) airDemo.html 


*Digital signature: AIR Package wil be signed with: 


CiASitesyAIRidigital cert 
Program menu folder: | 


e 
*Destination: | airdemo.air | 


* asterisk indicates required information 


E E E digs EE P, iníci 
Assinar um aplicativo com um certificado digital RR 


Uma assinatura digital fornece a garantia de que o código de um aplicativo não foi alterado ou corrompido desde a sua criação pelo autor do 
software. Todos os aplicativos Adobe AIR exigem uma assinatura digital e não podem ser instalados sem ela. Você pode assinar o aplicativo com 
um certificado digital comprado, criar seu próprio certificado ou preparar um arquivo Adobe AIRI (um arquivo intermediário Adobe AIR) que você 


assinará posteriormente. 


1. Na caixa de diálogo Configurações do aplicativo e do instalador AIR, clique no botão Definir, ao lado da opção Assinatura digital. 


2. Na caixa de diálogo Assinatura digital, siga um destes procedimentos: 


e Para assinar um aplicativo com um certificado digital pré-adquirido, clique no botão Procurar, selecione o certificado, insira a senha 
correspondente e clique em OK. 

* Para criar o seu próprio certificado digital autoassinado, clique no botão Criar e preencha a caixa de diálogo. A opção de tipo de 
certificado refere-se ao nível de segurança: 1024-RSA usa uma chave de 1024 bits (menos segura) e 2048-RSA usa uma chave de 
2048 bits (mais segura). Quando terminar, clique em OK. Em seguida, insira a senha correspondente na caixa de diálogo Assinatura 
digital e clique em OK. 

e Selecione Preparar um pacote AIRI que será assinado posteriormente e clique em OK. Essa opção permite criar um aplicativo AIR 
intermediário (AIRI) sem uma assinatura digital. Um usuário não consegue instalar o aplicativo, no entanto, até você adicionar uma 
assinatura digital. 


Sobre o carimbo de datalhora 

Quando você assina um aplicativo Adobe AIR com um certificado digital, a ferramenta de compactação pergunta ao servidor sobre uma 
autoridade de carimbo de data e hora para obter uma data e hora de assinatura verificável independentemente. O carimbo de data e hora obtido 
é incorporado no arquivo AIR. Desde que o certificado de assinatura seja válido no momento da assinatura, o arquivo AIR poderá ser instalado, 
mesmo depois que o certificado tiver expirado. Por outro lado, se nenhum carimbo de data e hora for obtido, o arquivo AIR não poderá mais ser 
instalado quando o certificado expirar ou for revogado. 
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Por padrão, o Adobe AIR Extension para Dreamweaver obtém um carimbo de data e hora ao criar um aplicativo Adobe AIR. Você pode, no 
entanto, desativar o carimbo de data e hora desfazendo a seleção da opção Carimbo de data e hora na caixa de diálogo Assinatura digital. 
(Recomendamos fazer isso, por exemplo, se um serviço de carimbo de data e hora não estiver disponível.) A Adobe recomenda que todos os 
arquivos AIR publicamente distribuídos incluam um carimbo de data e hora. 


A autoridade de carimbo de data e hora padrão usada pelas ferramentas de compactação do AIR é o Geotrust. Para obter mais informações 
sobre o carimbo de data/hora e os certificados digitais, consulte Assinatura digital do arquivo AIR. 


Edição de tipos de arquivos AIR associados ida 


Você pode associar diferentes tipos de arquivos com o aplicativo Adobe AIR. Por exemplo, se quiser tipos de arquivos com uma extensão .avf 
para abrir no Adobe AIR quando um usuário clicar duas vezes neles, você poderá adicionar a extensão .avf à lista de tipos de arquivos 
associados. 


1. Na caixa de diálogo Configurações do aplicativo e do instalador AIR, clique no botão Editar lista, ao lado da opção Tipos de arquivos 
associados. 


2. Na caixa de diálogo Tipos de arquivos associados, siga um destes procedimentos: 
* Selecione um tipo de arquivo e clique no botão menos (-) para excluir o tipo de arquivo. 
e Clique no botão mais (+) para adicionar um tipo de arquivo. 


Se clicar no botão mais para adicionar um tipo de arquivo, a caixa de diálogo Configurações de tipo de arquivo será exibida. Conclua a 
caixa de diálogo e clique em OK para fechá-la. 


A seguir está uma lista de opções: 


Nome especifica o nome do tipo de arquivo que aparece na lista Tipos de arquivos. Essa opção é obrigatório e pode incluir apenas 
caracteres ASCII alfanuméricos (a-z, A-Z, 0-9) e pontos (por exemplo, adobe.VideoFile). O nome deve ser iniciado com uma letra. O 
tamanho máximo é de 38 caracteres. 


Extensão especifica a extensão do tipo de arquivo. Não inclui um ponto antes da extensão. Essa opção é obrigatória e pode incluir 
apenas caracteres ASCII alfanuméricos (a-z, A-Z, 0-9). O tamanho máximo é de 38 caracteres. 


Descrição permite especificar uma descrição opcional para o tipo de arquivo. 
Tipo de conteúdo especifica o tipo MIME ou tipo de mídia para o arquivo (por exemplo texto/html, imagem/gif, e assim por diante). 


Locais de arquivos de ícones permite selecionar imagens personalizadas para os tipos de arquivos associados. (As imagens padrão 
são imagens Adobe AIR que vêm com a extensão). 


Edição das configurações do aplicativo AIR dd 


Você pode editar as configurações do aplicativo Adobe AIR a qualquer momento. 


* Selecione Site > Configurações do aplicativo AIR e faça as alterações. 


Visualização de uma página da Web em um aplicativo AIR EMP AnRO 


Você pode visualizar uma página HTML no Dreamweaver da maneira que ela apareceria em um aplicativo Adobe AIR. A visualização é útil 
quando você quer ver como uma página da Web será no aplicativo sem ter que criar todo o aplicativo. 


*& Na barra de ferramentas do documento, clique no botão Visualizar/depurar no navegador e selecione Visualizar em AIR. 


Você também pode pressionar Cirl+Shift+F12 (Windows) ou Cmd+Shift+F12 (Macintosh). 


Uso das dicas de código do AIR e da codificação por cores e ad 


O Adobe AIR Extension para Dreamweaver também adiciona dicas de código e a codificação por cores para os elementos de linguagem do 
Adobe AIR na Visualização de código no Dreamweaver. 


*& Abra um arquivo HTML ou JavaScript na Visualização de código e insira o código do Adobe AIR. 
Nota: O mecanismo de dicas de código funciona apenas entre tags <script> ou em arquivos .js. 
Para obter mais informações sobre os elementos de linguagem do Adobe AIR, consulte a documentação do desenvolvedor no resto deste guia. 


Acesso à documentação do Adobe AIR Para o início 


O Adobe AIR Extension adiciona um item ao menu de ajuda do Dreamweaver que permite acessar aplicativos AIR em desenvolvimento com 
HTML e Ajax. 
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*& Selecione Ajuda > Ajuda do Adobe AIR. 


(69) ex-nc-sa ] 


Avisos legais | Política de privacidade on-line 
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Adição e modificação de imagens 


Sobre imagens 

Inserção de uma imagem 

Redimensionamento visual de uma imagem 

Inserção de um alocador de espaço de imagem 

Substituição de um alocador de espaço de imagem 

Definição das propriedades do alocador de espaço de imagem 
Edição de imagens no Dreamweaver 

Criação de uma imagem de sobreposição 

Uso de um editor de imagens externas 

Aplicação de comportamentos às imagens 


Para o início 


Sobre imagens 


Há vários tipos diferentes de formatos de arquivos gráficos, mas três formatos são geralmente usados nas páginas da Web: GIF, JPEG e PNG. Os formatos de arquivo GIF 
e J PEG são os mais aceitos e podem ser exibidos pela maioria dos navegadores. 


GIF (Graphic Interchange Format) Os arquivos GIF usam um máximo de 256 cores e são mais adequados para a exibição de imagens em tom 
não contínuo ou imagens grandes de cores simples, como barras de navegação, botões, ícones, logotipos ou outras imagens com cores e tons 
uniformes. 


JPEG (Joint Photographic Experts Group) O formato de arquivo JPEG é o formato preferido para imagens fotográficas ou em tom contínuo, 
pois os arquivos JPEG podem conter milhões de cores. À medida que a qualidade de um arquivo JPEG aumenta, também aumentam o tamanho 
e o tempo de download do arquivo. Você geralmente consegue um bom equilíbrio entre a qualidade da imagem e o tamanho do arquivo 
compactando um arquivo JPEG. 


PNG (Portable Network Group) O formato de arquivo PNG é um substituto sem patentes para GIFs que inclui suporte a imagens true-color, em 
tons de cinza e de cores indexadas, além de suporte a canal alfa para transparência. PNG é o formato de arquivo nativo do AdobeO FireworksO. 
Os arquivos PNG retêm todas as informações originais de camada, vetor, cor e efeitos (como sombras), e todos os elementos são completamente 
editáveis, continuamente. Os arquivos devem ter a extensão .png para serem reconhecidos como arquivos PNG pelo Dreamweaver. 


” ã Para o início 
Inserção de uma imagem 


Quando você insere uma imagem em um documento do Dreamweaver, uma referência ao arquivo de imagem é gerada no código-fonte HTML. 
Para garantir que essa referência está correta, o arquivo de imagem deve estar no site atual. Caso contrário, o Dreamweaver perguntará se você 
deseja copiar o arquivo para o site. 


Você também pode inserir imagens dinamicamente. As imagens dinâmicas são aquelas que mudam frequentemente. Por exemplo, os sistemas 
de rotação de banners de propaganda precisam selecionar aleatoriamente um banner em uma lista de banners possíveis e exibir dinamicamente 
a imagem do banner selecionada quando uma página é solicitada. 


Após inserir uma imagem, você poderá definir os atributos de acessibilidade de tag de imagem que podem ser lidos pelos leitores de tela para 
usuários com deficiências visuais. Esses atributos podem ser editados no código HTML. 


Para obter um tutorial sobre inserção de imagens, veja Adição de imagens. 


1. Coloque o ponto de inserção no local da janela Documento em que a imagem deve aparecer e siga um destes procedimentos: 


e Na categoria Comum do painel Inserir, clique no ícone Imagens [2] 


e Na categoria Comum do painel Inserir, clique no botão Imagens e selecione o ícone Imagem. Com o ícone Imagem exibido no painel 
Inserir, arraste-o para a janela Documento (ou a janela Visualização de código, caso você esteja trabalhando no código). 


e Selecione Inserir > Imagem. 

* Arraste uma imagem do painel Ativos (Janela > Ativos) para o local desejado na janela Documento e vá para a etapa 3. 
e Arraste uma imagem do painel Arquivos para o local desejado na janela Documento e vá para a etapa 3. 

e Arraste uma imagem da área de trabalho para o local desejado na janela Documento e vá para a etapa 3. 


2. Na caixa de diálogo exibida, siga um destes procedimentos: 
* Selecione Sistema de arquivos para escolher um arquivo de imagem. 
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e Selecione Fonte de dados para escolher uma origem de imagem dinâmica. 
e Clique no botão Sites e servidores para escolher um arquivo de imagem em uma pasta remota de um dos sites do Dreamweaver. 
3. Navegue para selecionar a origem da imagem ou do conteúdo que deseja inserir. 


Se você estiver trabalhando em um documento não salvo, o Dreamweaver gerará uma referência file:// para o arquivo de imagem. Quando 
você salva o documento em qualquer lugar do site, o Dreamweaver converte a referência em um caminho relativo a documento. 


Nota: durante a inserção de imagens, é possível usar um caminho absoluto para uma imagem que reside em um servidor remoto (ou seja, 
uma imagem que não esteja disponível no disco rígido local). No entanto, se você tiver problemas de desempenho enquanto estiver 
trabalhando, talvez seja necessário desativar a exibição da imagem na Visualização de design, desmarcando Comandos > Exibir arquivos 
externos. 


4. Clique em OK. A caixa de diálogo Atributos de acesso à tag de imagem aparecerá se você tiver ativado a caixa de diálogo em Preferências 


(Editar > Preferências). 


5. Digite valores nas caixas de texto Texto alternativo e Descrição longa, e clique em OK. 
e Na caixa Texto alternativo, digite um nome ou uma breve descrição para a imagem. O leitor de tela lê as informações que você digita 
aqui. Você deve limitar a entrada a aproximadamente 50 caracteres. Em descrições mais longas, é recomendável fornecer um link, na 
caixa de texto Descrição longa, para um arquivo que forneça mais informações sobre a imagem. 


e Na caixa Descrição longa, digite o local de um arquivo que será exibido quando o usuário clicar na imagem ou clique no ícone de pasta 
para navegar até o arquivo. Esta caixa de texto fornece um link para um arquivo relacionado à imagem ou fornece mais informações 
sobre a imagem. 


Nota: você pode digitar informações em uma ou em ambas as caixas de texto, se necessário. O leitor de tela lê o atributo Alt da imagem. 


Nota: se você clicar em Cancelar, a imagem aparecerá no documento, mas o Dreamweaver não associará tags ou atributos de 
acessibilidade à imagem. 


6. No Inspetor de propriedades (Janela > Propriedades), defina as propriedades da imagem. 


Definição das propriedades da imagem 
O Inspetor de propriedades de imagens permite que você defina as propriedades de uma imagem. Se você não consegue ver todas as 
propriedades de imagem, clique na seta de expansão no canto inferior direito. 


desu Pã, se sem es (3 es tetra Wi lime “ mato | 


ne 
EA 
p E] 20 mB Ps BCs nm imo 09 
Ms Petro 
IM DDS ond mesnieersarimo am QE) 


a 


1. Selecione Janela > Propriedades para exibir o Inspetor de propriedades de uma imagem selecionada. 


2. Na caixa de texto abaixo da imagem em miniatura, digite um nome com o qual você se referirá à imagem ao usar um comportamento do 


Dreamweaver (como Trocar imagem) ou ao usar uma linguagem de script como JavaScript ou VBScript. 


Defina qualquer uma das opções de imagem. 


Lea Alargura e a altura da imagem, em pixels. O Dreamweaver atualiza automaticamente essas caixas de texto com as dimensões 
originais da imagem quando você insere uma imagem em uma página. 


Se você definir valores L e A que não correspondam à largura e altura reais da imagem, esta pode não ser exibida corretamente em um 
navegador. (Para restaurar os valores originais, clique nos rótulos de caixa de texto L e A ou no botão Redefinir tamanho da imagem 
exibido à direita das caixas de texto L e A quando você digita um novo valor.) 


Nota: você pode alterar esses valores para dimensionar o tamanho de exibição desta ocorrência da imagem, mas isso não reduz o tempo 
de download, pois o navegador baixa todos os dados da imagem antes do seu dimensionamento. Para reduzir o tempo de download e 
garantir que todas as ocorrências de uma imagem aparecerão do mesmo tamanho, use o aplicativo de edição de imagens para dimensionar 
as imagens. 


Origem Especifica o arquivo de origem da imagem. Clique no ícone de pasta para navegar até o arquivo de origem ou digite o caminho. 


Link Especifica um hiperlink para a imagem. Arraste o ícone Apontar para arquivo para um arquivo do painel Arquivos, clique no ícone de 
pasta para ir até um documento no site ou digite manualmente o URL. 


Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos navegadores que foram 
definidos para baixar as imagens manualmente. Para os usuários com deficiências visuais que usam sintetizadores de fala com 


navegadores somente texto, o texto é falado em voz alta. Em alguns navegadores, esse texto também aparece quando o ponteiro está 
sobre a imagem. 


Ferramentas Nome do mapa e Ponto ativo Permite que você identifique e crie um mapa de imagens do cliente. 
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Alvo Especifica o quadro ou a janela em que a página vinculada será carregada. (Esta opção não está disponível quando a imagem não 
está vinculada a outro arquivo.) Os nomes de todos os quadros do conjunto de quadros atuais aparecem na lista Destino. Você também 
pode escolher entre os nomes de destino reservados: 


e blank carrega o arquivo vinculado em uma nova janela do navegador não nomeada. 


* - parent carrega o arquivo vinculado no conjunto de molduras pai ou na janela do quadro que contém o link. Se o quadro que contém 
o link não estiver aninhado, o arquivo vinculado será carregado na janela de navegador em tamanho integral. 


e self carrega o arquivo vinculado no mesmo quadro ou janela do link. Esse destino é o padrão, normalmente não é necessário 
especificá-lo. 


e top carrega o arquivo vinculado na janela de navegador em tamanho integral, removendo todos os quadros. 
Editar Inicia o editor de imagens especificado nas preferências de editores externos e abre a imagem selecionada. 


Atualizar do original 77! Quando a imagem da Web (ou seja, a imagem na página do Dreamweaver) está fora de sincronia com o arquivo 
Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do ícone do Objeto Inteligente em 
vermelho. Quando você seleciona a imagem da Web na Visualização de design e clica no botão Atualizar do original no Inspetor de 
propriedades, a imagem é atualizada automaticamente, refletindo todas as alterações feitas no arquivo original do Photoshop. 


Editar configurações da imagem «É abre a caixa de diálogo Visualização de imagem e possibilita que você otimize a imagem. 
Cortar N Apara o tamanho de uma imagem, removendo áreas indesejadas da imagem selecionada. 


Nova amostra ES Faz uma nova amostra de uma imagem redimensionada, aprimorando sua qualidade no seu novo tamanho e forma. 
Brilho e contraste É) Ajusta as configurações de brilho e contraste de uma imagem. 


Nitidez À ajusta a nitidez de uma imagem. 


Edição dos atributos de acessibilidade da imagem no código 
Se você inseriu os atributos de acessibilidade de uma imagem, poderá editar esses valores no código HTML. 


1. Najanela Documento, selecione a imagem. 


2. Siga um destes procedimentos: 
* Edite os atributos de imagem apropriados na Visualização de código. 


e Clique com o botão direito do mouse (Windows) ou mantenha pressionada a tecla Control enquanto clica (Macintosh), e selecione 
Editar tag. 


e Edite o valor Alt no Inspetor de propriedades. 


' à p g Para o início 
Redimensionamento visual de uma imagem 


Você pode redimensionar visualmente elementos como imagens, plug-ins, arquivos Shockwave ou SWF, applets e controles ActiveX no 
Dreamweaver. 


O redimensionamento visual de uma imagem ajuda você a ver como a imagem afeta o layout em diferentes dimensões, mas não dimensiona o 
arquivo de imagem nas proporções especificadas. Se você redimensionar visualmente uma imagem no Dreamweaver sem usar um aplicativo de 
edição de imagens (como o Adobe Fireworks) para dimensionar o arquivo de imagem para o tamanho desejado, o navegador do usuário 
dimensionará a imagem quando a página for carregada. Isso pode ocasionar um atraso no tempo de download da página e a exibição 
inadequada da imagem no navegador do usuário. Para reduzir o tempo de download e garantir que todas as ocorrências de uma imagem 
aparecerão do mesmo tamanho, use o aplicativo de edição de imagens para dimensionar as imagens. 


Ao redimensionar uma imagem no Dreamweaver, você poderá fazer uma nova amostra para acomodar suas novas dimensões. A nova amostra 
adiciona ou remove pixels de arquivos de imagem JPEG e GIF redimensionados para que eles correspondam ao máximo à aparência da imagem 
original. A nova amostra de uma imagem reduz seu tamanho de arquivo e melhora o desempenho do download. 


Redimensionamento visual de um elemento 
1. Selecione o elemento (por exemplo, uma imagem ou arquivo SWF) na janela Documento. 


As alças de redimensionamento aparecem nos lados inferior e direito do elemento no canto inferior direito. Se as alças de 
redimensionamento não aparecerem, clique em qualquer lugar que não seja o elemento que você deseja redimensionar e selecione-o 
novamente, ou clique na tag apropriada no seletor de tags para selecionar o elemento. 


2. Redimensione o elemento executando um dos procedimentos a seguir: 
e Para ajustar a largura do elemento, arraste a alça de seleção à direita. 
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e Para ajustar a altura do elemento, arraste a alça de seleção inferior. 
e Para ajustar a largura e a altura do elemento ao mesmo tempo, arraste a alça de seleção de canto. 


e Para preservar as proporções do elemento (sua proporção de largura para altura) enquanto ajusta suas dimensões, pressione Shift 
enquanto arrasta a alça de seleção de canto. 


e Para ajustar a largura e a altura de um elemento para um tamanho específico (por exemplo, 1 x 1 pixel), use o Inspetor de propriedades 
para digitar um valor numérico. Os elementos podem ser visualmente redimensionados em, no mínimo, 8 x 8 pixels. 


3. Para retornar um elemento redimensionado às suas dimensões originais, no Inspetor de propriedades, exclua os valores nas caixas de 
texto L e A ou clique no botão Redefinir tamanho no Inspetor de propriedades de imagem. 


Reversão de uma imagem ao seu tamanho original 
e Clique no botão Redefinir tamanho no Inspetor de propriedades de imagem. 


Criação de amostra de uma imagem redimensionada 
1. Redimensione a imagem conforme descrito anteriormente. 


2. Clique no botão Nova amostra no Inspetor de propriedades de imagem 34 


Nota: você não pode fazer uma nova amostra de alocadores de espaço de imagem ou elementos que não sejam imagens de bitmap. 


” , Para o início 
Inserção de um alocador de espaço de imagem 


Um alocador de espaço de imagem é um gráfico utilizado até que a arte final esteja pronta para ser adicionada a uma página da Web. Você pode 
definir o tamanho e a cor do alocador de espaço, bem como fornecer um rótulo de texto a ele. 


1. Na janela Documento, coloque o ponto de inserção no local em que deseja inserir um gráfico de alocador de espaço. 


2. Selecione Inserir > Objetos de imagem > Alocador de espaço de imagem.. 


3. Em Nome (opcional), digite o texto que deve aparecer como rótulo no alocador de espaço de imagem. Deixe a caixa de texto em branco 
caso não deseje que o rótulo apareça. O nome deve começar com uma letra e pode conter apenas letras e números. Não são permitidos 
espaços e caracteres ASCII maiúsculos. 


4. Em Largura e Altura (obrigatório), digite um número para definir o tamanho da imagem em pixels. 
5. Em Cor (opcional), siga um destes procedimentos para aplicar uma cor: 
e Use o seletor de cores para selecionar uma cor. 


e Digite o valor hexadecimal da cor (por exemplo, 4FF0000). 
e Digite um nome de cor aceita pela Web (por exemplo, vermelho). 
6. Em Texto alternativo (opcional), digite um texto que descreva a imagem para os visualizadores que usam um navegador somente texto. 
Nota: Uma tag de imagem é inserida automaticamente no código HTML que contém um atributo src vazio. 
7. Clique em OK. 


A cor, os atributos de tamanho e o rótulo do alocador de espaço de imagem aparecem da seguinte maneira: 
Quando visualizados em um navegador, o rótulo e o texto de tamanho não aparecem. 


Substituição de um alocador de espaço de imagem PARrSAnHAS 


Um alocador de espaço de imagem não exibe uma imagem em um navegador. Antes de publicar o site, você deve substituir qualquer alocador de 
espaço de imagem adicionado com arquivos de imagem para Web, como GIFs ou JPEGs. 


Se você tiver o Fireworks, poderá criar um novo gráfico no alocador de espaço de imagem do Dreamweaver. A nova imagem é definida para o 
mesmo tamanho da imagem do alocador de espaço. Você pode editar a imagem e substituí-la no Dreamweaver. 


1. Na janela Documento, siga um destes procedimentos: 
e Clique duas vezes no alocador de espaço de imagem. 


e Clique no alocador de espaço de imagem para selecioná-lo. Em seguida, no Inspetor de propriedades (Janela > Propriedades), clique 
no ícone de pasta ao lado da caixa de texto Origem. 
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2. Na caixa de diálogo Origem da imagem, navegue até a imagem que substituirá o alocador de espaço de imagem e clique em OK. 


Es a”, - é Para o início 
Definição das propriedades do alocador de espaço de imagem 
Para definir as propriedades de um alocador de espaço de imagem, selecione o alocador de espaço na janela Documento. Em seguida, selecione 
Janela > Propriedades para exibir o Inspetor de propriedades. Para ver todas as propriedades, clique na seta de expansão no canto inferior 
direito. 


Use o Inspetor de propriedades para definir um nome, uma largura, uma altura, uma origem de imagem, uma descrição de texto alternativo, um 
alinhamento e uma cor para uma imagem de alocador de espaço. 
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No Inspetor de propriedades do alocador de espaço, a caixa de texto cinza e a caixa de texto Alinhar estão desativadas. Você pode definir essas 
propriedades no Inspetor de propriedades de imagem ao substituir o alocador de espaço por uma imagem. 


e Defina uma das seguintes opções: 


Lea Define a largura e a altura do alocador de espaço de imagem, em pixels. 


Origem Especifica o arquivo de origem da imagem. Em uma imagem de alocador de espaço, esta caixa de texto aparece vazia. Clique no 
botão Procurar para selecionar uma imagem substituta para o gráfico de alocador de espaço. 


Link Especifica um hiperlink para o alocador de espaço de imagem. Arraste o ícone Apontar para arquivo para um arquivo do painel 
Arquivos, clique no ícone de pasta para ir até um documento no site ou digite manualmente o URL. 


Alt Especifica um texto alternativo que aparece no lugar da imagem dos navegadores somente texto ou dos navegadores que foram 
definidos para baixar as imagens manualmente. Para os usuários com deficiências visuais que usam sintetizadores de fala com 
navegadores somente texto, o texto é falado em voz alta. Em alguns navegadores, esse texto também aparece quando o ponteiro está 
sobre a imagem. 


Criar Inicia o Fireworks para criar uma imagem substituta. O botão Criar estará desativado, a menos que o Fireworks também esteja 
instalado no seu computador. 


Atualizar do original 77! Quando a imagem da Web (ou seja, a imagem na página do Dreamweaver) está fora de sincronia com o arquivo 
Photoshop original, o Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do ícone do Objeto Inteligente em 
vermelho. Quando você seleciona a imagem da Web na Visualização de design e clica no botão Atualizar do original no Inspetor de 
propriedades, a imagem é atualizada automaticamente, refletindo todas as alterações feitas no arquivo original do Photoshop. 


Cor Especifica uma cor para o alocador de espaço de imagem. 


o SR 
Edição de imagens no Dreamweaver RR 


Você pode fazer uma nova amostra, cortar, otimizar e ajustar a nitidez de imagens no Dreamweaver. Você também pode ajustar o brilho e o 
contraste. 


Recursos de edição de imagens 

O Dreamweaver fornece recursos básicos de edição de imagens que permitem a você modificar imagens sem precisar utilizar um aplicativo 
externo de edição de imagens, como o Fireworks ou o Photoshop. As ferramentas de edição de imagens do Dreamweaver foram projetadas para 
facilitar o trabalho com os designers de conteúdo responsáveis pela criação de arquivos de imagem para uso no site da Web. 


Nota: você não precisa ter o Fireworks ou outros aplicativos de edição de imagens instalados no computador para usar os recursos de edição de 
imagens do Dreamweaver. 
e Selecione Modificar > Imagem. Defina qualquer um destes recursos de edição de imagens do Dreamweaver: 
Nova amostra Adiciona ou remove pixels de arquivos de imagem JPEG e GIF redimensionados para que eles correspondam ao máximo à 
aparência da imagem original. A nova amostra de uma imagem reduz seu tamanho de arquivo e melhora o desempenho do download. 


Ao redimensionar uma imagem no Dreamweaver, você poderá fazer uma nova amostra para acomodar suas novas dimensões. Quando um 
objeto de bitmap é submetido a uma nova amostra, os pixels são adicionados ou removidos da imagem para torná-la maior ou menor. A 
nova amostra de uma imagem para uma resolução mais alta geralmente prejudica um pouco a qualidade. No entanto, a nova amostra para 
uma resolução mais baixa, sempre ocasiona perda de dados e geralmente uma diminuição da qualidade. 
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Cortar Edita imagens reduzindo a área da imagem. Geralmente, você precisará cortar uma imagem para dar mais ênfase ao assunto e 
remover aspectos indesejados referentes ao ponto de interesse da imagem. 


Brilho e contraste Modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma 
imagem. Você geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras. 


Nitidez Ajusta o enfoque de uma imagem aumentando o contraste das bordas localizadas na imagem. Quando você digitaliza uma imagem 
ou tira uma foto digital, a ação padrão da maioria dos softwares de captura de imagem é suavizar as bordas dos objetos na imagem. Isso 
impede que os detalhes extremamente finos se percam nos pixels em que as imagens digitais são compostas. No entanto, para ressaltar os 
detalhes nos arquivos de imagem digital, geralmente é necessário ajustar a nitidez da imagem, aumentando o contraste da borda e tornando 
a imagem mais nítida. 


Nota: os recursos de edição de imagens do Dreamweaver aplicam-se somente a formatos de arquivo de imagem JPEG, GIF e PNG. Os 
outros formatos de arquivo de imagem bitmap não podem ser editados através desses recursos de edição de imagens. 


Corte de uma imagem 
O Dreamweaver permite cortar (ou aparar) imagens de arquivo de bitmap. 


Nota: quando você corta uma imagem, o arquivo de imagem de origem é alterado no disco. Por essa razão, talvez seja necessário guardar uma 
cópia de backup do arquivo de imagem caso você precise reverter a imagem original. 


1. Abra a página que contém a imagem a ser cortada, selecione a imagem e siga um destes procedimentos: 
e Clique no ícone da ferramenta Cortar N no Inspetor de propriedades de imagem. 
e Selecione Modificar > Imagem > Cortar. 
e As alças de corte aparecem ao redor da imagem selecionada. 


2. Ajuste as alças de corte até que a caixa delimitadora envolva a área da imagem que você deseja manter. 
3. Clique duas vezes na caixa delimitadora ou pressione Enter para cortar a seleção. 


4. Uma caixa de diálogo informa que o arquivo de imagem que você está cortando será alterado no disco. Clique em OK. Cada pixel do 
bitmap selecionado fora da caixa delimitadora será removido, mas os outros objetos da imagem permanecerão. 


5. Visualize a imagem e verifique se ela atende às suas expectativas. Se a resposta for negativa, selecione Editar > Desfazer corte para 
reverter a imagem ao estado original. 


Nota: enquanto não fechar o Dreamweaver, você poderá desfazer o efeito do comando Cortar (e reverter o arquivo de imagem para o 
estado original). Também é possível editar o arquivo em um aplicativo externo de edição de imagens. 


Otimização de uma imagem 
Você pode otimizar imagens nas páginas da Web no Dreamweaver. 


1. Abra a página que contém a imagem a ser otimizada, selecione a imagem e siga um destes procedimentos: 


e Clique no botão Editar configurações de imagem? no Inspetor de propriedades de imagem. 


* Selecione Modificar > Imagem > Otimizar. 


2. Faça suas edições na caixa de diálogo Visualização da imagem e clique em OK. 


Ajuste da nitidez de uma imagem 
A nitidez aumenta o contraste dos pixels em torno das bordas dos objetos, a fim de aumentar a definição ou nitidez da imagem. 


1. Abra a página que contém a imagem a ser ajustada, selecione a imagem e siga um destes procedimentos: 
e Clique no botão Nitidez4 no Inspetor de propriedades de imagem. 


e Selecione Modificar > Imagem > Nitidez. 


2. Você pode especificar o grau de nitidez que o Dreamweaver aplicará à imagem arrastando o controle deslizante ou digitando um valor entre 
O e 10 na caixa de texto. Ao ajustar a nitidez da imagem usando a caixa de diálogo Nitidez, você poderá visualizar a alteração efetuada. 


3. Clique em OK quando estiver satisfeito com a imagem. 
4. Salve as alterações selecionando Arquivo > Salvar ou reverta para a imagem original selecionando Editar > Desfazer nitidez. 


Nota: você só pode desfazer o efeito do comando Nitidez (e reverter para o arquivo de imagem original) antes de salvar a página que 
contém a imagem. Depois que a página é salva, as alterações efetuadas na imagem são salvas definitivamente. 


Ajuste do brilho e contraste de uma imagem 
Brilho/contraste modifica o contraste ou brilho dos pixels em uma imagem. Isso afeta os realces, as sombras e os meios-tons de uma imagem. 
Você geralmente usa o brilho/contraste ao corrigir imagens muito escuras ou muito claras. 
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1. Abra a página que contém a imagem a ser ajustada, selecione a imagem e siga um destes procedimentos: 
e Clique no botão Brilho/contraste É no Inspetor de propriedades de imagem. 


e Selecione Modificar > Imagem > Brilho/contraste. 


2. Arraste os controles deslizantes de brilho e contraste para ajustar as configurações. A faixa de valores varia de -100 a 100. 
3. Clique em OK. 


E, E Ea Para o início 
Criação de uma imagem de sobreposição 


Você pode inserir imagens de sobreposição na página. Uma sobreposição é uma imagem que, quando visualizada em um navegador, é alterada 
quando o ponteiro se move sobre ela. 


Você deve ter duas imagens para criar a sobreposição: uma imagem primária (a imagem exibida quando a página é carregada pela primeira vez) 
e uma imagem secundária (a imagem que aparece quando o ponteiro se move sobre a imagem primária). As duas imagens em uma 
sobreposição devem ter o mesmo tamanho. Caso contrário, o Dreamweaver redimensiona a segunda imagem de modo que corresponda às 
propriedades da primeira imagem. 


As imagens de sobreposição são automaticamente definidas para responder ao evento onMouseOver. Você pode definir uma imagem para 
responder a um evento diferente (por exemplo, um clique de mouse) ou alterar uma imagem de sobreposição. 


1. Na janela Documento, coloque o ponto de inserção no local em que a sobreposição deve aparecer. 


2. Insira a sobreposição usando um destes métodos: 
e Na categoria Comum do painel Inserir, clique no botão Imagens e selecione o ícone Imagem de sobreposição. Com o ícone Imagem de 
sobreposição exibido no painel Inserir, você pode arrastar o ícone para a janela Documento. 


* Selecione Inserir > Objetos de imagem > Imagem de sobreposição. 
3. Defina as opções e clique em OK. 
Nome da imagem O nome da imagem de sobreposição. 


Imagem original A imagem a ser exibida quando a página for carregada. Digite o caminho na caixa de texto ou clique em Procurar e 
selecione a imagem. 


Imagem de sobreposição A imagem a ser exibida quando o ponteiro é movido sobre a imagem original. Digite o caminho ou clique em 
Procurar para selecionar a imagem. 


Pré-carregar imagem de sobreposição Pré-carrega as imagens no cache do navegador para que não ocorra nenhum atraso quando o 
usuário mover o ponteiro sobre a imagem. 


Texto alternativo (Opcional) Texto que descreve a imagem dos visualizadores usando um navegador somente texto. 
Ao clicar, Ir para URL O arquivo que você deseja abrir quando um usuário clica na imagem de sobreposição. Digite o caminho ou clique 
em Procurar e selecione o arquivo. 
Nota: se você não definir um link para a imagem, o Dreamweaver inserirá um link nulo (4) no código-fonte HTML ao qual o 
comportamento de sobreposição é anexado. Se você remover o link nulo, a imagem de sobreposição não funcionará mais. 

4. Selecione Arquivo > Visualizar no navegador ou pressione F12. 

5. No navegador, mova o ponteiro sobre a imagem original para ver a imagem de sobreposição. 


Nota: não é possível ver o efeito de uma imagem de sobreposição na Visualização de design. 


S p Para o início 
Uso de um editor de imagens externas E 


Enquanto estiver no Dreamweaver, você poderá abrir uma imagem selecionada em um editor externo de imagens. Ao retornar ao Dreamweaver 
após salvar o arquivo de imagens editado, qualquer alteração feita na imagem estará visível na janela Documento. 


Você pode configurar o Fireworks como seu editor externo principal. Também é possível definir quais tipos de arquivo um editor abrirá e 
selecionar vários editores de imagem. Por exemplo, você pode definir preferências para iniciar o Fireworks quando precisar editar um GIF e iniciar 
outro editor de imagens quando precisar editar um JPG ou JPEG. 


Inicialização do editor externo de imagens 
e Siga um destes procedimentos: 
e Clique duas vezes na imagem que deseja editar. 


e Clique com o botão direito (Windows) ou mantenha a tecla Control pressionada ao clicar (Macintosh) na imagem que será editada, 
selecione Editar com > Procurar e, em seguida, selecione um editor. 
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e Selecione a imagem que deseja editar e clique em Editar no Inspetor de propriedades. 


e Clique duas vezes no arquivo de imagem no painel Arquivos para iniciar o editor de imagens principal. Se você não tiver especificado 
um editor de imagens, o Dreamweaver iniciará o editor padrão do tipo de arquivo. 


Nota: quando você abrir uma imagem no painel Arquivos, os recursos de integração do Fireworks não estarão em vigor. O Fireworks não 


abre o arquivo PNG original. Para usar os recursos de integração do Fireworks, abra as imagens na janela Documento. 


Se você não vir uma imagem atualizada após retornar à janela Dreamweaver, selecione a imagem e clique no botão Atualizar no Inspetor 
de propriedades. 


Definição de um editor externo de imagens para um tipo de arquivo existente 
Você pode selecionar um editor de imagens para abrir e editar arquivos gráficos. 


1. Abra a caixa de diálogo Preferências de tipos/editores de arquivos seguindo um destes procedimentos: 
e Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e selecione Tipos/editores de arquivos na lista 
Categoria à esquerda. 


e Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos/editores de arquivos. 


2. Na lista Extensões, selecione a extensão de arquivo para a qual você deseja definir um editor externo. 


3. Clique no botão Adicionar (+) acima da lista Editores. 


4. Na caixa de diálogo Selecionar editor externo, navegue até o aplicativo que deseja iniciar como editor desse tipo de arquivo. 


5. Na caixa de diálogo Preferências, cligue em Tornar primário caso deseje que esse editor seja o editor principal desse tipo de arquivo. 
6. Para configurar um editor adicional para esse tipo de arquivo, repita as etapas 3 e 4. 


O Dreamweaver usará automaticamente o editor principal quando você editar esse tipo de imagem. É possível selecionar os outros editores 
listados no menu de contexto da imagem na janela Documento. 


Adição de um novo tipo de arquivo à lista Extensões 
1. Abra a caixa de diálogo Preferências de tipos/editores de arquivos seguindo um destes procedimentos: 


* Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e selecione Tipos/editores de arquivos na lista 
Categoria à esquerda. 


e Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos/editores de arquivos. 
2. Na caixa de diálogo Preferências de tipos/editores de arquivos, clique no botão Adicionar (+) acima da lista Extensões. 


Uma caixa de texto aparece na lista Extensões. 


Digite a extensão do tipo de arquivo para o qual um editor será iniciado. 
Para selecionar um editor externo para o tipo de arquivo, clique em Adicionar (+) acima da lista Editores. 
Na caixa de diálogo exibida, selecione o aplicativo que você deseja usar para editar esse tipo de imagem. 


o mo E mw 


Clique em Tornar primário caso deseje que este editor seja o editor principal para o tipo de imagem. 


Alteração de uma preferência de editor existente 
1. Abra a caixa de diálogo Preferências de tipos/editores de arquivos seguindo um destes procedimentos: 


e Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh) e selecione Tipos/editores de arquivos na lista 
Categoria à esquerda. 


e Selecione Editar > Editar com editor externo e, em seguida, selecione Tipos/editores de arquivos. 


2. Na caixa de diálogo Preferências de tipos/editores de arquivos, na lista Extensões, selecione o tipo de arquivo que você está alterando para 
visualizar os editores existentes. 


3. Na lista Editores, selecione o editor que você deseja alterar e siga um destes procedimentos: 
e Clique nos botões Adicionar (+) ou Excluir (—) acima da lista Editores para adicionar ou remover um editor. 


e Clique no botão Tornar primário para alterar qual editor será iniciado por padrão na edição. 


E o nai Para o início 
Aplicação de comportamentos as Imagens 


Você pode aplicar qualquer comportamento disponível a uma imagem ou ponto ativo de imagem. Quando você aplica um comportamento a um 
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ponto ativo, o Dreamweaver insere o código-fonte HTML na tag area. Os três comportamentos se aplicam especificamente a imagens: Pré- 
carregar imagens, Trocar imagens e Restaurar imagem trocada. 


Pré-carregar imagens Carrega imagens que não aparecem na página imediatamente (como aquelas que serão trocadas por comportamentos, 
elementos PA ou JavaScript) no cache de navegador. Isso evita atrasos ocasionados por download quando as imagens devem aparecer. 


Trocar imagem Troca uma imagem por outra alterando o atributo SRC da tag img. Use esta ação para criar sobreposições de botão e outros 
efeitos de imagem (incluindo a troca de mais de uma imagem simultaneamente). 


Restaurar imagem trocada Restaura o último conjunto de imagens trocadas para os arquivos de origem anteriores. Esta ação é adicionada 
automaticamente sempre que você anexa a ação Trocar imagem a um objeto por padrão. Você nunca precisará selecioná-la manualmente. 


Você também pode usar comportamentos para criar sistemas de navegação mais sofisticados, como menus de salto. 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 


Avisos legais | Política de privacidade on-line 


681 


Trabalhando com o Photoshop e o Dreamweaver 


Sobre a integração do Photoshop 

Sobre os fluxos de trabalho dos Objetos inteligentes e do Photoshop-Dreamweaver 
Criação de um Objeto inteligente 

Atualização de um Objeto inteligente 

Atualizar vários Objetos inteligentes 

redimensionamento de um Objeto inteligente 

Edição do arquivo original do Photoshop de um Objeto inteligente 
Estados de Objetos inteligentes 

Cópia e colagem de uma seleção do Photoshop 

Editar imagens coladas 

Configuração das opções da caixa de diálogo Visualização da imagem 


' aá Para o início 
Sobre a integração do Photoshop 

Você pode inserir arquivos de imagem do Photoshop (formato PSD) em páginas da Web no Dreamweaver e permitir que o Dreamweaver otimize- 
as como imagens habilitadas para a Web (formatos GIF, JPEG e PNG). Ao executar essa ação, o Dreamweaver insere a imagem como um 
Objeto inteligente e mantém uma conexão ativa com o arquivo PSD original. 


Também é possível colar toda ou parte de uma imagem do Photoshop de várias camadas ou fatias em uma página da Web no Dreamweaver. 
Entretanto, quando você copia e cola do Photoshop, a conexão ativa com o arquivo original não é mantida. Para atualizar a imagem, faça as 
alterações no Photoshop e copie e cole novamente. 


Nota: se esse recurso de integração for usado com frequência, você poderá armazenar seus arquivos do Photoshop no site do Dreamweaver 
para facilitar o acesso. Nesse caso, certifique-se de que as imagens estejam encobertas para evitar a exposição dos ativos originais, assim como 
as transferências desnecessárias entre o site local e o servidor remoto. 


Para assistir a um tutorial sobre a integração do Photoshop com o Dreamweaver, consulte Integração do Dreamweaver com o Photoshop. 


Para o início 


Sobre os fluxos de trabalho dos Objetos inteligentes e do Photoshop-Dreamweaver 


Há dois principais fluxos de trabalho para trabalhar com os arquivos do Photoshop no Dreamweaver: o fluxo de trabalho copiar/colar e o fluxo de 
trabalho dos Objetos inteligentes. 


Fluxo de trabalho copiaricolar 


O fluxo de trabalho copiar/colar permite que você selecione fatias ou camadas em um arquivo do Photoshop e, em seguida, use o Dreamweaver 
para inseri-las como imagens prontas para a Web. Se quiser atualizar o conteúdo posteriormente, entretanto, você deverá abrir o arquivo 
Photoshop original, executar as alterações, copiar sua fatia ou camada para a área de Transferência novamente e, em seguida, colar a fatia ou a 
camada atualizada no Dreamweaver. Esse fluxo de trabalho só é recomendado quando você deseja inserir parte de um arquivo do Photoshop 
(por exemplo, uma seção de um componente de design) como uma imagem em uma página da Web. 


Fluxo de trabalho dos Objetos inteligentes 


Ao trabalhar com os arquivos do Photoshop completos, a Adobe recomenda o fluxo de trabalho dos Objetos inteligentes. Um Objeto inteligente no 
Dreamweaver é uma imagem colocada em um página da Web que tenha uma conexão instantânea com um arquivo original do Photoshop (PSD). 
Na Visualização de design do Dreamweaver, um Objeto inteligente é indicado por um ícone no canto superior esquerdo da imagem. 
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Objeto inteligente 


Quando a imagem da Web (ou seja, a imagem na página do Dreamweaver) está fora de sincronia com o arquivo Photoshop original, o 
Dreamweaver detecta que o arquivo original foi atualizado e exibe uma das setas do ícone do Objeto inteligente em vermelho. Quando você 
seleciona a imagem da Web na Visualização de design e clica no botão Atualizar do original no Inspetor de propriedades, a imagem é atualizada 
automaticamente, refletindo todas as alterações feitas no arquivo original do Photoshop. 


Ao usar o fluxo de trabalho de Objetos inteligentes, você não precisa abrir o Photoshop para atualizar uma imagem da Web. Além disso, 
quaisquer atualizações feitas em um Objeto inteligente no Dreamweaver são não destrutivas. Ou seja, você pode alterar a versão da Web da 
imagem em sua página enquanto mantém a imagem original do Photoshop intacta. 


Você também pode atualizar um Objeto inteligente sem selecionar a imagem da Web na visualização de Design. O painel Recursos permite que 
você atualize todos os Objetos inteligentes, incluindo as imagens que podem não ser selecionáveis na janela Documento (por exemplo, imagens 
de segundo plano CSS). 


Configurações de otimização de imagens 


Tanto para o fluxo de trabalho de copiar/colar quanto para o fluxo de trabalho de Objetos inteligentes, você pode especificar configurações de 
otimização na caixa de diálogo Otimização da imagem. Esta caixa de diálogo permite especificar o formato de arquivo e a qualidade da imagem. 
Se você estiver copiando uma fatia ou uma camada pela primeira vez ou inserindo uma arquivo do Photoshop como um Objeto inteligente pela 
primeira vez, o Dreamweaver exibirá essa caixa de diálogo de modo que você possa criar facilmente a imagem da Web. 


Se você copiar e colar uma atualização em uma determinada fatia ou camada, o Dreamweaver manterá as configurações originais e recriará a 
imagem da Web com essas configurações. Da mesma maneira, ao atualizar um Objeto inteligente usando o Inspetor de propriedades, o 
Dreamweaver usará as mesmas configurações usadas quando você inseriu a imagem pela primeira vez. Você pode alterar as configurações de 
imagem a qualquer momento selecionando a imagem da Web na Visualização de design e, em seguida, clicar no botão Editar configurações da 
imagem no Inspetor de propriedades. 


Armazenamento de arquivos do Photoshop 


Se você tiver inserido uma imagem da Web e não tiver armazenado o arquivo original do Photoshop em seu site do Dreamweaver, o 
Dreamweaver reconhecerá o caminho para o arquivo original como um caminho de arquivo local absoluto. (Isso é verdadeiro tanto para o fluxo de 
trabalho de copiar/colar quanto para o de Objetos inteligentes.) Por exemplo, se o caminho de seu site do Dreamweaver for C:SiteslmeusSite e 
seu arquivo do Photoshop estiver armazenado em C:/Images/Photoshop, o Dreamweaver não reconhecerá o ativo original como parte do site 
chamado meusite. Isso causará problemas se você quiser compartilhar o arquivo do Photoshop com outros membros da equipe, pois o 
Dreamweaver reconhecerá o arquivo somente como disponível em um determinado disco rígido local. 


Se você armazenar o arquivo do Photoshop em seu site, entretanto, o Dreamweaver definirá um caminho entre o site o arquivo. Qualquer usuário 
com acesso ao site será capaz de definir o caminho correto até o arquivo, desde que você tenha fornecido o arquivo original para download. 


Para assistir a um tutorial em vídeo sobre a edição roundtrip com o Photoshop, consulte Edição roundtrip com o Photoshop. 


Para o início 


Criação de um Objeto inteligente 


Quando você insere uma imagem do Photoshop (arquivo PSD) em uma página, o Dreamweaver cria um Objeto inteligente. Um Objeto inteligente 
é uma imagem habilitada para a Web que mantém uma conexão ativa com a imagem original do Photoshop. Sempre que você atualiza a imagem 
original no Photoshop, o Dreamweaver oferece a opção de atualizar a imagem no Dreamweaver com o clique de um botão. 


1. No Dreamweaver (Visualização de design ou de código), coloque o ponto de inserção na página onde você deseja inserir a imagem. 
2. Selecione Inserir > Imagem. 


Você também pode arrastar o arquivo PSD para a página a partir do painel Arquivos, caso esteja armazenando os arquivos do 
Photoshop em seu site. Se essa for a sua opção, ignore a próxima etapa. 
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3. Localize o arquivo de imagem PSD do Photoshop na caixa de diálogo Selecionar origem da imagem clicando no botão Procurar e 
navegando até o arquivo. 

4. Ajuste as configurações de otimização conforme necessário na caixa de diálogo Otimização da imagem e clique em OK. 

5. Salve o arquivo de imagem ativado para a Web em um local na pasta raiz do seu site. 


O Dreamweaver cria os Objetos inteligentes com base nas configurações de otimização selecionadas e coloca em sua página a versão ativada 
para a Web da imagem. O Objeto inteligente mantém uma conexão ativa com a imagem original e permite que você saiba quando ambas estão 
fora de sincronia. 


Nota: se você decidir alterar posteriormente as configurações de otimização para uma imagem colocada em suas páginas, pode selecionar a 
imagem, clicar no botão Editar Configurações de imagem, no Inspetor de propriedades da imagem, e fazer as alterações na caixa de diálogo 
Otimização de imagem. As alterações feitas na caixa de diálogo Otimização de imagem são aplicadas de forma não destrutiva. O Dreamweaver 
nunca modifica o arquivo original do Photoshop e sempre recria a imagem da Web com base nos dados originais. 


Para assistir a um tutorial em vídeo sobre a edição roundtrip com o Photoshop, consulte Edição roundtrip com o Photoshop. 


Atualização de um Objeto inteligente ici 


Se você alterar o arquivo do Photoshop ao qual seu Objeto inteligente é vinculado, o Dreamweaver notifica que a imagem habilitada para a web 
está fora de sincronia com o original. No Dreamweaver, os Objetos inteligentes são indicados por um ícone no canto superior esquerdo da 
imagem. Quando a imagem habilitada para a Web no Dreamweaver está fora de sincronia com o arquivo original do Photoshop, ambas as setas 
do ícone ficam verdes. Quando a imagem habilitada para a Web está fora de sincroniza com o arquivo original do Photoshop, uma das setas do 
ícone fica vermelha. 


e Para atualizar um Objeto inteligente com o conteúdo atual do arquivo original do Photoshop, selecione Objeto inteligente na janela 
Documento e clique no botão Atualizar do original, no Inspetor de propriedades. 


Nota: você não precisa ter o Photoshop instalado para fazer a atualização no Dreamweaver. 


E ae « = = P iníci 
Atualizar vários Objetos inteligentes iii 


Você pode atualizar vários Objetos inteligentes de uma só vez usando o painel Ativos. O painel Ativos possibilita visualizar os Objetos inteligentes 
que talvez não possam ser selecionados na janela Documento (por exemplo, imagem de plano de fundo CSS). 


1. No painel Arquivos, clique na aba Ativos para visualizar os ativos do site. 


2. Certifique-se de que a visualização Imagens foi selecionada. Caso contrário, clique no botão Imagens. 


3. Selecione cada ativo de imagem no painel Ativos. Quando você seleciona um Objeto inteligente, é possível ver um ícone de Objeto 
inteligente no canto superior esquerdo da imagem. Imagens normais não possuem esse ícone. 


4. Em cada Objeto inteligente que você quiser atualizar, clique com o botão direito do mouse sobre o nome do arquivo e selecione Atualizar 
do original. Você também pode clicar mantendo a tecla Control pressionada para selecionar vários nomes de arquivos e atualizar todos de 
uma vez. 


Nota: você não precisa ter o Photoshop instalado para fazer a atualização no Dreamweaver. 


E « E = . P, iníci 
redimensionamento de um Objeto inteligente da 


Você pode redimensionar um Objeto inteligente na janela Documento como faria com qualquer outra imagem. 


1. Selecione o Objeto inteligente na janela Documento e arraste as alças de redimensionamento para redimensionar a imagem. Você pode 
manter a largura e a altura proporcionais mantendo a tecla Shift pressionada conforme arrasta. 


2. Clique no botão Atualizar do original no Inspetor de propriedades. 


Quando você atualiza o Objeto inteligente, a imagem da web reprocessa o novo tamanho de forma não destrutiva com base no conteúdo 
atual do arquivo original e das configurações originais de otimização. 


Edição do arquivo original do Photoshop de um Objeto inteligente is 


Após criar o Objeto inteligente na sua página do Dreamweaver, você pode editar o arquivo PSD original no Photoshop. Após fazer as alterações 
no Photoshop, você pode atualizar facilmente a imagem da Web no Dreamweaver. 


Nota: configure o Photoshop como editor principal de imagens externas. 


1. Selecione o Objeto inteligente na janela Documento. 
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2. Clique no botão Editar no Inspetor de propriedades. 


3. Faça as alterações no Photoshop e salve o novo arquivo PSD. 


4. No Dreamweaver, selecione novamente o Objeto inteligente e clique no botão Atualizar do original. 


Nota: se você tiver alterado o tamanho da imagem no Photoshop, precisará redimensionar o tamanho da imagem da Web no Dreamweaver. O 
Dreamweaver atualiza um Objeto inteligente somente com base no conteúdo do arquivo original do Photoshop e não em seu tamanho. Para 
sincronizar o tamanho de uma imagem da Web com o tamanho do arquivo original do Photoshop, clique com o botão direito do mouse na 
imagem e selecione Redefinir tamanho para original. 


Para o início 


Estados de Objetos inteligentes 


A tabela a seguir lista os vários estados de Objetos inteligentes. 


Estado de Objeto inteligente 


Imagens sincronizadas 


Ativo original modificado 


As dimensões da imagem da Web são 
diferentes da largura e altura do HTML 
selecionado. 


As dimensões do ativo original são muito 
pequenas para a largura e a altura do 
HTML selecionado. 


Ativo original não encontrado 


Descrição 


A imagem da Web está em sincronia com 
o conteúdo atual do arquivo original do 
Photoshop. Os atributos de largura e 
altura do código HTML combinam com as 
dimensões da imagem da Web. 


O arquivo original do Photoshop foi 
modificado após a criação da imagem da 
Web no Dreamweaver. 


Os atributos de largura e altura do código 
HTML são diferentes das dimensões de 
largura e altura da imagem da Web que o 
Dreamweaver criou na inserção. Se as 
dimensões da imagem da Web forem 
menores que os valores selecionados de 
largura e altura no HTML, a imagem da 
Web pode aparecer como pixels. 


Os atributos de largura e altura do código 
HTML são diferentes das dimensões de 
largura e altura do arquivo original do 
Photoshop. A imagem da Web pode 
aparecer como pixels. 


O Dreamweaver não pôde localizar o 
arquivo original do Photoshop 
especificado na caixa de texto Original do 
Inspetor de propriedades. 


Ação recomendada 


Nenhuma 


Use o botão Atualizar do original no 
Inspetor de propriedades para sincronizar 
as duas imagens. 


Use o botão Atualizar do original no 
Inspetor de propriedades para recriar a 
imagem da Web a partir do arquivo 
original do Photoshop. O Dreamweaver 
usa dimensões de altura e largura de 
HTML atualmente especificadas ao recriar 
a imagem. 


Não crie imagens da Web com dimensões 
maiores que as dimensões do arquivo 
original do Photoshop. 


Corrija o caminho do arquivo na caixa de 
texto Original do Inspetor de propriedades 
ou mova o arquivo do Photoshop para o 
local atualmente especificado. 


Zoo m Para o início 
Cópia e colagem de uma seleção do Photoshop 
Você pode copiar todas ou algumas imagens do Photoshop e colar a seleção na página do Dreamweaver como uma imagem habilitada para a 
Web. É possível copiar uma única camada ou um conjunto de camadas de uma área selecionada da imagem ou copiar uma fatia da imagem. 
Entretanto, quando se faz isso, o Dreamweaver não cria um Objeto inteligente. 


Nota: embora a função Atualizar do original não esteja disponível para imagens coladas, você ainda pode abrir e editar o arquivo original do 
Photoshop selecionando a imagem colada e clicando no botão Editar do Inspetor de propriedades. 


1. No Photoshop, execute um dos procedimentos a seguir: 
e Copie toda ou parte de uma única camada usando a ferramenta Moldura para selecionar a parte que deseja copiar e escolha Editar > 
Copiar. Somente a camada ativa da área selecionada é copiada na área de transferência. Se houver efeitos baseados em camadas, 
eles não serão copiados. 


e Copie e mescle várias camadas usando a ferramenta Letreiro para selecionar a parte que deseja copiar e escolha Editar > Copiar parte 
mesclada. Isso nivela e copia todas as camadas ativas e inferiores da área selecionada na área de transferência. Se houver efeitos 
baseados em camadas associados, eles não serão copiados. 


e Copie uma fatia usando a ferramenta Selecionar fatia para selecionar a fatia e, em seguida, escolha Editar > Copiar. Isso nivela e copia 
todas as camadas ativas e inferiores da fatia na área de transferência. 


Escolha Selecionar > Tudo para selecionar rapidamente toda a imagem para ser copiada. 
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2. No Dreamweaver (Visualização de design ou de código), coloque o ponto de inserção na página onde você deseja inserir a imagem. 


3. Selecione Editar > Colar. 


4. Na caixa de diálogo Visualização da imagem, ajuste as configurações de otimização como necessário e clique em OK. 
5. Salve o arquivo de imagem habilitado para a Web em um local na pasta raiz do seu site. 


O Dreamweaver define a imagem de acordo com as configurações de otimização e coloca uma versão habilitada para a Web da imagem na sua 
página. As informações sobre a imagem, como o local do arquivo PSD original, são salvas em uma Design Note, independentemente de as 
Design Notes estarem ativadas para seu site. A Design Note permite que você volte para editar o arquivo de origem do Photoshop diretamente do 
Dreamweaver. 


E Reage 
Editar imagens coladas ara o início 


Após colar as imagens do Photoshop nas suas páginas do Dreamweaver, você pode editar o arquivo PSD original no Photoshop. Ao utilizar o 
fluxo de trabalho copiar/colar, a Adobe recomenda sempre manter suas edições no arquivo original PSD, e não na imagem habilitada para a Web, 
e a colar novamente para manter uma única origem. 


Nota: verifique se o Photoshop está definido como o principal editor de imagens externas para o tipo de arquivo que deseja editar. 


1. No Dreamweaver, selecione uma imagem habilitada para a Web que foi criada originalmente no Photoshop e execute um dos 
procedimentos a seguir: 
e Clique no botão Editar no Inspetor de propriedades da imagem. 


e Pressione a tecla Control (Windows) ou Command (Macintosh) e clique duas vezes no arquivo ao mesmo tempo. 


* Clique com o botão direito do mouse (Windows) ou com a tecla Control pressionada (Macintosh) em uma imagem, escolha Editar 
original com no menu de contexto e, em seguida, escolha Photoshop. 


Nota: esse processo presume que o Photoshop tenha sido definido como o principal editor de imagens externas para arquivos de imagem 
PSD. Você também pode definir o Photoshop como o editor padrão para os tipos de arquivo JPEG, GIF e PNG. 

2. Edite o arquivo no Photoshop. 

3. Retorne ao Dreamweaver e cole a imagem ou seleção atualizada em sua página. 


Para reotimizar a imagem a qualquer momento, selecione-a e clique no botão Editar configurações de imagem no Inspetor de propriedades. 


E dá a E ER E E ã E P, iníci 
Configuração das opções da caixa de diálogo Visualização da imagem PRE 


Ao criar um Objeto inteligente ou colar uma seleção do Photoshop, o Dreamweaver exibe a caixa de diálogo Visualização da imagem . (O 
Dreamweaver também exibe esta caixa de diálogo para qualquer outro tipo de imagem, se você selecionar a imagem e clicar no botão Editar 
configurações de imagem no Inspetor de propriedades.) Esta caixa de diálogo possibilita definir e visualizar as configurações para imagens 
habilitadas para a Web usando a combinação correta de cor, compactação e qualidade. 


Uma imagem habilitada para a Web pode ser exibida por todos os navegadores modernos e sempre tem a mesma aparência, independentemente 
do sistema ou do navegador usado pelo visualizador. Em geral, as configurações afetam a qualidade e o tamanho do arquivo. 


Nota: apenas a versão importada do arquivo de imagem é afetada, independentemente das configurações selecionadas. Os arquivos originais 
PSD do Photoshop ou PNG do Fireworks sempre permanecem inalterados. 


Predefinição Escolha a Predefinição mais adequada aos seus requisitos. O tamanho do arquivo da imagem muda de acordo com a predefinição 
escolhida. Uma visualização instantânea da imagem com a configuração aplicada é exibida em segundo plano. 


Por exemplo, para as imagens que devem ser exibidas com um alto grau da claridade, escolha PNG24 para fotos (detalhes nítidos). Selecione 
GIF para imagens de fundo (padrões) se você estiver inserindo o padrão que será a imagem do fundo da página. 


Quando uma predefinição é selecionada, suas opções configuráveis são exibidas. Para personalizar ainda mais suas configurações de 
otimização, modifique os valores dessas opções. 


(ec As publicações do Twitter!M e do Facebook não são cobertas pelos termos do Creative Commons. 
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Integração do Business Catalyst ao Dreamweaver 


Instalação do complemento do Business Catalyst 
Criação de um site temporário do Business Catalyst 
Importação de um site do Business Catalyst 
Gerenciamento de arquivos 

Inserção de módulos, dados ou snippets 

Edição de propriedades de objetos do Business Catalyst 


O Business Catalyst é um aplicativo hospedado para construir e gerenciar negócios online. Usando esta plataforma unificada e sem codificação 
back-end, você poderá construir tudo desde sites até lojas avançadas online. 


A integração do Dreamweaver com o Business Catalyst permite para criar e atualizar um site do Business Catalyst no Dreamweaver. Depois de 
ter criado um site do Business Catalyst, você poderá se conectar ao servidor do Business Catalyst. O servidor fornece arquivos e modelos que 
você pode usar para construir o seu site. 


Para o início 


Instalação do complemento do Business Catalyst 
Antes de começar a criar ou editar um site do Business Catalyst no Dreamweaver, instale o complemento do Business Catalyst. 


Para instalar o complemento, vá para Janela > Buscar complementos. A página Complementos da Adobe Creative Cloud é exibida. Procure o 
complemento do Business Catalyst e siga as instruções na tela para instalá-lo. 


Importante: antes de instalar os complementos, certifique-se de que você tenha ativado a sincronização de arquivos para sua conta da Adobe 
Creative Cloud. Consulte Ativar a sincronização de arquivos na Adobe Creative Cloud para obter mais detalhes. 


Para o início 


Criação de um site temporário do Business Catalyst 
1. Selecione Site > Gerenciar sites. 
2. Clique em Novo site do Business Catalyst. 
3. Entre usando suas credenciais da ID da Adobe. 
4. Insira a sua data de nascimento e clique em Atualizar. 


5. Na caixa de diálogo Criar site temporário, insira os detalhes do seu site e clique em Criar site temporário livre. 


Nota: os emails relacionados aos seus detalhes de conta do Business Catalyst serão enviados a você depois de ter criado o seu site. 
Esses emails contêm informações do seu site como informações de introdução, o URL do site que você criou e aquele do site de 
administração. 


6. Escolha uma pasta no seu computador para o site local. 


Nota: se clicar em Cancelar, o site será criado no Business Catalyst mas não será exibido no Dreamweaver. O mesmo cenário ocorre se 
houver um problema de rede quando estiver criando um site do Business Catalyst. 


7. Insira a senha associada à sua ID da Adobe. 

8. Quando a atividade do arquivo estiver concluída, clique em Concluído. 

9. Selecione Janela > Arquivo. A visualização local do site que você criou será exibida. 
10. Selecione Servidor remoto do menu. 


11. Insira a ID da Adobe associada à sua senha. 


A estrutura de arquivo no servidor remoto será exibida. 


Para o início 


Importação de um site do Business Catalyst 
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Para obter informações sobre migração de sites criados anteriormente usando a extensão do Business Catalyst, consulte Migração de sites do 
Business Catalyst para a Dreamweaver CS6. 


1. Selecione Site > Gerenciar sites. 

2. Clique em Importar site do Business Catalyst. A lista de sites do Business Catalyst criada com a ID da Adobe será exibida. 
3. Selecione o site e clique em Importar site. 

4. Especifique um local no seu computador para o site que está tentando importar. 

5. Insira a senha relacionada à sua ID da Adobe. 


6. Quando a atividade do arquivo estiver concluída, clique em Concluído. 
E E Para o início 
Gerenciamento de arquivos 


Como o Business Catalyst também é um serviço de hospedagem de sites, é possível usar o Dreamweaver para gerenciar arquivos de sites locais 
e remotos. Para obter mais informações, consulte os seguintes tópicos: 


e Gerenciamento de arquivos e pastas 
e Obtenção e colocação de arquivos para e do servidor 
e Devolução e retirada dos arquivos 


5 j ERR 
Inserção de módulos, dados ou snippets PPRSREaE 


1. Selecione Janela > Business Catalyst para abrir o painel do Business Catalyst. 


2. Siga um destes procedimentos: 


e Para inserir um módulo do Business Catalyst, selecione a guia Módulos. 


e Para inserir tags, selecione a guia Dados. As tags serão exibidas se você estiver editando arquivos que oferecem suporte às tags como 
a página affiliate.html na pasta Layouts/Affiliate/. 


3. Expanda o módulo e clique no módulo que deseja adicionar ao arquivo. 

4. Forneça as informações obrigatórias e clique em Inserir. 

5. Se o seu site atual usar o novo mecanismo de renderização, a guia Snippets será exibida. Usando as opções na guia Snippet, você poderá 
adicionar snippets de código, como repetição e regiões condicionais, seções de comentário e Include (funciona de modo semelhante ao 


Server-Side Include). 


6. Clique em Dinâmico para visualizar a página como apareceria em um navegador da Web. 


Edição de propriedades de objetos do Business Catalyst PR a 


De modo semelhante à edição de outros objetos em uma página da Web, você pode usar o Inspetor de propriedades para editar propriedades de 
objetos em módulos do Business Catalyst. 


Se não visualizar as opções para editar propriedades, verifique se você tem permissões para editar o arquivo. É possível também, para alguns 
módulos, editar a página somente no site de Administração online. 


As publicações do Twitter!” e do Facebook não são cobertas pelos termos do Creative Commons. 
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JavaScript 
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Utilizando comportamentos de JavaScript (instruções gerais) 


Sobre os comportamentos JavaScript 

Visão geral do painel Comportamentos 

Sobre eventos 

Aplicar um comportamento 

Alterar ou excluir comportamentos 

Atualizar um comportamento 

Baixar e instalar comportamentos de terceiros 


g Para o início 
Sobre os comportamentos JavaScript 
Os comportamentos do AdobeQ Dreamweaverê colocam o código JavaScript nos documentos de modo que os visitantes podem alterar uma 
página da Web de várias maneiras ou iniciar algumas tarefas. Um comportamento é uma combinação de um evento e uma ação acionada por 
esse evento. No painel Comportamentos, adicione um comportamento a uma página especificando uma ação e, em seguida, especificando o 
evento que aciona essa ação. 


Nota: O código Comportamento é um código JavaScript do cliente, isto é, um código executado nos navegadores, não nos servidores. 

Eventos são mensagens geradas com eficiência pelos navegadores que indicam que um visitante da página realizou alguma ação. Por exemplo, 
quando um visitante move o ponteiro sobre um link, o navegador gera um evento onMouseOver para esse link; em seguida, o navegador verifica 
se é necessário chamar algum código JavaScript (especificado na página que está sendo visualizada) em resposta. Eventos diferentes são 
definidos para diferentes elementos de página; por exemplo, na maioria dos navegadores, os eventos onMouseOver e onClick são associados a 
links, enquanto onLoad é um evento associado a imagens e à seção body do documento. 


Uma ação é um código JavaScript gravado anteriormente para executar uma tarefa, como abrir a janela de um navegador, mostrar ou ocultar um 
elemento da API, reproduzir um som ou parar um filme do Adobe Shockwave. As ações fornecidas com o Dreamweaver são compatíveis com 
vários navegadores. 


Depois de ser anexado a um elemento da página, o comportamento chama a ação (código JavaScript) associada a um evento sempre que esse 
evento ocorre para o elemento em questão. (Os eventos que podem ser usados para acionar uma determinada ação variam de acordo com o 
navegador.) Por exemplo, se você anexar a ação Mensagem pop-up a um link e especificar que essa ação será acionada pelo evento 
onMouseOver, sua mensagem aparecerá sempre que algum usuário colocar um ponteiro nesse link. 


Um único evento pode acionar diversas ações diferentes e você pode especificar a ordem de ocorrência dessas ações. 


O Dreamweaver fornece aproximadamente 24 ações; ações adicionais podem ser encontradas no site do Exchange em 
www.adobe.com/go/dreamweaver exchange br, bem como em sites de desenvolvedores de terceiros. Você pode gravar suas próprias ações se 
tiver experiência em JavaScript. 


Nota: Os termos comportamento e ação são termos do Dreamweaver, não termos HTML. Do ponto de vista do navegador, uma ação é como 
qualquer outra parte do código JavaScript. 


dido E Para o início 
Visão geral do painel Comportamentos ii 


Você pode usar o painel Comportamentos (Janela > Comportamentos) para anexar comportamentos aos elementos da página (mais 
especificamente às tags) e para modificar parâmetros de comportamentos anexados anteriormente. 


Os comportamentos que já foram anexados ao elemento da página selecionado atualmente aparecem na lista de comportamentos (área principal 
do painel), relacionados em ordem alfabética por evento. Se diversas ações estiverem listadas para o mesmo evento, elas serão executadas na 
ordem em que aparecem na lista. Se nenhum comportamento aparecer na lista, isso indica que nenhum comportamento foi anexado ao elemento 
selecionado atualmente. 


O painel Comportamentos tem as seguintes opções: 


Mostrar eventos definidos Exibe somente os eventos que foram anexados ao documento atual. Os eventos são organizados em categorias do 
cliente e do servidor. Os eventos de cada categoria estão em uma lista que pode ser expandida. Mostrar eventos definidos é a visualização 
padrão. 


Mostrar todos os eventos Exibe uma lista em ordem alfabética de todos os eventos de uma determinada categoria. 


Adicionar comportamento (+) Exibe um menu de ações que podem ser anexadas ao elemento selecionado atualmente. Quando uma ação é 
selecionada nessa lista, uma caixa de diálogo aparece na qual é possível especificar parâmetros para a ação. Se todas as ações estiverem 
esmaecidas, nenhum evento poderá ser gerado pelo elemento selecionado. 


Remover evento (-) Remove o evento e a ação selecionados da lista de comportamentos. 
Botões de seta para cima e para baixo Mova a ação selecionada para cima ou para baixo na lista de comportamentos para um evento 
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específico. Você pode alterar a ordem das ações somente para um evento específico; por exemplo, é possível alterar a ordem em que várias 
ações ocorrem para o evento onLoad, mas todas as ações de onLoad permanecem juntas na lista de comportamentos. Os botões de seta estão 
desativados para ações que não podem ser movidas para cima ou para baixo na lista. 

Eventos Exibe um menu pop-up, exibido somente quando um evento é selecionado, de todos os eventos que podem acionar a ação (esse menu 
aparece quando você clica no botão de seta ao lado do nome do evento selecionado). Eventos diferentes podem aparecer dependendo do objeto 
selecionado. Se os eventos esperados não aparecerem, verifique se o elemento de página ou tag correto está selecionado. (Para selecionar uma 
tag específica, use o seletor de tags no canto inferior esquerdo da janela Documento.) 

Nota: Os nomes de evento entre parênteses estão disponíveis somente para links; a seleção de um desses nomes de evento adiciona 
automaticamente um link nulo ao elemento de página selecionado e anexa o comportamento a esse link e não ao elemento propriamente dito. O 
link nulo é especificado como href="javascript:;" no código HTML. 


Para o início 
Sobre eventos 
Cada navegador fornece um conjunto de eventos que podem ser associados às ações listadas no menu Ações (+) do painel Comportamento. 
Quando um visitante de sua página da Web interage com a página (por exemplo, clicando em uma imagem), o navegador gera eventos; esses 
eventos podem ser usados para chamar funções JavaScript que executam uma ação. O Dreamweaver fornece muitas ações comuns que podem 
ser acionadas por esses eventos. 


Para obter os nomes e as descrições dos eventos fornecidos por cada navegador, acesse o Centro de suporte do Dreamweaver em 
www.adobe.com/go/dreamweaver support br. 


Eventos diferentes podem aparecer no menu Eventos dependendo do objeto selecionado. Para saber quais eventos são suportados por um 
determinado navegador para um determinado elemento de página, insira o elemento de página no seu documento e anexe um comportamento a 
ele; em seguida, observe o menu Eventos no painel Comportamentos. (Por padrão, os eventos são da lista de eventos do HTML 4.01 e são 
suportados pela maioria dos navegadores modernos.) Os eventos podem ser desativados se os objetos relevantes ainda não existirem na página 
ou se o objeto selecionado não puder receber eventos. Se os eventos esperados não aparecerem, você deverá verificar se o objeto correto está 
selecionado. 


Se você estiver anexando um comportamento a uma imagem, alguns eventos (como onMouseOver) aparecerão entre parênteses. Esses eventos 
estão disponíveis somente para links. Quando um deles é selecionado, o Dreamweaver coloca uma tag <a> antes e depois da imagem para 
definir um link nulo. O link nulo é representado por javascript:; na caixa Link do Inspetor de propriedades. Você pode alterar o valor do link se 
desejar transformá-lo em um link real para outra página, mas se o link do JavaScript for excluído sem ser substituído por outro link, o 
comportamento será removido. 


Para ver quais tags podem ser usadas com um determinado evento em um determinado navegador, procure o evento em um dos arquivos da 
pasta Dreamweaver/Configuração/Comportamentos/Eventos. 


E Para o início 
Aplicar um comportamento 


Você pode anexar comportamentos ao documento inteiro (isto é, à tag <body>) ou a links, imagens, elementos de formulário e diversos outros 
elementos HTML. 


O navegador de destino selecionado determina quais eventos são suportados para um determinado elemento. 


É possível especificar mais de uma ação para cada evento. As ações ocorrem na ordem em que estão listadas na coluna Ações do painel 
Comportamentos, mas essa ordem pode ser alterada. 


1. Selecione um elemento na página, como uma imagem ou um link. 
Para anexar um comportamento à página inteira, clique na tag <body> no seletor de tags, no canto inferior esquerdo da janela Documento. 


Escolha Janela > Comportamentos. 
Clique no botão de adição (+) e selecione uma ação no menu Adicionar comportamento. 


As ações que estão desativadas no menu não podem ser escolhidas. Elas podem estar desativadas porque um objeto necessário não 
existe no documento atual. Por exemplo, a ação Controlar Shockwave ou SWF estará desativada se o documento não contiver nenhum 
arquivo SWF ou Shockwave. 


Quando uma ação é selecionada, uma caixa de diálogo aparece exibindo parâmetros e instruções para a ação. 


4. Insira os parâmetros da ação e clique em OK. 
Todas as ações fornecidas no Dreamweaver funcionam em navegadores modernos. Algumas ações não funcionam em navegadores mais 
antigos, mas não provocarão erros. 
Nota: Os elementos de destino requerem uma ID exclusiva. Por exemplo, se desejar aplicar o comportamento Trocar imagem em uma 
imagem, será necessário fornecer uma ID. Se você não especificar uma ID para o elemento, o Dreamweaver especificará uma 
automaticamente. 


5. O evento padrão que acionará a ação aparece na coluna Eventos. Se não for o evento desejado, selecione outro no menu pop-up Eventos. 
(Para abrir o menu Eventos, selecione um evento ou uma ação no painel Comportamentos e clique na seta para baixo preta que aparece 
entre o nome do evento e o nome da ação.) 
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ã Para o início 
Alterar ou excluir comportamentos 


Depois de anexar um comportamento, você pode alterar o evento que aciona a ação, adicionar ou remover ações e alterar parâmetros de ações. 


1. Selecione um objeto com um comportamento anexado. 
2. Escolha Janela > Comportamentos. 
3. Faça as alterações: 


e Para editar os parâmetros de uma ação, clique duas vezes no nome da ação ou selecione-a e pressione Enter (Windows) ou Return 
(Macintosh); em seguida, altere os parâmetros na caixa de diálogo e clique em OK. 


e Para alterar a ordem das ações de um determinado evento, selecione uma ação e clique na seta para cima ou para baixo. Se preferir, 
selecione a ação e corte e cole-a no local desejado entre as outras ações. 


e Para excluir um comportamento, selecione-o e clique no botão de subtração (—) ou pressione Excluir. 


E Para o início 
Atualizar um comportamento 


1. Selecione um elemento que apresenta o comportamento anexado a ele. 
2. Escolha Janela > Comportamentos e clique duas vezes no comportamento. 
3. Faça as alterações e clique em OK na caixa de diálogo do comportamento. 


Todas as ocorrências desse comportamento na página serão atualizadas. Se outras páginas do site tiverem esse comportamento, atualize- 
as uma por uma. 


E . a Para o início 
Baixar e instalar comportamentos de terceiros 


Muitas extensões estão disponíveis no Exchange para o site do Dreamweaver (www.adobe.com/go/dreamweaver exchange br). 
1. Escolha Janela > Comportamentos e selecione Obter mais comportamentos no menu Adicionar comportamento. 
O navegador primário se abre e o site do Exchange é exibido. 


2. Procure os pacotes. 
3. Baixe e instale o pacote de extensão desejado. 


Para obter mais informações, consulte Uso de extensões no Dreamweaver CS6, 12.1 e 12.2. 


(65) ev-nc-sa ] 
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Aplicação de comportamentos internos do JavaScript 


Uso de comportamentos internos 

Aplicar o comportamento Chamar JavaScript 

Aplicar o comportamento Alterar propriedade 

Aplicar o comportamento Verificar navegador 

Aplicar o comportamento Verificar plug-in 

Aplicar o comportamento Controlar Shockwave ou SWF 
Aplicar o comportamento Arrastar elemento AP 

Coleta de informações sobre o elemento AP arrastável 
Aplicar o comportamento Ir para URL 

Aplicar o comportamento Menu de salto 

Aplicar o comportamento Menu de salto Ir 

Aplicar o comportamento Abrir janela do navegador 
Aplicar o comportamento Tocar som 

Aplicar o comportamento Mensagem pop-up 

Aplicar o comportamento Pré-carregar imagens 

Aplicar o comportamento Definir imagem da barra de navegação 
Aplicar o comportamento Definir texto do quadro 

Aplicar o comportamento Definir texto do recipiente 
Aplicar o comportamento Definir texto da barra de status 
Aplicar o comportamento Definir texto do campo de texto 
Aplicar o comportamento Mostrarlocultar elementos 
Aplicar o comportamento Mostrar menu pop-up 
Adicionar, remover e reorganizar itens de menu pop-up 
Formatar um menu pop-up 

Posicionar um menu pop-up em um documento 
Modificar um menu pop-up 

Aplicar o comportamento Trocar imagem 

Aplicar o comportamento Validar formulário 


Para o início 


Uso de comportamentos internos 


Os comportamentos incluídos no Dreamweaver foram gravados para funcionar nos navegadores modernos. Os comportamentos não funcionam 
em navegadores mais antigos. 


Nota: As ações do Dreamweaver foram gravadas com cuidado para funcionar no máximo de navegadores possível. Se você remover o código 
de uma ação do Dreamweaver manualmente ou substituí-lo por seu próprio código, a compatibilidade com vários navegadores pode ser afetada. 
Embora as ações do Dreamweaver tenham sido gravadas para maximizar a compatibilidade com vários navegadores, alguns navegadores não 
suportam JavaScript e muitas pessoas que navegam na Internet mantêm o JavaScript desativado em seus navegadores. Para obter os melhores 
resultados em várias plataformas, forneça interfaces alternativas com a tag <noscript> no início e no final para que os usuários sem JavaScript 
possam usar seu site. 


Para o início 


Aplicar o comportamento Chamar JavaScript 


O comportamento Chamar JavaScript executa uma função ou linha personalizada do código JavaScript quando ocorre um evento. (Você pode 
gravar seu próprio script ou usar o código fornecido livremente pelas diversas bibliotecas JavaScript disponíveis na Web.) 


1. Selecione um objeto e escolha Chamar JavaScript no menu Adicionar comportamento do painel Comportamentos. 
2. Digite o JavaScript exato a ser executado ou digite o nome de uma função. 


Por exemplo, para criar um botão Voltar, você pode digitar if (history.length > 0)(history.back()!. Se você tiver incluído o código em uma 
função, digite somente o nome da função (por exemplo, hGoBack()). 


3. Clique em OK e verifique se o evento padrão está correto. 


Para o início 


Aplicar o comportamento Alterar propriedade 


Use o comportamento Alterar propriedade para alterar o valor de uma propriedade de um objeto (por exemplo, a cor de fundo de um div ou a 


693 


ação de um formulário). 
Nota: Use esse comportamento somente se você estiver familiarizado com HTML e JavaScript. 
1. Selecione um objeto e escolha Alterar propriedade no menu Adicionar comportamento do painel Comportamentos. 
No menu Tipo de elemento, selecione um tipo de elemento para exibir todos os elementos identificados do tipo em questão. 
Selecione um elemento no menu ID do elemento. 
Selecione uma propriedade no menu Propriedade ou insira o nome da propriedade na caixa. 
Insira o novo valor da nova propriedade no campo Novo valor. 


Sa Bon 


Clique em OK e verifique se o evento padrão está correto. 


E E] P iníci 
Aplicar o comportamento Verificar navegador RR 


Esse comportamento está obsoleto a partir do Dreamweaver CS5. 


E Kiss E P, iníci 
Aplicar o comportamento Verificar plug-in RA 


Use o comportamento Verificar plug-in para enviar os visitantes para páginas diferentes, dependendo da instalação do plug-in especificado. Por 
exemplo, você pode direcionar os visitantes para uma página caso eles tenham o Shockwave e para outra página caso não tenham. 


Nota: Você não pode detectar plug-ins específicos no Internet Explorer usando o JavaScript. No entanto, selecione Flash ou Director para 
adicionar o código VBScript adequado à sua página a fim de detectar esses plug-ins no Internet Explorer no Windows. A detecção de plug-ins 
não pode ser feita no Internet Explorer no Mac OS. 

1. Selecione um objeto e escolha Verificar plug-in no menu Adicionar comportamento do painel Comportamentos. 

2. Selecione um plug-in no menu Plug-in ou clique em Inserir e digite o nome exato do plug-in na caixa adjacente. 


Você deve usar o nome exato do plug-in conforme especificado em negrito na página Sobre plug-ins no Netscape Navigator. (No Windows, 
selecione o comando Ajuda > Sobre plug-ins do Navigator; no Mac OS, selecione Sobre plug-ins no menu Apple.) 


3. Na caixa Se localizado, vá para URL, especifique uma URL para os visitantes que têm o plug-in. 
Se for um URL remoto, inclua o prefixo http:// no endereço. Se o campo ficar em branco, os visitantes permanecerão na mesma página. 
4. Na caixa Do contrário, vá para URL, especifique um URL alternativo para os visitantes que não têm o plug-in. Se o campo ficar em branco, 


os visitantes permanecerão na mesma página. 


5. Especifique o que deve ser feito caso não seja possível fazer a detecção de plug-ins. Por padrão, quando a detecção não é permitida, o 
visitante é enviado para o URL listado na caixa Do contrário. Para enviar o visitante para o primeiro URL (Se localizado), selecione a opção 
Sempre ir para o primeiro URL se a detecção não for possível. Quando selecionada, essa opção “supõe que o visitante tem o plug-in, a não 
ser que o navegador indique explicitamente que o plug-in não está presente”. Em geral, selecione essa opção se o conteúdo do plug-in 
fizer parte de sua página; caso contrário, deixe-a desmarcada. 

Nota: Essa opção aplica-se somente ao Internet Explorer; o Netscape Navigator sempre pode detectar plug-ins. 


6. Clique em OK e verifique se o evento padrão está correto. 


Aplicar o comportamento Controlar Shockwave ou SWF dido 


Esse comportamento está obsoleto a partir do Dreamweaver CS5. 


PERA 
Aplicar o comportamento Arrastar elemento AP is 


O comportamento Arrastar elemento AP permite que o visitante arraste um elemento absolutamente posicionado (AP). Use esse comportamento 
para criar quebra-cabeças, controles deslizantes e outros elementos de interface móveis. 


Você pode especificar a direção em que o visitante pode arrastar o elemento AP (na horizontal, na vertical ou em qualquer direção), um destino 
para onde o visitante deve arrastar o elemento AP, se é necessário encaixar o elemento AP no destino caso esteja a um determinado número de 
pixels do destino, o que deve ser feito quando o elemento AP toca no destino e muito mais. 


Como o comportamento Arrastar elemento AP deve ser chamado antes de o visitante poder arrastar o elemento AP, anexe esse comportamento 
ao objeto body (com o evento onLoad). 


1. Selecione Inserir > Objetos de layout > PA Div ou clique no botão Desenhar PA Div no painel Inserir e desenhe um PA Div na Visualização 
de design da janela Documento. 


2. Clique em <body> no seletor de tags no canto inferior esquerdo da janela Documento. 
3. Selecione Arrastar elemento PA no menu Adicionar comportamento do painel Comportamentos. 


Se a opção Arrastar elemento AP não estiver disponível, você provavelmente tem um elemento AP selecionado. 


4. No menu pop-up Elemento AP, selecione o elemento AP. 


5. Selecione Restrito ou Irrestrito no menu pop-up Movimento. 


O movimento irrestrito é apropriado para quebra-cabeças e outros jogos de arrastar e soltar. Para controles deslizantes e cenários móveis, 
como gavetas de arquivo, cortinas e minivenezianas, selecione o movimento restrito. 


6. Para o movimento restrito, insira os valores (em pixels) nas caixas Para cima, Para baixo, Para a esquerda e Para a direita. 


Os valores estão relacionados à posição inicial do elemento AP. Para restringir o movimento em uma região retangular, insira valores 
positivos nas quatro caixas. Para permitir somente o movimento vertical, insira valores positivos em Para cima e Para baixo e O em Para a 
esquerda e Para a direita. Para permitir somente o movimento horizontal, insira valores positivos em Para a esquerda e Para a direita e O 
em Para cima e Para baixo. 


7. Insira valores (em pixels) para o destino de liberação nas caixas Para a esquerda e Superior. 


O destino de liberação é o ponto para o qual o visitante deve arrastar o elemento AP. Um elemento AP atinge o destino de liberação 
quando suas coordenadas esquerda e superior correspondem aos valores inseridos nas caixas Para a esquerda e Superior. Os valores 
estão relacionados ao canto superior esquerdo da janela do navegador. Clique em Obter posição atual para preencher automaticamente as 
caixas de texto com a posição atual do elemento AP. 


8. Insira um valor (em pixels) na caixa Encaixar se estiver em para determinar a que distância o visitante deve estar do destino de liberação 
antes de encaixar o elemento AP no destino. 


Valores maiores facilitam a localização do destino de liberação. 


9. Para quebra-cabeças simples e manipulação de cenários, você pode parar aqui. Para definir a alça de arrastamento do elemento AP, 
acompanhe o movimento do elemento enquanto está sendo arrastado, acione uma ação quando o elemento AP for solto e clique na aba 
Avançado. 

10. Para especificar se o visitante deve clicar em uma área específica do elemento AP para arrastá-lo, selecione Área dentro do elemento no 
menu Alça de arrastamento; em seguida, insira as coordenadas esquerda e superior e a largura e a altura da alça de arrastamento. 


Essa opção é útil quando a imagem dentro do elemento AP contém um elemento que sugere o arrastamento, como uma barra de título ou o 
puxador de uma gaveta. Não defina essa opção se desejar que o visitante clique em qualquer lugar no elemento AP para arrastá-lo. 


11. Selecione todas as opções de Quando estiver arrastando que deseja usar: 


e Selecione Trazer elemento para frente se for necessário mover o elemento AP para frente da ordem de empilhamento enquanto estiver 
sendo arrastado. Se você selecionar essa opção, use o menu pop-up para determinar se o elemento AP deve ficar na frente ou ser 
restaurado para sua posição original na ordem de empilhamento. 


e Insira o código JavaScript ou o nome de uma função (por exemplo, monitorAPelement()) na caixa Chamar JavaScript para executar 
repetidas vezes o código ou a função enquanto o elemento AP estiver sendo arrastado. Por exemplo, você pode gravar uma função 
que monitora as coordenadas do elemento AP e exibe dicas como “está ficando quente” ou “está bem longe do destino de liberação” 
em uma caixa de texto. 


12. Insira o código JavaScript ou o nome de uma função (por exemplo, evaluateAPelementPos()) na segunda caixa Chamar JavaScript para 
executar o código ou a função quando o elemento AP for solto. Selecione Somente se encaixado caso seja necessário executar o 
JavaScript somente se o elemento AP tiver chegado ao destino de liberação. 


13. Clique em OK e verifique se o evento padrão está correto. 


Coleta de informações sobre o elemento AP arrastável diria 
Quando você anexa o comportamento Arrastar elemento AP a um objeto, o Dreamweaver insere a função MM dragLayer() na seção head do 
documento. (A função preserva a convenção de nomenclatura antiga dos elementos PA [isto é, “Camada”], de modo que as camadas criadas nas 
versões anteriores do Dreamweaver ainda poderão ser editadas.) Além de registrar o elemento AP como arrastável, essa função define três 
propriedades para cada elemento AP arrastável (MM LEFTRIGHT, MM UPDOWN e MM SNAPPED), que podem ser usadas em suas próprias 
funções JavaScript para determinar a posição horizontal relativa do elemento AP, a posição vertical relativa do elemento AP e se o elemento AP 
chegou ao destino de liberação. 


Nota: As informações fornecidas aqui destinam-se somente a programadores experientes de JavaScript. 

Por exemplo, a seguinte função exibe o valor da propriedade MM UPDOWN (a posição vertical atual do elemento AP) em um campo de 
formulário chamado curPosField. (Os campos de formulário são úteis para exibir informações atualizadas continuamente porque são dinâmicos, 
isto é, você pode alterar seu conteúdo depois do carregamento da página.) 


function getPos(layerId)( 
var layerRef = document .getElementById(layerId); 
var curVertPos = layerRef.MM UPDOWN; 
document. tracking.curPosField.value = curVertPos; 


K 


Em vez de exibir os valores de MM UPDOWN ou MM LEFTRIGHT em um campo de formulário, você pode usar esses valores de diversas 
outras maneiras. Por exemplo, é possível gravar uma função que exibe uma mensagem no campo de formulário dependendo da proximidade do 
valor com relação à zona de liberação ou chamar outra função para mostrar ou ocultar um elemento AP dependendo do valor. 


É especialmente útil para ler a propriedade MM SNAPPED quando existem vários elementos PA na página e todos devem atingir seus destinos 
antes que o visitante possa passar para a próxima página ou tarefa. Por exemplo, você pode gravar uma função para contar quantos elementos 
PA têm um valor MM SNAPPED igual a true e chamá-la sempre que um elemento PA for solto. Quando a contagem de encaixes atingir o 
número desejado, você pode direcionar o visitante para a próxima página ou exibir uma mensagem de êxito. 


Aplicar o comportamento Ir para URL iii 


O comportamento Ir para URL abre uma nova página na janela atual ou no quadro especificado. Esse comportamento é útil para alterar o 
conteúdo de dois ou mais quadros com um clique. 


1. Selecione um objeto e escolha Ir para URL no menu Adicionar comportamento do painel Comportamentos. 
2. Selecione um destino para o URL na lista Abrir em. 


A lista Abrir em relaciona automaticamente os nomes de todos os quadros do conjunto de molduras atual, bem como da janela principal. Se 
não houver nenhum quadro, a janela principal será a única opção. 


Nota: Esse comportamento pode produzir resultados inesperados se algum quadro for superior, estiver em branco, for gerado 
automaticamente ou pai. Às vezes, os navegadores trocam incorretamente esses nomes por nomes de destino reservados. 


3. Clique em Procurar para selecionar um documento a ser aberto ou insira o caminho e o nome de arquivo do documento na caixa URL. 
Repita as etapas 2 e 3 para abrir documentos adicionais em outros quadros. 
5. Clique em OK e verifique se o evento padrão está correto. 


é Para o início 
Aplicar o comportamento Menu de salto 
Quando você cria um menu de salto usando o comando Inserir > Formulário > Menu de salto, o Dreamweaver cria um objeto de menu e anexa o 
comportamento Menu de salto (ou Menu de salto Ir) a esse objeto. Normalmente, não é necessário anexar o comportamento Menu de salto a um 
objeto de forma manual. 


Você pode editar um menu de salto existente de duas maneiras: 


e Você pode editar e reorganizar itens de menu, alterar os arquivos a serem ignorados e alterar a janela em que esses arquivos devem ser 
abertos clicando duas vezes em um comportamento Menu de salto existente no painel Comportamentos. 


e Você pode editar os itens no menu, assim como faria em qualquer outro menu, selecionando o menu e usando o botão Listar valores do 
Inspetor de propriedades. 


1. Crie um objeto de menu de salto se ainda não houver um no documento. 
2. Selecione o objeto e escolha Menu de salto no menu Adicionar comportamento do painel Comportamentos. 
3. Faça as alterações desejadas na caixa de diálogo Menu de salto e clique em OK. 


Aplicar o comportamento Menu de salto Ir dci 
O comportamento Menu de salto Ir tem uma relação próxima com o comportamento Menu de salto; nesse caso, um botão Ir é associado a um 
menu de salto. (Antes de usar esse comportamento, um menu de salto já deve existir no documento.) Clique no botão Ir para abrir o link que está 
selecionado no menu de salto. Um menu de salto normalmente não precisa de um botão Ir; a seleção de um item em um menu de salto, em 
geral, carrega um URL sem exigir mais nenhuma ação do usuário. No entanto, se o visitante selecionar o mesmo item que já está escolhido no 
menu de salto, o salto não ocorrerá. Em geral, isso não importa, mas se o menu de salto aparecer em um quadro e seus itens estiverem 
vinculados a páginas de outros quadros, um botão Ir será útil para permitir que os visitantes selecionem novamente um item que já está 
selecionado no menu de salto. 


Nota: Ao ser usado com um menu de salto, o botão Ir se transforma no único mecanismo que “salta” para levar o usuário ao URL associado à 
seleção do menu. A seleção de um item de menu no menu de salto não redireciona mais o usuário automaticamente para outra página ou 
quadro. 
1. Selecione um objeto a ser usado como botão Ir (geralmente, uma imagem de botão) e escolha Menu de salto Ir no menu Adicionar 
comportamento do painel Comportamentos. 


2. No menu Escolher menu de salto, selecione um menu para o botão Ir a ser ativado e clique em OK. 


' ao dê Para o início 
Aplicar o comportamento Abrir janela do navegador 
Use o comportamento Abrir janela do navegador para abrir uma página em uma nova janela. Você pode especificar as propriedades da nova 
janela, incluindo o tamanho, seus atributos (se pode ser redimensionada, se tem uma barra de menus, etc.) e o nome. Por exemplo, você pode 
usar esse comportamento para abrir uma imagem maior em uma janela separada quando o visitante clicar em uma imagem em miniatura; com 
esse comportamento, a nova janela pode ficar com o tamanho exato da imagem. 


Se nenhum atributo for especificado, a janela será aberta no tamanho e com os atributos da janela que acionou sua abertura. A especificação de 
qualquer atributo para a janela desativa automaticamente todos os outros atributos que não estão explicitamente ativados. Por exemplo, se você 


não definir nenhum atributo, a janela pode abrir na resolução de 1024 x 768 pixels e ter uma barra de navegação (mostrando os botões Voltar, 
Encaminhar, Início e Recarregar), a barra de ferramentas do local (mostrando o URL), a barra de status (mostrando mensagens de status na parte 
inferior) e a barra de menus (mostrando Arquivo, Editar, Exibir e outros menus). Se você definir explicitamente a largura como 640 e a altura 
como 480, e não definir nenhum outro atributo, a janela abrirá na resolução de 640 x 480 pixels, sem barras de ferramentas. 

1. Selecione um objeto e escolha Abrir janela do navegador no menu Adicionar comportamento do painel Comportamentos. 

2. Clique em Procurar para selecionar um arquivo ou insira o URL que deseja exibir. 


3. Defina as opções para a largura e a altura da janela (em pixels) e para a incorporação de várias barras de ferramentas, barras de rolagem, 
alças de redimensionamento e o aspecto. Nomeie a janela (não use nenhum espaço ou caractere especial) se desejar que ela seja o 
destino dos links ou se desejar controlá-la com JavaScript. 


4. Clique em OK e verifique se o evento padrão está correto. 


E Para o início 
Aplicar (0) comportamento Tocar som 


Esse comportamento está obsoleto a partir do Dreamweaver CS5. 


E Para o início 
Aplicar (0) comportamento Mensagem pop-up 


O comportamento Mensagem pop-up exibe um alerta JavaScript com a mensagem especificada. Como os alertas JavaScript têm somente um 
botão (OK), use esse comportamento para fornecer informações ao usuário em vez de apresentar opções de escolha. 


Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar 
uma expressão JavaScript, coloque-a entre chaves (()). Para exibir uma chave, coloque uma barra antes (M). 


Exemplo: 


The URL for this page is (window. location), and today is (new Date()>. 


Nota: O navegador controla a aparência do alerta. Se desejar ter mais controle sobre a aparência, avalie a possibilidade de usar o 
comportamento Abrir janela do navegador. 

1. Selecione um objeto e escolha Mensagem pop-up no menu Adicionar comportamento do painel Comportamentos. 

2. Insira sua mensagem na caixa Mensagem. 

3. Clique em OK e verifique se o evento padrão está correto. 


E » - Para o início 
Aplicar (0) comportamento Pré-carregar Imagens 


O comportamento Pré-carregar imagens diminui o tempo de exibição armazenando em cache as imagens que não são mostradas quando a 
primeira página aparece (por exemplo, imagens que serão trocadas com comportamentos ou scripts). 


Nota: O comportamento Trocar imagem pré-carrega automaticamente todas as imagens realçadas quando você seleciona a opção Pré-carregar 
imagens na caixa de diálogo Trocar imagem; desse modo, não é necessário adicionar o comportamento Pré-carregar imagens manualmente ao 
usar a opção Trocar imagem. 

1. Selecione um objeto e escolha Pré-carregar imagens no menu Adicionar comportamento do painel Comportamentos. 


2. Clique em Procurar para selecionar um arquivo de imagem ou insira o caminho e o nome de arquivo de uma imagem na caixa Arquivo de 
origem de imagem. 


Clique no botão de adição (+), na parte superior da caixa de diálogo, para adicionar a imagem à lista Pré-carregar imagens. 
Repita as etapas 2 e 3 para todas as imagens restantes que deseja pré-carregar na página atual. 
Para remover uma imagem da lista Pré-carregar imagens, selecione-a e clique no botão de subtração (-). 


o O O 


Clique em OK e verifique se o evento padrão está correto. 


« | a P. iníci 
Aplicar o comportamento Definir imagem da barra de navegação SR 


Esse comportamento está obsoleto a partir do Dreamweaver CS5. 


' La Para o início 
Aplicar o comportamento Definir texto do quadro E 
O comportamento Definir texto do quadro permite definir dinamicamente o texto de um quadro, substituindo o conteúdo e a formatação de um 
quadro pelo conteúdo especificado. O conteúdo pode incluir qualquer código HTML válido. Use esse comportamento para exibir informações 
dinamicamente. 


Embora o comportamento Definir texto do quadro substitua a formatação de um quadro, você pode selecionar Preservar cor de fundo para 
preservar os atributos de cor de fundo da página e do texto. 


Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar 
uma expressão JavaScript, coloque-a entre chaves (()). Para exibir uma chave, coloque uma barra antes (M). 


Exemplo: 


The URL for this page is (window. location), and today is (new Date()). 


Selecione um objeto e escolha Definir texto > Definir texto do quadro no menu Adicionar comportamento do painel Comportamentos. 
Na caixa de diálogo Definir texto do quadro, selecione o quadro de destino no menu Quadro. 

Clique no botão Obter HTML atual para copiar o conteúdo atual da seção body do quadro de destino. 

Insira uma mensagem na caixa Novo HTML. 


gr E mm 


Clique em OK e verifique se o evento padrão está correto. 


Aplicar o comportamento Definir texto do recipiente RE 


O comportamento Definir texto do recipiente substitui o conteúdo e a formatação de um recipiente existente (isto é, qualquer elemento que possa 
conter texto ou outros elementos) em uma página pelo conteúdo especificado. O conteúdo pode incluir qualquer código-fonte HTML válido. 


Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar 
uma expressão JavaScript, coloque-a entre chaves (()). Para exibir uma chave, coloque uma barra antes (M). 


Exemplo: 


The URL for this page is (window. location), and today is (new Date()). 


Selecione um objeto e, em seguida, Definir texto > Definir texto do contêiner no menu Adicionar comportamento do painel Comportamentos. 
Na caixa de diálogo Definir texto do recipiente, use o menu Recipiente para selecionar o elemento de destino. 
Insira o novo texto ou HTML na caixa Novo HTML. 


Po tos A 


Clique em OK e verifique se o evento padrão está correto. 


Aplicar o comportamento Definir texto da barra de status Cad 


O comportamento Definir texto da barra de status mostra uma mensagem na barra de status no canto inferior esquerdo da janela do navegador. 
Por exemplo, você pode usar esse comportamento para descrever o destino de um link na barra de status em vez de mostrar o URL associado. 
Os visitantes geralmente ignoram ou desconsideram as mensagens da barra de status (nem todos os navegadores dão suporte completo à 
definição do texto da barra de status); se sua mensagem for importante, avalie a possibilidade de exibi-la como uma mensagem pop-up ou como 
o texto de um elemento AP. 


Nota: Se você usar o comportamento Definir texto da barra de status no Dreamweaver, o texto da barra de status do navegador não será 
alterado necessariamente porque alguns navegadores precisam de ajustes especiais ao alterar o texto da barra de status. O Firefox, por exemplo, 
requer a alteração de uma opção avançada que permite ao JavaScript alterar o texto da barra de status. Para obter mais informações, consulte a 
documentação do navegador. 


Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar 
uma expressão JavaScript, coloque-a entre chaves (()). Para exibir uma chave, coloque uma barra antes (M). 


Exemplo: 


The URL for this page is (window.location), and today is (new Date()>. 


1. Selecione um objeto e escolha Definir texto > Definir texto da barra de status no menu Adicionar comportamento do painel 
Comportamentos. 


2. Na caixa de diálogo Definir texto da barra de status, digite sua mensagem na caixa Mensagem. 
Seja objetivo. O navegador trunca a mensagem se ela não cabe na barra de status. 


3. Clique em OK e verifique se o evento padrão está correto. 


Aplicar o comportamento Definir texto do campo de texto ii 


O comportamento Definir texto do campo de texto substitui o conteúdo do campo de texto de um formulário pelo conteúdo especificado. 


Você pode incorporar qualquer chamada de função, propriedade, variável global ou outra expressão JavaScript válida no texto. Para incorporar 
uma expressão JavaScript, coloque-a entre chaves (()). Para exibir uma chave, coloque uma barra antes (M). 


Exemplo: 


The URL for this page is (window. location), and today is (new Date()>. 


Criar um campo de texto nomeado 
1. Selecione Inserir > Formulário > Campo de texto. 


Se o Dreamweaver solicitar a adição de uma tag de formulário, clique em Sim. 


2. No Inspetor de propriedades, digite um nome para o campo de texto. Verifique se o nome é exclusivo na página (não use o mesmo nome 
para vários elementos da mesma página, mesmo se estiverem em formulários diferentes). 


Aplicar Definir texto do campo de texto 
1. Selecione um campo de texto e escolha Definir texto > Definir texto do campo no menu Adicionar comportamento do painel 
Comportamentos. 


2. Selecione o campo de texto de destino no menu Campo de texto e insira o novo texto. 
3. Clique em OK e verifique se o evento padrão está correto. 


E Para o início 
Aplicar o comportamento Mostrarlocultar elementos ás 


O comportamento Mostrar/ocultar elementos mostra, oculta ou restaura a visibilidade padrão de um ou mais elementos de página. Esse 
comportamento é útil para exibir informações à medida que o usuário interage com a página. Por exemplo, conforme o usuário move o ponteiro 
pela imagem de uma planta, você pode mostrar um elemento de página fornecendo detalhes sobre a época de crescimento e a região da planta, 
a quantidade de sol necessária, quanto a planta crescerá e assim por diante. O comportamento mostra ou oculta somente o elemento relevante; 
na verdade, ele não remove o elemento do fluxo da página quando está oculto. 


1. Selecione um objeto e selecione Mostrar/ocultar elementos no menu Adicionar comportamento do painel Comportamentos. 


Se a opção Mostrar/ocultar elementos não estiver disponível, você provavelmente tem um elemento PA selecionado. Como os elementos 
PA não aceitam eventos nos navegadores 4.0, selecione um objeto diferente, como a tag <body> ou uma tag link (<a>). 


2. Na lista Elementos, selecione o elemento que deseja mostrar ou ocultar e clique em Mostrar, Ocultar ou Restaurar (para restaurar a 
visibilidade padrão). 

3. Repita a etapa 2 para todos os demais elementos cuja visibilidade deseja alterar. (Você pode alterar a visibilidade de vários elementos com 
um único comportamento.) 


4. Clique em OK e verifique se o evento padrão está correto. 


a Para o início 
Aplicar (0) comportamento Mostrar menu pop-up 


Esse comportamento está obsoleto a partir do Dreamweaver CS5. 


atoa . . Para o início 
Adicionar, remover e reorganizar itens de menu pop-up 


Esse comportamento está obsoleto a partir do Dreamweaver CS5. 


Para o início 
Formatar um menu pop-up 


Esse comportamento está obsoleto a partir do Dreamweaver CS5. 


ou Para o início 
Posicionar um menu pop-up em um documento 


Esse comportamento está obsoleto a partir do Dreamweaver CS5. 


nes Para o início 
Modificar um menu pop-up ii 


Esse comportamento está obsoleto a partir do Dreamweaver CS5. 


E ' Para o início 
Aplicar o comportamento Trocar imagem 
O comportamento Trocar imagem troca uma imagem por outra alterando o atributo src da tag <img>. Use esse comportamento para criar 
sobreposições de botão ou outros efeitos de imagem (incluindo a troca de mais de uma imagem ao mesmo tempo). A inserção de uma imagem 
de sobreposição adiciona automaticamente o comportamento Trocar imagem à sua página. 


Nota: Como somente o atributo src é afetado por esse comportamento, você deve trocar uma imagem que tenha as mesmas dimensões (altura 
e largura) da original. Caso contrário, a imagem trocada é reduzida ou ampliada para ficar com as dimensões da imagem original. 


Existe também o comportamento Restaurar imagem trocada, que restaura o último conjunto de imagens trocadas para os arquivos de origem 
anteriores. Esse comportamento é adicionado automaticamente sempre que o comportamento Trocar imagem é anexado a um objeto; se a opção 
Restaurar ficar selecionada durante a adição de Trocar imagem, nunca selecione o comportamento Restaurar imagem trocada manualmente. 
1. Selecione Inserir > Imagem ou clique no botão Imagem, no painel Inserir, para inserir uma imagem. 
2. No Inspetor de propriedades, insira um nome para a imagem na caixa de texto à esquerda. 
Não é necessário nomear imagens; elas são nomeadas automaticamente quando você anexa o comportamento a um objeto. No entanto, é 
mais fácil diferenciar imagens na caixa de diálogo Trocar imagem nomeando todas as imagens com antecedência. 
3. Repita as etapas 1 e 2 para inserir imagens adicionais. 


Selecione um objeto (geralmente, a imagem que será trocada) e escolha Trocar imagem no menu Adicionar comportamento do painel 
Comportamentos. 


Na lista Imagens, selecione a imagem cuja origem deseja alterar. 


Clique em Procurar para selecionar o novo arquivo de imagem ou insira o caminho e o nome de arquivo da nova imagem na caixa Definir 
origem como. 


7. Repita as etapas 5 e 6 para qualquer imagem adicional que deseja alterar. Use a mesma ação Trocar imagem para todas as imagens que 
deseja alterar de uma vez; caso contrário, a ação Restaurar imagem trocada correspondente não restaurará todas as imagens. 


8. Selecione a opção Pré-carregar imagens para armazenar em cache as novas imagens quando a página for carregada. 
Isso evita atrasos de download quando as imagens precisarem aparecer. 


9. Clique em OK e verifique se o evento padrão está correto. 


E a de P, iníci 
Aplicar o comportamento Validar formulário RPA 


O comportamento Validar formulário verifica o conteúdo dos campos de texto especificados para assegurar que o usuário inseriu o tipo de dados 
correto. Anexe esse comportamento a campos de texto individuais com o evento onBlur para validar os campos à medida que o usuário preenche 
o formulário ou anexe-o ao formulário com o evento onSubmit para avaliar vários campos de texto ao mesmo tempo quando o usuário clicar no 
botão Enviar. Anexar esse comportamento a um formulário impede o envio de formulários com dados inválidos. 


1. Selecione Inserir > Formulário ou clique no botão Formulário, no painel Inserir, para inserir um formulário. 
2. Selecione Inserir > Formulário > Campo de texto ou clique no botão Campo de texto no painel Inserir para inserir um campo de texto. 


Repita essa etapa para inserir campos de texto adicionais. 
3. Escolha um método de validação: 


e Para validar campos individuais à medida que o usuário preenche o formulário, selecione um campo de texto e selecione Janela > 
Comportamentos. 


* Para validar vários campos quando o usuário envia o formulário, clique na tag <form> no seletor de tags, no canto inferior esquerdo da 
janela Documento, e escolha Janela > Comportamentos. 


Selecione Validar formulário no menu Adicionar comportamento. 
5. Siga um destes procedimentos: 


e Se estiver validando campos individuais, selecione o mesmo campo selecionado na janela Documento na lista Campos. 
e Se estiver validando vários campos, selecione um campo de texto na lista Campos. 


Selecione a opção Obrigatório caso seja necessário inserir alguns dados no campo. 


Selecione uma das seguintes opções de Aceitar: 
Usar Tudo Verifica se um campo obrigatório contém dados; os dados podem ser de qualquer tipo. 


Usar Endereço de e-mail Verifica se o campo contém um símbolo (OD. 
Usar Número Verifica se o campo contém somente números. 
Usar Número de Verifica se o campo contém um número de um intervalo específico. 


Se você tiver optado por validar vários campos, repita as etapas 6 e 7 para todos os campos adicionais que desejar validar. 
Clique em OK. 


Se você estiver validando vários campos quando o usuário enviar o relatório, o evento onSubmit aparecerá automaticamente no menu 
Eventos. 


10. Se você estiver validando campos individuais, verifique se o evento padrão é onBlur ou onChange. Caso contrário, selecione um desses 
eventos. 


Os dois eventos acionam o comportamento Validar formulário quando o usuário sai do campo. A diferença é que onBlur ocorre 
independentemente de o usuário ter inserido algum dado no campo e onChange ocorre somente se o usuário tiver alterado o conteúdo do 
campo. O evento onBlur é recomendado para campos obrigatórios. 


Mais tópicos da Ajuda 
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Acessibilidade 


Dreamweaver e acessibilidade 


Sobre conteúdo acessível 

Uso de leitores de tela com o Dreamweaver 

Suporte a recursos de acessibilidade do sistema operacional 

Otimizar o espaço de trabalho tendo em vista um design de página acessível 
Recurso do relatório de validação da acessibilidade do Dreamweaver 
Navegar no Dreamweaver usando o teclado 


Z É Para o início 
Sobre conteúdo acessível 
Acessibilidade se refere à criação de sites e produtos da Web utilizáveis por pessoas com deficiências visual, auditiva, motora entre outras. Entre 
os exemplos de recursos de acessibilidade para softwares e sites estão o suporte ao leitor de tela, equivalentes em texto para gráficos, atalhos de 
teclado, mudança das cores de exibição para alto contraste etc. O Dreamweaver fornece ferramentas que o tornam acessível e ferramentas que 
ajudam a criar conteúdo acessível. 


Para os desenvolvedores do Dreamweaver que precisam usar recursos de acessibilidade, o aplicativo oferece suporte ao leitor de tela, à 
navegação por teclado e à acessibilidade do sistema operacional. 


Para designers que precisam criar conteúdo acessível, o Dreamweaver ajuda você na criação de páginas acessíveis que apresentam conteúdo 
útil para leitores de tela e que são compatíveis com as diretrizes do governo federal. Por exemplo, as caixas de diálogo solicitam a você aplicar 
atributos de acessibilidade — como, por exemplo, equivalentes em texto de uma imagem — ao inserir elementos de página. Dessa forma, quando a 
imagem é exibida em uma página para um usuário com deficiência visual, o leitor de tela lê a descrição. 


Nota: Para obter mais informações sobre duas iniciativas de acessibilidade significativas, consulte a Web Accessibility Initiative do World Wide 
Web Consortium (www.w3.org/wai) e a seção 508 do U.S. Federal Rehabilitation Act (wwnw.section508.gov). 

Nenhuma ferramenta de criação pode automatizar o processo de desenvolvimento. A criação de sites acessíveis exige que você compreenda os 
requisitos de acessibilidade e tome decisões contínuas sobre como os usuários com deficiência interagem com as páginas da Web. A melhor 
forma de verificar se um site é acessível se dá pelo planejamento deliberado, pelo desenvolvimento, pelo teste e pela avaliação. 


: P: da 
Uso de leitores de tela com o Dreamweaver Ra 
Um leitor de tela dita o texto exibido na tela do computador. Ele também lê informações não textuais como, por exemplo, rótulos de botão ou 
descrições de imagem do aplicativo, fornecidas em tags de acessibilidade ou atributos durante a criação. 


Como designer do Dreamweaver, você pode usar um leitor de tela para ajudar na criação das páginas da Web. O leitor de tela começa a leitura 
no canto superior esquerdo da janela Documento. 


O Dreamweaver dá suporte aos leitores de tela JAWS para Windows, da Freedom Scientific (www .freedomscientific.com) e Window-Eyes, da GW 
Micro (www.gwmicro.com). 


E dgá é 5 Para o início 
Suporte a recursos de acessibilidade do sistema operacional 
O Dreamweaver dá suporte a recursos de acessibilidade dos sistemas operacionais Windows e Macintosh. Por exemplo, no Macintosh, você 
define as preferências visuais na caixa de diálogo Universal Access Preferences (Apple > System Preferences). As configurações são refletidas 
no espaço de trabalho do Dreamweaver. 


Também há suporte à configuração de alto contraste do sistema operacional Windows. Você ativa essa opção por meio do Painel de Controle do 
Windows e isso afeta o Dreamweaver da seguinte forma: 


e Caixas de diálogo e painéis usam as configurações da cor do sistema. Por exemplo, caso você defina a cor como Branco e Preto, todas as 
caixas de diálogo e painéis do Dreamweaver são exibidos com uma cor de primeiro plano branca e a cor do plano de fundo preta. 


e A Visualização de código usa a cor de texto do sistema e da janela. Por exemplo, caso você defina a cor do sistema como Branco e Preto 
e, em seguida, altere as cores do texto em Editar > Preferências > Codificação por cores, o Dreamweaver ignora essas configurações de 
cor e exibe o texto do código com a cor de primeiro plano branca e a cor do plano de fundo preta. 


e A Visualização de design usa as cores de plano de fundo e de texto que você definiu em Modificar > Propriedades da página para que as 
páginas que você projetou processem cores de acordo com o navegador. 


o ] . = ; RR 
Otimizar o espaço de trabalho tendo em vista um design de página acessível Roo RR 


Ao criar páginas acessíveis, você precisa associar informações como, por exemplo, rótulos e descrições a objetos de página para que o 
conteúdo seja acessível a todos os usuários. 


Para fazer isso, ative a caixa de diálogo Acessibilidade de cada objeto para que o Dreamweaver solicite informações de acessibilidade quando 
você inserir objetos. Você pode ativar uma caixa de diálogo para qualquer um dos objetos na categoria Acessibilidade em Preferências. 
1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Macintosh). 


2. Selecione Acessibilidade na lista Categoria à esquerda, selecione um objeto, defina uma das seguintes opções e clique em OK. 
Mostrar os atributos na inserção Selecione os objetos para os quais você deseja ativar as caixas de diálogo de acessibilidade. Por 
exemplo, objetos de formulário, quadros, mídia e imagens. 


Manter foco no painel Mantém foco no painel, o que o torna acessível ao leitor de tela. (Caso você não selecione essa opção, o foco 
permanece na Visualização de design ou de código quando um usuário abre um painel.) 


Processamento fora da tela Selecione essa opção ao usar um leitor de tela. 
Nota: Os atributos de acessibilidade são exibidos na caixa de diálogo Inserir tabela quando você insere uma nova tabela. 


Zu - = adisds Para o início 
Recurso do relatório de validação da acessibilidade do Dreamweaver és 


O recurso de relatório de validação da acessibilidade do Dreamweaver foi desaprovado no Dreamweaver CS5. 


Para o início 
Navegar no Dreamweaver usando o teclado 


Você pode usar o teclado para navegar em painéis, inspetores, caixas de diálogo, quadros e tabelas sem usar um mouse. 


Nota: Só há suporte à navegação em abas e ao uso de teclas de seta no Windows. 


Navegar em painéis 
1. Na janela Documento, pressione Control+F6 para mudar o foco para um painel. 


Uma linha pontilhada em torno do título do painel indica que o foco está no painel. O leitor de tela lê a barra de título do painel que está em 
foco. 


2. Pressione Control+F6 novamente para alternar o foco até que ele esteja no painel que você deseja trabalhar. (Pressione Control+Shift+F6 
para alternar o foco para o painel anterior.) 

3. Caso o painel no qual você deseja trabalhar não esteja aberto, use os atalhos de teclado no menu do Windows para exibir o painel 
apropriado e, em seguida, pressione Control+F6. 


Caso o painel no qual você deseja trabalhar esteja aberto, mas não expandido, coloque o foco na barra de título do painel e, em seguida, 
pressione a Barra de espaço. Pressione a Barra de espaço novamente para recolher o painel. 

4. Pressione a tecla Tab para percorrer as opções do painel. 

5. Use as teclas de seta quando apropriado: 


e Caso uma opção tenha escolhas, use as teclas de seta para percorrê-las e, em seguida, pressione a Barra de espaço para fazer uma 
seleção. 


e Caso haja abas no grupo de painéis para abrir outros painéis, coloque o foco na aba de abertura e, em seguida, use as teclas de seta 
para esquerda ou para direita para abrir as outras abas. Depois de abrir uma nova aba, pressione a tecla Tab para percorrer as opções 
do painel. 


Navegar no Inspetor de propriedades 
Pressione Control+F3 para exibir o Inspetor de propriedades, caso ele não esteja visível. 


Pressione Control+F6 (apenas no Windows) até alternar o foco para o Inspetor de propriedades. 
Pressione a tecla Tab para percorrer as opções do Inspetor de propriedades. 
Use as teclas de seta conforme apropriado para percorrer as opções. 


E O IM RR 


Pressione Control+Seta para baixo/seta para cima (Windows) ou Command Seta para baixo/seta para cima (Macintosh) para abrir e fechar 
a seção expandida do Inspetor de propriedades, conforme necessário, ou, com o foco na seta de expansão no canto inferior direito, 
pressione a Barra de espaço. 

Nota: O foco do teclado deve estar dentro do Inspetor de propriedades (e não no título do painel) para expandir e recolher para trabalhar. 


Navegar em uma caixa de diálogo 
1. Pressione a tecla Tab para percorrer as opções da caixa de diálogo. 
2. Use as teclas de seta para percorrer as opções. 


3. Caso a caixa de diálogo tenha uma lista Categoria, pressione Control+Tab (Windows) para alterar o foco para a lista de categorias e, em 
seguida, use as teclas de seta para subir e descer a lista. 


4. Pressione Control+Tab novamente para alternar para as opções de uma categoria. 


5. Pressione Enter para sair da caixa de diálogo. 


Navegar em quadros 
*% Caso o documento contenha quadros, você pode usar as teclas de seta a fim de alternar o foco para um quadro. 


Selecionar um quadro 

1. Pressione Alt+seta para baixo a fim de colocar o ponto de inserção na janela Documento. 

2. Pressione Alt+seta para cima a fim de selecionar o quadro com o foco atualmente. 

3. Continue pressionando Alt+seta para cima a fim de alternar o foco para o conjunto de molduras e, em seguida, para os conjuntos de 
molduras pai, caso haja algum aninhado. 

4. Pressione Alt+seta para baixo a fim de alternar o foco para um conjunto de molduras filho ou um único quadro dentro do conjunto de 
molduras. 

5. Com o foco em um único quadro, pressione Alt+seta para esquerda ou para direita a fim de se mover entre os quadros. 


Navegar em uma tabela 
1. Use as teclas de seta ou pressione Tab a fim de se mover para outras células conforme necessário. 
O pressionamento de Tab na célula à direita adiciona outra linha à tabela. 
2. Para selecionar uma célula, pressione Control+A (apenas no Windows) enquanto o ponto de inserção está na célula. 
3. Para selecionar toda a tabela, pressione Control+A duas vezes caso o ponto de inserção esteja em uma célula, ou uma vez caso uma 
célula esteja selecionada. 


4. Para sair da tabela, pressione Control+A três vezes caso o ponto de inserção esteja em uma célula, duas vezes caso a célula esteja 
selecionada ou uma caso a tabela esteja selecionada e, em seguida, pressiona a tecla de seta para cima, para esquerda ou para direita. 
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Dreamweaver e Creative Cloud 


Sincronização de configurações do Dreamweaver com a Creative 
Cloud 


Primeira sincronização 

Migração de configurações para a Dreamweaver CC 2014 
Edição de preferências para configurações de sincronização 
Sincronização automática 

Sincronização manual 

Resolução de conflitos durante a sincronização 

Acesso direto aos recursos da Creative Cloud 


A conta de associação à Adobe Creative Cloud permite ativar o Dreamweaver em duas máquinas. Uma conta de associação é basicamente a 
conta da ID da Adobe usada ao comprar a associação. A sincronização com a nuvem está vinculada à sua conta da associação. 


O recurso de sincronização em nuvem ajuda a manter as seguintes configurações do Dreamweaver sincronizadas em duas máquinas: 
e Preferências do aplicativo: 
e Geral: todas as preferências, exceto Ativar arquivos relacionados e Identificar arquivos relacionados de forma dinâmica. 
e Codificação por cores: todas as preferências, exceto Tipo de documento. 
* Formato do código: todas as preferências exceto bibliotecas de tags. 
e Dicas de código: todas as preferências exceto as alterações feitas usando o link Editor de bibliotecas de tag. 
* Regravação de código: todas as preferências. 
e Copiar/colar: todas as preferências. 
e Estilos CSS: todas as preferências. 
* Comparar arquivos: essa configuração é sincronizada somente entre os computadores em execução no mesmo sistema operacional. 
e Tipos de arquivos/Editores: Recarregar apenas arquivos modificados e Salvar ao iniciar. 
e Realce: todas as preferências. 
e Novo documento: todas as preferências, exceto Tipo padrão de documento (DTD) e Codificação padrão. 
e Visualizar no navegador: somente Visualizar utilizando o arquivo temporário é sincronizado. 
e Site: todas as preferências, exceto Mostrar sempre <opções> à <Direita/Esquerda>. 
e Validador da W3C: todas as preferências, exceto as alterações feitas usando 'Gerenciar”. 
e Tamanhos de janela: todas as preferências. 


Nota: exceto Comparar arquivos, todas as outras Preferências relacionadas acima são sincronizadas entre computadores independentemente do 
sistema operacional em execução. Por exemplo, Mac para Windows. 


e Configurações do site: todas as configurações do site (exceto nome de usuário e senha) são sincronizadas entre os computadores em 
execução no mesmo sistema operacional. O nome de usuário e a senha não podem ser sincronizados. 


O caminho e o nome da pasta local do site serão sincronizados, se uma pasta com o mesmo nome já existir no mesmo caminho. 


Se não existir um site em uma máquina, o Dreamweaver criará uma nova pasta do site no local padrão e os caminhos relacionados a essa pasta. 
É possível alterar esse caminho a qualquer momento. Em todas as sincronizações subsequentes, somente as alterações na pasta do site serão 
sincronizadas. 

* Atalhos de teclado: os atalhos de teclado são sincronizadas somente entre os computadores em execução no mesmo sistema operacional. 


e Áreas de trabalho: as áreas de trabalho serão salvas quando você sair do Dreamweaver e serão sincronizadas na nuvem. Para sincronizar 
alterações da área de trabalho sem sair do Dreamweaver (na sessão atual), clique em Salvar atual no menu Área de trabalho e sincronize 
manualmente as configurações (Preferências > Sincronizar configurações). 


As áreas de trabalho são sincronizadas somente entre os computadores em execução no mesmo sistema operacional. 


Nota: você pode optar por sincronizar uma configuração específica, por exemplo, Preferências. Desmarque a caixa de seleção necessária na 
caixa de diálogo Preferências (Sincronizar configurações). 


A sincronização com a Creative Cloud não é suportada nos seguintes cenários: 


e Você tem uma licença de volume e está conectado como um usuário anônimo. 
* Seu computador está configurado para se conectar à Internet por um servidor proxy. 
e Você pode alternar de uma conta de Administrador para uma conta de usuário padrão. 


E z : z aa Para o início 
Primeira sincronização 


Quando você inicia o Dreamweaver na máquina em que ele foi instalado primeiro, a seguinte caixa de diálogo é exibida: 


O Dreamweaver sincroniza suas preferências e configurações do site com 
segurança 

usando a Creative Cloud. Clique em Sincronizar configurações agora para 
sincronizar as 

configurações. 


[] sempre sincronizar configurações automaticamente 


[arcada] ( Desativar Sineroniza configurações | [[Sineronizar configurações agora ] 


Sincronizar configurações agora Sincroniza as configurações com a nuvem imediatamente. 


Sempre sincronizar configurações automaticamente Sincroniza as configurações automaticamente. Para obter mais informações, consulte 
Sincronização automática. 


Desativar Sincronizar configurações Desativa a sincronização. 


Nota: você pode ativar a sincronização a qualquer momento usando a caixa de diálogo Preferências. 


Avançado Abre as opções Sincronizar configurações na caixa de diálogo Preferências. 


Sincronizar configurações 
Geral 
Acessibilidade O da Adobe: 
Codificação par cores Conectado como CASEYCRggADOBE COM Sincronizas configurações agora 
Comparar arquivos As configurações atualizados estão prontas [ Gerenciar contas 
Copiar/colar 
Dicas de código [) Ativar sincronização automática 
Hementos Invisíveis Todas as alterações feitas na configuração serão publicadas imediatamente. 
Estilos CSS As configurações recebidas serão aplicadas automaticamente. 
Fomes 
Formato do código Configurações para sincronização: 
Novo documento [7 Preferê do açdh [V Atalhos de teciado 
Realce 
Regravação de cógigo [Y Configurações do site [Y Áreas de trabalho 
Sencronizar configurações 
sae 
essi da fo Resolução de conflitos: | Pergunte a preferência +] 
Tipos de arquivos /editores 
Validador WIC Clique aqui para saber mais sobre o que está sendo sincronizado 
Visualizar no navegador 


Sincronização de configurações na caixa de diálogo Preferências 


Na segunda máquina, a seguinte caixa de diálogo é exibida quando você inicia o Dreamweaver: 


As configurações de outro computador já foram 

sincronizadas com a Creative Cloud. Deseja sincronizar com as 
configurações 

armazenadas na nuvem ou com as configurações locais deste computador? 


[] Sempre sincronizar configurações automaticamente 


Sincronizar nuvem Inclui as configurações na nuvem. As preferências do aplicativo na segunda máquina são substituídas pelas configurações 
na nuvem. As configurações do site na nuvem são adicionadas às configurações na segunda máquina. 


Sincronizar local As alterações feitas nas preferências e nas configurações do site na segunda máquina são mantidas e também são enviadas 
para a nuvem. 


Sempre sincronizar configurações automaticamente Sincroniza as configurações automaticamente. Para obter mais informações, consulte 


Sincronização automática. 


Avançado Abre as opções Sincronizar configurações na caixa de diálogo Preferências. 


Os seguintes cenários ajudam você a entender a diferença entre as opções Sincronizar nuvem e Sincronizar local: 


Cenário 1 
Você altera as Preferências na primeira máquina e sincroniza essas alterações com a nuvem. Também na segunda máquina, você altera as 
Preferências. Em seguida, quando você clica em: 


Sincronizar nuvem As alterações em Preferências na primeira máquina são sincronizadas com a segunda máquina. As alterações realizadas na 
segunda máquina são descartadas. 


Sincronizar local As alterações nas Preferências na segunda máquina são mantidas e também sincronizadas na nuvem. Quando você 
sincronizar novamente a primeira máquina e escolher Sincronizar nuvem, essas alterações serão refletidas na primeira máquina. 


Cenário 2 


Sincronizar nuvem As alterações nas configurações do site na primeira máquina são “adicionadas” às configurações na segunda máquina. 


Sincronizar local As alterações na segunda máquina são mantidas e sincronizadas com a nuvem. Quando você sincronizar novamente a 
primeira máquina e escolher Sincronizar nuvem, o novo site será adicionado às configurações na primeira máquina. 


Nota: nenhuma configuração alterada em Preferências enquanto a sincronização estiver em andamento terá efeito. 


Para o início 


Migração de configurações para a Dreamweaver CC 2014 


Se você tiver sincronizado as configurações do Dreamweaver com a Creative Cloud uma vez pelo menos na versão anterior do Dreamweaver, a 
nova versão do Dreamweaver exibirá a seguinte caixa de diálogo após a primeira inicialização: 


Sincronizar configurações 


As configurações da versão anterior do Dreamweaver são sincronizadas com 
a Creative Cloud. Importe-as ou sincronize as configurações locais com a 
Creative Cloud. 


[] Sempre sincronizar configurações automaticamente 


[ Avançado... | [ Sincronização local | [ Importar config. sincr, |] 


Importar configurações na Dreamweaver CC 2014 


Para importar as configurações que são armazenadas na Creative Cloud, clique em Importar config. sincr. 
Observação: essa opção não estará disponível posteriormente. 


Para sincronizar as configurações na instância atual do Dreamweaver com a Creative Cloud, clique em Sincronização local. 


Para sincronizar automaticamente as configurações desse ponto em diante, selecione Sempre sincronizar configurações 
automaticamente. 


Para exibir as opções avançadas de configurações de sincronização, clique em Avançado. 


Se você não tiver sincronizado as configurações com a Creative Cloud usando a versão anterior do Dreamweaver, as opções descritas 
emPrimeira sincronização são exibidas. 


ra A E , A z á pá Para o início 
Edição de preferências para configurações de sincronização 


Usando a caixa de diálogo Preferências, escolha as configurações a serem sincronizadas, especifique as configurações de resolução em conflito, 
ative a sincronização automática ou acione uma sincronização sob demanda. 


1. Selecione Editar > Preferências (Windows) ou Dreamweaver > Preferências (Mac). 


Categoria Sencronizar configurações 
Geral 
Acessibilidade Jo da Adobe; 
Codificação por cores Conectado como CASEYCRGADOBE COM 
Compass ameqiiros As configurações atualizados estão prontas 
Copiar/colar 
Dicas de código [) Ativar sincronização automática 
Elementos invisíveis Todas as alisrações foltas na coniguração serão publicadas imediatamente. 
Estilos CSS As configurações recebidas serão aplicadas automaticamente. 
Tones 
Formato do código Configurações para sincronização: 
nes documento mp ferê do [7 Atalhos de 
e aice 
Regravação de código [Y Configurações do site [Y Áreas de trabalho 
ge dão Resolução de conflitos 
Tipos de arquivos editores = 
Validador WIC Clique aqui para saber mais sobre o que está sendo sincronizado 
Visualizar no navegador 


2. Clique em Sincronizar configurações na lista Categoria. 
3. Na seção Configurações para sincronização, clique na configuração a ser sincronizada. 


4. Na lista Resolução de conflitos, clique em uma opção para resolver conflitos durante a sincronização. Para obter mais informações, 
consulte Resolução de conflitos durante a sincronização. 


5. Para ativar a sincronização automática a cada 30 minutos, clique em Ativar sincronização automática. 

6. Para sincronizar as configurações a qualquer momento (sincronização sob demanda), clique em Sincronizar configurações agora. 
(13.1) Se atualizações forem baixadas da nuvem no seu computador, o botão Sincronizar configurações agora será alterado para Aplicar 
atualizações. Você pode optar por aplicar as atualizações imediatamente ou por fechar a caixa de diálogo Preferências para aplicar as 


atualizações posteriormente. Se forem feitas alterações na instância do Dreamweaver no computador antes da aplicação das atualizações, 
poderá surgir um conflito que será resolvido com base nas Configurações de resolução de conflitos. 


Preferências 
Cmegoria Sencronizar configurações 

Geral 
Acessibilidade Jo da Adobe; 
Codificação por cores Conectado como CASEYCRGADOBE COM 
Compainar aquiros As configurações atualizados estão prontas 
Copiar/colar 
Dicas de código [) Ativar sincronização automática 
Bementos invisíveis Todas as alterações feitas na configuração serão publicadas imediatamente. 
Estilos CSS As configurações recebidas serão aplicadas automaticamente. 
Fontes 
Formato do código Configurações para sincronização: 
as documento [7 Preferê da: Vi Atalhos de 

eaice 
Regravação de código [Y Configurações do site [Y Áreas de trabalho 
Tamanhos de janela Resolução de confitos 
Tipos de arquivos editores = 
Validador WIC Clique aqui para saber mais sobre o que está sendo sincronizado 
Visualizar no navegador 


7. Clique em Aplicar para salvar as alterações feitas nas preferência de configurações de sincronização. 


8. Clique em Fechar para sair da caixa de diálogo Preferências. 


E - po por Para o início 
Sincronização automática 


Você pode ativar a sincronização automática de uma das seguintes formas: 


* Selecione Sempre sincronizar configurações automaticamente na caixa de diálogo Sincronizar configurações. 


Nota: as caixas de diálogo Sincronizar configurações são exibidas somente quando você acessa o Dreamweaver pela primeira vez depois de 
instalá-lo em seus computadores. Para sincronizações subsequentes, use a caixa de diálogo Preferências ou a notificação do sistema (E). 


* Selecione Editar > Preferências (Win) e Dreamweaver > Preferências (Mac) e escolha Sincronizar configurações > Ativar sincronização 
automática. 


Quando você ativar a sincronização automática, o Dreamweaver verificará se há alterações na nuvem a cada 30 minutos e, se houver, 
sincronizará as configurações automaticamente. 


E " sã Para o início 
Sincronização manual 


e Clique em Sincronizar configurações agora na caixa de diálogo Sincronizar configurações. 
e Clique em Editar > (sua ID da Adobe) > Sincronizar configurações agora. 


e Clique em Sincronizar configurações agora na notificação do sistema. Para abrir a caixa de diálogo de notificação, clique em na barra 
de ferramentas do documento. 


Compacto - Es 


É “stmamegadobe com 


Ult. sinc.: 4/22/13 8:57 PM 


Sincronizar configurações agora 


Botão Sincronizar configurações agora antes da sincronização 


O =eotacodecom 


As configurações atualisados estão prontas 


O botão Aplicar agora após a sincronização (somente 13.1) 


(13.1) Se houver atualizações disponíveis na nuvem, elas serão baixadas para o computador. O botão Sincronizar configurações agora na 
notificação toast é alterado para Aplicar agora. Você pode optar por aplicar as atualizações imediatamente ou posteriormente. Se você fizer 
alterações nas configurações do Dreamweaver antes de aplicar as atualizações baixadas, poderá surgir um conflito que será resolvido com base 
nasconfigurações de resolução em conflito. 


e (No Mac) Dreamweaver > Sincronizar configurações agora e no Windows, Editar > Sincronizar configurações agora. 
o E p a cú Para o início 
Resolução de conflitos durante a sincronização 


Quando há uma diferença entre as configurações nas máquinas e na nuvem, o conflito é resolvido com base nas configurações de Resolução de 
conflitos na caixa de diálogo Preferências. 


Se Resolução de conflitos estiver definida como Minha preferência, a caixa de diálogo a seguir será exibida quando o conflito surgir: 


As configurações de carro compusador já foram 


q: sincronizadas com a Creative Cloud, Deseja sincronizar com as 


configurações 
armazenadas na muvem ou com as configurações locais deste computador? 


[Sempre sincroniza configurações automaticamente 


[ simeronizas focal | | Sincromezar nuvem | 


Se você selecionar Lembrar minha preferência, a opção escolhida (Sincronizar local ou Sincronizar nuvem) será selecionada na caixa de diálogo 
Preferências. 


IMPORTANTE: se você pressionar a tecla Esc para fechar a caixa de diálogo Configurações conflitantes, a ação de sincronização local será 
realizada. 


E E P iníci 
Acesso direto aos recursos da Creative Cloud DEM 


Você pode abrir, selecionar ou salvar arquivos na Creative Cloud diretamente da interface de usuário do Dreamweaver. Instale o utilitário 
“Creative Cloud Connection Preview” do site . 


Ao instalar esse utilitário, a opção Arquivos da Creative Cloud (realçada na captura de tela) torna-se disponível nas caixas de diálogo Abrir, 
Salvar e Selecionar do Dreamweaver. 
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